Code example will help to make drag and drop file upload using JavaScript and PHP


Project structure:

Drag _ drop upload/
┣ uploads/
┣ index.php
┣ js_script.js
┣ style.css
┗ upload.php

index.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
        <link href="style.css" rel="stylesheet" type="text/css"/>   
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div id="uploads"></div>
                <div class="dropzone" id="dropzone">
                    Drop files fere to upload
                </div>
            </div>
        </div>
        <script src="js_script.js" type="text/javascript"></script>
    </body>
</html>

style.css

body{
    font-family: "Arial" ,sans-serif;
}

.dropzone{
    width: 100%;
    height:300px;
    border: 2px dashed #ccc;
    color: #ccc;
    text-align: center;
    line-height: 300px;
    margin: 20px auto;
   
}

.dropzone.dragover{
    border-color: #000;
    color: #000;
}

js_script.js

(function() {
    var dropzone = document.getElementById('dropzone');

    var displayUploads = function(data) {
        var uploads = document.getElementById('uploads'),
                anchor,
                x;
        for (x = 0; x < data.length; x = x + 1) {
            anchor = document.createElement('a');
            anchor.href = data[x].file;
            anchor.innerText = data[x].name;

            uploads.appendChild(anchor);
        }
    };



    var upload = function(files) {

        var formData = new FormData(),
                xhr = new XMLHttpRequest(),
                x;
        for (x = 0; x < files.length; x = x + 1) {
            formData.append('file[]', files[x]);
        }

        xhr.onload = function() {
            var data = JSON.parse(this.responseText);
            displayUploads(data);
        };

        xhr.open('post', 'upload.php');
        xhr.send(formData);

    };

    dropzone.ondrop = function(e) {
        e.preventDefault();
        this.className = 'dropzone';
        upload(e.dataTransfer.files);
    };


    dropzone.ondragover = function() {
        this.className = 'dropzone dragover';
        return false;
    };

    dropzone.ondragleave = function() {
        this.className = 'dropzone';
        return false;
    };
}()); 


upload.php

<?php

header("Content-Type: application/json");
$uploaded = array();
if(!empty($_FILES['file']['name'][0])){
    
    foreach($_FILES['file']['name'] as $position => $name){
        
        if(move_uploaded_file($_FILES['file']['tmp_name'][$position], 'uploads/'.$name)){
               $uploaded[] = array(
                   'name' => $name,
                   'file' => 'uploads/'.$name
               );                                                                                                                           
        }       
    }   
}
  echo json_encode($uploaded); 
  
  ?>

Output:



Code is tested and it will work 100% for you 

Download source code

Are you facing problems in understanding this article? download source code now