PHP – multiple files uploading dropzone js example

There is always a need to make multiple file or image uploading functions in a website or project. We use input with multiple image upload but it may not look great and the user may not like it. Image uploads are very common for all websites, whether you are working with PHP or any PHP framework like Laravel, Codeigniter, etc then you can simply use the dropzone JS library.

Dropzone JS Library enables us to drag and drop multiple file uploading. Dropzone JS is an open-source JavaScript library. Dropzone JS library is simple to use. Dropzone JS also provides us with validation like max file upload, specific extension, etc.

In this tutorial, you can see a demo of multiple image uploads. Let’s see the steps listed below:

  1. Create an index.php file.
  2. Create an upload.php file.
  3. Create an uploads folder.

Preview

multiple image dropzone

Step 1: Create an index.php file

We will be creating an index.php file in the root folder. Copy the below code. In this file, we have used cdn for bootstrap, jQuery, dropzone CSS, and JS.

index.php

<!DOCTYPE html>
<html>
<head>
    <title>PHP - Multiple Image upload using dropzone.js</title>
    <script src="http://demo.webhostguru.com/plugin/jquery.js"></script>
    <link rel="stylesheet" href="http://demo.webhostguru.com/plugin/bootstrap-3.min.css">
    <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>PHP - Multiple Image upload using dropzone.js</h2>
            <form action="upload.php" enctype="multipart/form-data" class="dropzone" id="image-upload">
                <div>
                    <h3>Upload Multiple Image By Click On Box</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 upload.php file

Let’s create upload.php file in our root folder.

upload.php

<?php

$uploadDir = 'uploads';

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

?>

Step 3: Create an uploads folder

This is the last step in, which we will be creating an “uploads” folder to store images. You can also give different names from uploads, but make sure also change them on the upload.php file.

Now, run the code using the below command on the root folder.

php -S localhost:8000

 Now, open the below URL on your browser:

Output

multiple image dropzone


Notice: ob_end_flush(): failed to send buffer of zlib output compression (1) in /home/u212091429/domains/mydevhelp.com/public_html/wp-includes/functions.php on line 5420

Notice: ob_end_flush(): failed to send buffer of zlib output compression (1) in /home/u212091429/domains/mydevhelp.com/public_html/wp-includes/functions.php on line 5420