In the past, I have written an article Drag and Drop File Upload using JavaScript and PHP. In that article, I focused on uploading a single file. One of the readers asked how to upload multiple files with the same drag and drop technique.

While working on a web application you may require to upload multiple files at a time. The best example is uploading images in the gallery. In such a case, you don’t want to upload images one by one to your gallery. Having the option to upload images in bulk is a better solution. It allows users to upload single or multiple files. Giving this kind of file uploader adds a better user experience and also speeds up your application.

In this article, I show you how to create this file uploader without using any external plugins. I will upload the files using JavaScript, Ajax, and PHP. It means files will be uploaded on the server without reloading a page.

Getting Started

As I said, I’ll not use any external library to achieve the goal. Instead, I am going to write all the code from scratch. It is simple and easy. There is no complex stuff in it. Just follow the steps below and you are done.

First, create the index.html file and add the code below to it. It’ll add a file container where the user can either drop files or choose files via file explorer.

index.html

<link rel="stylesheet" href="style.css" />
<div id="drop_file_zone" ondrop="upload_file(event)" ondragover="return false">
    <div id="drag_upload_file">
        <p>Drop file(s) here</p>
        <p>or</p>
        <p><input type="button" value="Select File(s)" onclick="file_explorer();" /></p>
        <input type="file" id="selectfile" multiple />
    </div>
</div>

<script src="custom.js"></script>

Here I included style.css and custom.js which will be created in the next steps.

To give a basic UI for the file uploader let’s add some CSS properties. I am giving a basic styling to the file uploader. You may wish to add your own CSS to give a different look.

style.css

#drop_file_zone {
    background-color: #EEE;
    border: #999 5px dashed;
    width: 290px;
    height: 200px;
    padding: 8px;
    font-size: 18px;
}
#drag_upload_file {
  width:50%;
  margin:0 auto;
}
#drag_upload_file p {
  text-align: center;
}
#drag_upload_file #selectfile {
  display: none;
}

After this, the file uploader will display something like the below screenshot:

Drag and Drop Multiple Files using JavaScript and PHP

We are set with the basic UI. Now, let’s write actual code in JavaScript and PHP which upload files on a server. In the HTML I added 2 methods – upload_file() and file_explorer() that will get called as soon as you drop or select files.

These methods will accept files from the client side and pass them to the server-side script for further processing.

custom.js

function upload_file(e) {
    e.preventDefault();
    ajax_file_upload(e.dataTransfer.files);
}
  
function file_explorer() {
    document.getElementById('selectfile').click();
    document.getElementById('selectfile').onchange = function() {
        ajax_file_upload(document.getElementById('selectfile').files);
    };
}
  
function ajax_file_upload(files_obj) {
    if(files_obj != undefined) {
        var form_data = new FormData();
        for(i=0; i<files_obj.length; i++) {
            form_data.append('file[]', files_obj[i]);
        }
        var xhttp = new XMLHttpRequest();
        xhttp.open("POST", "ajax.php", true);
        xhttp.onload = function(event) {
            if (xhttp.status == 200) {
                alert(this.responseText);
            } else {
                alert("Error " + xhttp.status + " occurred when trying to upload your file.");
            }
        }
 
        xhttp.send(form_data);
    }
}

Finally, write a PHP code to receive files and uploads them on the server. This code will go inside the ajax.php file.

ajax.php

<?php
if (!file_exists('uploads')) {
    mkdir('uploads', 0777);
}

foreach ($_FILES['file']['name'] as $key=>$val) {
    $filename = uniqid().'_'.$_FILES['file']['name'][$key];

    move_uploaded_file($_FILES['file']['tmp_name'][$key], 'uploads/'.$filename);
}

echo "File(s) uploaded successfully.";
die;

Here, we create the uploads directory on the server and stores all files inside this directory. You probably want to adjust this directory with something else. While storing files on a server, I am keeping the unique name of each uploaded file using the function uniqid(). It saves overriding files with similar names.

It’s all about uploading multiple files using the drag and drop technique. I hope this tutorial should help you to add a file uploader to your project.

Related Articles

• Image Optimization using artisansweb/image-optimizer Package
• Resize Image in PHP Using Intervention Image Library
• How to Read Text from Image in PHP

If you liked this article, then please subscribe to our YouTube Channel for video tutorials.