Glisser-déposer - Téléchargement de plusieurs fichiers à l'aide du didacticiel JavaScript pur

Glisser-déposer – Téléchargement de plusieurs fichiers à l’aide du didacticiel JavaScript pur

Dans ce didacticiel, vous apprendrez à créer ou à implémenter un Téléchargement de fichiers par glisser-déposer utilisant JavaScript pur. Ce didacticiel vise principalement à fournir aux étudiants en informatique/informatique et aux nouveaux programmeurs une référence pour gérer les téléchargements de fichiers côté client et côté serveur. Ici, le tutoriel étape par étape pour atteindre l’objectif principal est fourni avec des extraits pour une meilleure compréhension. Un exemple de fichier zip de code source d’application Web qui illustre l’objectif du didacticiel est également fourni et peut être téléchargé gratuitement.

Qu’est-ce que le téléchargement de fichiers par glisser-déposer ?

Téléchargement de fichiers par glisser-déposer est un processus de gestion des téléchargements de fichiers côté client. Il permet à l’utilisateur final d’un certain système ou d’une plate-forme de simplement faire glisser les fichiers qu’il souhaite télécharger et déposer dans un certain conteneur ou zone de dépôt de fichiers sur la page de la plate-forme.

Comment créer un fichier glisser-déposer en utilisant JavaScript ?

Glisser déposer fonctionnalité peut être obtenue à l’aide de Écouteurs d’événements JavaScript. Voici les écouteurs d’événements suivants qui peuvent être utilisés pour réaliser ladite fonctionnalité :

ondragover
- Cet écouteur d’événement vous permet de créer un processus, des fonctions ou des manipulations qui seront déclenchées lorsque le fichier déplacé survolera le champ de la zone de dépôt.
ondragleave
- Cet écouteur d’événement vous permet de créer un processus, des fonctions ou des manipulations qui seront déclenchées lorsque le fichier glissé quitte le champ de la zone de dépôt.
ondrop
- Cet écouteur d’événement vous permet de créer un processus, des fonctions ou des manipulations qui seront déclenchées lorsque le fichier déplacé aura été déposé dans le champ de la zone de dépôt.

Exemple de syntaxe

Voici un exemple d’extrait qui montre comment utiliser lesdits écouteurs d’événement.

    document.getElementById('drop-zone').ondragover = function(event)
    {
        // Add something here
    }
    document.getElementById('drop-zone').ondragleave = function(event)
    {
        // Add something here
    }
    document.getElementById('drop-zone').ondrop = function(event)
    {
        // Add something here
    }

Exemple

Voici les extraits de code source d’applications Web simples qui démontrent le Téléchargement de plusieurs fichiers par glisser-déposer avec une barre de progression utilisant les 3 écouteurs d’événements mentionnés ci-dessus. L’application permet aux utilisateurs finaux de télécharger plusieurs fichiers par simple glisser-déposer des fichiers sur la zone de dépôt des fichiers de l’application. Le processus de téléchargement vers le serveur sera exécuté en utilisant le Requête HTTP JS et Script PHP.

Interface

Voici l’extrait de l’interface de la page d’application. Le fichier est un combiné PHP et HTML script pour afficher la zone de dépôt de fichiers et les fichiers téléchargés. j’ai utilisé Amorçage v5 et Icônes géniales pour la conception de l’interface qui est chargée à l’aide de CDN. Enregistrez le fichier sous index.php

<!DOCTYPE html>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS Drag and Drop - Upload Multiple File</title>
    <link rel="stylesheet" href=" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
 
    <script src=" integrity="sha512-naukR7I+Nk6gp7p5TMA4ycgfxaZBJ7MO5iC3Fp6ySQyKFHOGfpkSZkYVWV5R7u7cfAicxanwYQ5D1e17EfJcMA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary bg-gradient">
            <a class="navbar-brand" href="./">JS Drag and Drop - Upload Multiple File</a>
                <a href=" class="text-light fw-bolder h6 text-decoration-none" target="_blank">SourceCodester</a>
    </nav>
    <div class="container-fluid px-5 my-3">
        <div class="col-lg-6 col-md-8 col-sm-12 mx-auto">
            <div class="card rounded-0">
                <div class="card-body rounded-0">
                    <div class="container-fluid">
                        <!-- Drag and Drop Field -->
                            <h3 class="text-muted">Drag and Drop Files Here</h3>
                            <div class="progress" id="upload-progress-holder" style="display:none">
                                <div class="progress-bar" id="upload-progress" role="progressbar" aria-label="Example with label" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
                            <?php 
                            if(is_dir("uploads/")):
                            $scandr = scandir("uploads/");
                            foreach($scandr as $file){
                                if(in_array($file, [".", ".."]))
                                continue;
                                $type = mime_content_type("uploads/".$file);
                            ?>
                            <div class="uploaded-file-item">
                                <?php if(strstr($type, "image/")): ?>
                                    <a href="uploads/<?= $file ?>" class="image-holder" target="_blank">
                                        <img src="uploads/<?= $file ?>" alt="">
                                <?php else: ?>
                                    <a href="uploads/<?= $file ?>" class="icon-holder" target="_blank">
                                        <i class="fa-solid fa-file"></i>
                                <?php endif; ?>
                                <div class="text-center"><?= $file ?></div>
                            <?php } ?>
                            <?php endif; ?>

