Drag and Drop Multiple File Upload using Dropzone JS and PHP -

DropzoneJS provide us the functionality to upload multiple files with drag and drop option. It is an open-source library that is easy to use.

In this post, we will show you how easily you can upload the file by just drag and drop, using dropzone js and PHP.

We need DropzoneJS library and simple PHP upload function to upload the file on destination folder.

In the below example you will learn the use of dropzone js.

Step 1 : Create index.php File

First you need to create an index.php file with the following code.

<!DOCTYPE html>
<html>
<head>
    <title>Drag and Drop File Upload using Dropzone JS and PHP - Atcodex.com</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/min/dropzone.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.2.0/min/dropzone.min.js"></script>
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h2>Drag and Drop File Upload using Dropzone JS and PHP - Atcodex.com</h2>
            <form action="fileUpload.php" enctype="multipart/form-data" class="dropzone" id="image-upload">
                <div>
                    <h3>Drag and Drop File</h3>
                </div>
            </form>
        </div>
    </div>
</div>

<script type="text/javascript">
    Dropzone.options.imageUpload = {
        maxFilesize:1,
        acceptedFiles: ".jpeg,.jpg,.png,.gif"
    };
</script>

</body>
</html>

Step 2 : Create fileUpload.php File

Next, you need to create fileUpload.php file in with the following code, which basically files uploading PHP code.

<?php

$directoryName = 'imageFolder';   // folder name where image need to be uploaded

if (!empty($_FILES)) {
 $tmpFile = $_FILES['file']['tmp_name'];
 $filename = $directoryName.'/'.time().'-'. $_FILES['file']['name'];
 move_uploaded_file($tmpFile,$filename);
}

?>