Afficher le fichier lors du téléchargement

Catégories

JavaScript

Aujourd'hui j'ai découvert qu'on peut afficher une image pour prévisualiser les téléchargements

Structure HTML:

<div class="container">
    <div class="dropzone" id="dropzone">
        <p>Déposez vos fichiers</p>
        <p>ou</p>
        <button type="button" class="select-button" id="selectButton">
            Sélectionnez vos fichiers
        </button>
        <input type="file" id="fileInput" hidden multiple accept="image/*">
    </div>
    <div id="previewContainer"></div>
</div>

Glisser-Déposer

Voici un exemple de comment gérer le glisser-déposer nativement en JavaScript

Supprimer le comportement par défaut

['dragenter', 'dragover', 'dragleave', 'drop'].forEach(event => {
    dropzone.addEventListener(event, preventDefaults);
    document.body.addEventListener(event, preventDefaults);
});

function preventDefaults(e) {
    e.preventDefault();
    e.stopPropagation();
}

Ajouter des effets pour le glisser-déposer

['dragenter', 'dragover'].forEach(event => {
    dropzone.addEventListener(event, () => {
        dropzone.classList.add('dragover');
    });
});

['dragleave', 'drop'].forEach(event => {
    dropzone.addEventListener(event, () => {
        dropzone.classList.remove('dragover');
    });
});

Gérer le dépôt

dropzone.addEventListener('drop', (e) => {
    const files = e.dataTransfer.files;
    handleFiles(files);
});

selectButton.addEventListener('click', () => fileInput.click());
fileInput.addEventListener('change', (e) => handleFiles(e.target.files));

function handleFiles(files) {
    Array.from(files).forEach(createPreview);
}

Prévisualisation

Pour prévisualiser l'image, nous devons créer une URL à partir du blob de l'image lors du téléchargement.

function createPreview(file) {
    if (!file.type.startsWith('image/')) {
        alert('Veuillez sélectionner uniquement des images.');
        return;
    }
    const previewItem = document.createElement('div');
    previewItem.className = 'preview-item';

    const img = document.createElement('img');
    img.className = 'preview-image';

    // Créer l'URL de l'image
    const objectUrl = URL.createObjectURL(file);
    img.src = objectUrl;
    img.alt = file.name;

    // Libérer l'URL après le chargement
    img.addEventListener('load', () => {
        URL.revokeObjectURL(objectUrl);
    });

    const info = document.createElement('div');
    info.className = 'preview-info';
    info.innerHTML = `
        <p><strong>${file.name}</strong></p>
        <p>Taille: ${(file.size / 1024).toFixed(2)} KB</p>
    `;

    const removeButton = document.createElement('button');
    removeButton.className = 'remove-button';
    removeButton.textContent = 'Supprimer';
    removeButton.onclick = () => previewItem.remove();

    previewItem.appendChild(img);
    previewItem.appendChild(info);
    previewItem.appendChild(removeButton);
    previewContainer.appendChild(previewItem);
}

0 Commentaire