Style personnalisé

Voici l’extrait de la feuille de style en cascade personnalisée ou CSS pour certaines des conceptions de l’interface. Enregistrez le fichier style.css.

html, body{
    min-height:100%;
    width:100%;
}
#dd-field{
    width: 100%;
    height: 15vh;
    border: 2px dashed #b5b5b5;
    border-radius: 15px;
    overflow: auto;
    padding: 1em;
    display: flex;
    color: #b5b5b5;
    font-size: 1.5em;
    align-items: center;
    justify-content: center;
}
#upload-field{
    width: 100%;
    height: 45vh;
    border: 2px solid #b5b5b5;
    border-radius: 15px;
    overflow: auto;
    padding: 1em;
    display: flex;
    flex-wrap: wrap;
}
#upload-field:empty{
    align-items: center;
    justify-content: center;
}
#upload-field:empty:after{
    content:"Uploads Directory is empty";
    color: #b5b5b5;
    font-size: 1em;
}
.uploaded-file-item {
    width: 30%;
    margin: 1.5%;
}
.image-holder, .icon-holder {
    width: 100%;
    height: 10vh !important;
    background-color: black;
    border: #b5b5b5;
    border-radius: 5px;
    display: block;
}
.icon-holder{
    color: #fff;
    font-size: 3em;
    text-align: center;
}
.image-holder>img {
    width: 100%;
    height: 100%;
    object-fit: scale-down;
    object-position: center center;
}

API PHP

L’extrait suivant est un PHP script qui télécharge les fichiers sur le serveur. Le script contient une logique simple pour gérer les fichiers avec des noms de fichiers en double. Cette API sera exécutée par le Requête HTTP JS. Enregistrez le fichier sous upload_files.php

<?php
// Upload Directory
$dir = "uploads/";
 
/**
    * Check and Create Uploads Directory If not Existing Yet
    */
 
if(isset($_FILES['files']) && count($_FILES['files']['tmp_name']) > ){
    $files = $_FILES['files'];

  


    $total_files = count($_FILES['files']['tmp_name']);
    $uploaded_files = [];
    $uploaded = ;
    foreach($files['tmp_name'] as $k => $file){
 
 
 
            // Get the File Path Info
            $filepath_part = pathinfo($files['name'][$k]);
            // Get the filename
            $filename = $filepath_part['filename'];
            // Get the extension
            $extension = $filepath_part['extension'];
            // File Full Name w/ Extension
            $filefullname = $filename.".".$extension;
            // Content Mime Type
 
            // print($mime_type."<br>");
            // continue;
 
            /**
                * Check and Rename Filename if file already exists.
                */
 
            // temporary filename for checking duplicate
            $tmp_name = $filefullname;
 
            //Duplicate Iteration Number
            $i = ;
            while(true){
                if($i > )
                $tmp_name = $filename." ($i)".".".$extension;
 
                    $i++;
                }else{
                    $filefullname = $tmp_name;
                    break;
                }
            }
 
            /**
                * Move file to uploads directory
                */
            if($upload){
                $uploaded_files[] = ["filename" => $filefullname, "type" => $mime_type];
                $uploaded++;
            }
        }
    }
    if($uploaded == $total_files){
            "status" => 'success',
            "msg" => 'File has been uploaded successfully.',
            "uploads" => $uploaded_files
        ]);
    }elseif($uploaded >  && $uploaded < $total_files){
            "status" => 'success',
            "msg" => 'Some Files has been uploaded successfully and some has failed due to some reason.',
            "uploads" => $uploaded_files
        ]);
    }else{
            "status" => 'error',
            "msg" => 'Files has failed due to some reason.'
        ]);
    }
}else{
        "status" => 'error',
        "msg" => 'No files sent on this request.'
    ]);
}

Javascript

Voici la Javascript extrait qui contient l’objet principal de ce didacticiel. Il a un script qui implémente le Glisser déposer fonctionnalité du système et déclenche le téléchargement des fichiers déposés. Enregistrez le fichier sous télécharger-fichier-dd.js.

/**
* Check if Upload Field is empty
*/
window.onload = function(){
    if(document.getElementById('upload-field').innerText == ""){
        document.getElementById('upload-field').innerHTML = ""
    }
}
 
/**
* Drag and Drop Field Drag Over CSS Change
*/
document.getElementById('dd-field').ondragover = function(event)
{
    this.style.borderColor = '#000';
    return false;
}
 
/**
* Drag and Drop Field Drag Leave CSS Change
*/
document.getElementById('dd-field').ondragleave = function(event)
{
    this.style.borderColor = '#b5b5b5';
    return false;
}
 
 
/**
* Drag and Drop Field Dropped Files
* Process and Upload Files
*/
document.getElementById('dd-field').ondrop = function(event)
{
    event.preventDefault();
    document.getElementById('msg').innerHTML = "";
 
    this.style.borderColor = '#429ebe';
    var form_data  = new FormData();
 
 
    var error = '';
 
    var drop_files = event.dataTransfer.files;
 
    // Allowed Files to Upload
    var valid_files = ['image/jpeg', 'image/png', 'video/mp4', 'application/gzip', 'image/gif', 'text/html', 'application/json', 'application/pdf', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/msword', 'text/csv', 'text/plain'];
 
    for(var count = ; count < drop_files.length; count++)
    {
        if(!valid_files.includes(drop_files[count].type))
        {   
            // In File type is not allowed
            error += `<div class="alert alert-danger rounded-0 mb-3"><b>${drop_files[count].name}'s</b> File Type is not valid.</div>`;
        }
        else
        {
            form_data.append("files[]", drop_files[count]);
        }
 
    }
 
    if(error != '')
    {
        // Return Error Message
 
        document.getElementById('msg').innerHTML = error;
        document.getElementById('dd-field').style.borderColor="#b5b5b5";
    }
    else
    {
        // Display Progress Bar
        document.getElementById('upload-progress-holder').style.display = 'block';
 
 
        /**
        * Upload files
        */
 
        var httpRequest = new XMLHttpRequest();
        httpRequest.open("post", "upload_files.php");
        httpRequest.responseType = "json"
        httpRequest.upload.addEventListener('progress', function(event){
            /**
            * Update Progress Bar while Upload is inProgress
            */
            var percent_completed = Math.round((event.loaded / event.total) * 100);
 
            document.getElementById('upload-progress').style.width = percent_completed + '%';
 
            document.getElementById('upload-progress').innerHTML = percent_completed + '% completed';
 
        });
        httpRequest.addEventListener('load', function(event){
            // Upload Response
            response = httpRequest.response
            // console.log(response)
            if(!!response.status){
                if(response.status == 'success'){
                    // IF File Upload is successfull
                    if(!!response.msg)
                        document.getElementById('msg').innerHTML = `<div class="alert alert-success rounded-0 mb-3">${response.msg}</div>`;
                    if(!!response.uploads){
                        /**
                        * Add Newly Uploaded files to upload field
                        */
                        Object.keys(response.uploads).map(k => {
                            var fname = response.uploads[k].filename
                            var type = response.uploads[k].type
 
                            var el = document.createElement("div")
                            el.classList.add("uploaded-file-item")
                            if(type.includes("image/") === true){
                                el.innerHTML = `
                                    <a href="uploads/${fname}" class="image-holder" target="_blank">
                                        <img src="uploads/${fname}">
                                    </a>
                                    <div class="text-center">${fname}</div>
                                `
                            }else{
                                el.innerHTML = `
                                    <a href="uploads/${fname}" class="icon-holder" target="_blank">
                                        <i class="fa-solid fa-file"></i>
                                    </a>
                                    <div class="text-center">${fname}</div>
                                `
                            }
                            document.getElementById('upload-field').innerHTML = el.outerHTML  + document.getElementById('upload-field').innerHTML
                            document.getElementById('upload-field').scrollTop = 0
                        })
                    }
                }else if(response.status == 'error'){
                    if(!!response.msg)
                        document.getElementById('msg').innerHTML = `<div class="alert alert-danger rounded-0 mb-3">${response.msg}</div>`;
                }else{
                    document.getElementById('msg').innerHTML = `<div class="alert alert-danger rounded-0 mb-3">An error occurred while uploading the files.</div>`;
                }
            }
 
            document.getElementById('dd-field').style.borderColor="#b5b5b5";
 
        });
 
        httpRequest.send(form_data);
    }
}

C’est ça! Vous pouvez maintenant tester le code source de l’application de votre côté. Le répertoire de téléchargement sera automatiquement créé lors du premier téléchargement de fichiers à l’aide de l’application. J’ai également fourni le fichier zip complet du code source de l’application avec cet article et il est téléchargeable gratuitement. Vous pouvez le télécharger en cliquant sur le Bouton de téléchargement situé sous cet article.