Create Drag and Drop Multiple File Upload using PHP and Dropzone.js

multiple file uploader

Image uploading is one of the most common features every website owner would love to have in their website. I have also posted the script to upload images in PHP and its enhanced version. Users must be able to upload multiple image files easily. I just came to know about a wonderful js library dropzone.js. You can use it with php and create easy-to-use multiple file uploader in minutes. In this tutorial I will show you how to do that.   We will allow users to add multiple images just by dragging it in into our file uploader page.

This tutorial requires dropzone.js you can download it from its official website (Everything is well explained). I have used dropzone.js version 3.0 (latest till date) in this tutorial.

multiple file uploader

LIVE DEMO    DOWNLOAD

Now let’s start our tutorial, we have just two mail files here index.html  and file-upload.php. index.html file is a simple file which contains call to dropzone.js and css file then it has code to show up the simple form.  File-upload.php handles rest of the part, it uploads images to specified directory in server.

Note: I have used style sheet given by dropzone, you can download the zip file from here. But I have uploaded the minimal files required for this tutorial so you can download that too.

You just need a form in index.html, here is the main code:

</p>
<body>
<form action="file-upload.php" class="dropzone"></form>
</body>
<p style="text-align: justify;">

Code for file-upload.php:

</p>
<?php

$upload_dir = 'myuploads';

if (!empty($_FILES)) {

 $tempFile = $_FILES['file']['tmp_name'];
 // using DIRECTORY_SEPARATOR constant is a good practice, it makes your code portable.
 $targetPath = dirname( __FILE__ ) . DIRECTORY_SEPARATOR . $upload_dir . DIRECTORY_SEPARATOR;
 // Adding timestamp with image's name so that files with same name can be uploaded easily.
 $mainFile = $targetPath.time().'-'. $_FILES['file']['name'];

 move_uploaded_file($tempFile,$mainFile);

}
?>
<p style="text-align: justify;">

Its really easy to implement this tutorial, and it will hardly take your 10 minutes. We can expect a lot more from future versions of dropzone.js. Still there’s a lot that should be done like giving option to delete files after upload etc. Share this simple tutorial with your friends, I hope it will help them too.

Note: You should use restriction on the type of file to be uploaded on server. Based on your need allow only files of particular type to be uploaded.

107 thoughts on “Create Drag and Drop Multiple File Upload using PHP and Dropzone.js”

  1. Hi!, big thanks! This tute is very helpfull. Just a little question. How could you store the images name in a MySQL database?

      1. Hi,

        I have subscribe to feedburner. Would you be able to email me?

        Regards,
        Terence Leong

          1. Hi Jonathan,
            You can use this script to upload your images in a directory in your server. Add few lines of PHP code which will store path of image files in database. Remember to put restriction (by file type) so that this code will allow only images to be uploaded on server, by default it allows all type of files so your users can upload any malicious file.

            Regards:
            Sanjeev

  2. Hi thank you. That helps me a lot. Sorry my bad english- I’m from Germany 😉

    I have one problem, maybe you can help me.
    In the “file-upload.php” you are writing :
    “// Adding timestamp with image’s name so that files with same name can be uploaded easily.”

    But I need that without the timestamp and I don`t know how.
    Can you help me, please?

    1. Hi Lukas,

      Change this line

      $mainFile = $targetPath.time().’-‘. $_FILES[‘file’][‘name’];

      to

      $mainFile = $_FILES[‘file’][‘name’];

  3. Hi!, big thanks! This tute is very helpfull. Just a little question. How could you store the images name in a MySQL database? Could you give an example? Because I tried unsuccessfully to do…

    1. Hi Miguel,

      You can simply store filename with path in your MySQL database like this
      $image_path = “UPLOAD_DIRECTORY_PATH”.$_FILES[“file”][“name”]; (replace ‘UPLOAD_DIRECTORY_PATH’ with actual path)
      Then store $image_path in MySQL database just like you store any other variable.

      1. i upload multiple file and i want to store that all file name in one coloumn in database. when i insert filename in database ,if i upload two file then they insert in different coloumn.solve please,i know i m doing silly mistake but i m not cathing that.

  4. hi sanjeev, thank u so much for the plugin bcoz whenever i went to the website of DROPJONE.I got confused and not able to configure my script but u make me understand very well in easy way.

  5. Hi sanjeev,

    thanks for your answer! but its not working. you wrote me, that I have to:

    Change this line

    $mainFile = $targetPath.time().’-’. $_FILES[‘file’][‘name’];

    to

    $mainFile = $_FILES[‘file’][‘name’];

    when I change this, the file don`t load up.

    tanks!
    Lukas

  6. Hello Sanjeev sir,
    i have two question reply please
    1)when i upload file its working good. but when i am uploading heavy file it show file upload in front but file is not upload in myupload folder?

  7. yes i checked its maxi. 8 mb so i want if file size is more then 8mb then it stop upload and show an error. is it possible?

  8. sir one thing is more i am using this code twice in my single html page. i means i have two form and both form upload there file in single folder. is it possible that both form upload file in separate folder.?

  9. Hello Sanjeev,
    It,s good work. but if any user upload wrong file then there should be option for remove file. is it possible with is plugin?

  10. i localhost file upload is working fine. but, when i put this code on host then it is not upload .php file.??
    could you tell me how i can use the file restriction?????????????????

  11. I have subscribed to using this email , but I am not able to download it…
    please help me out here, and how will I able to get the multiple image names and save it in the database….
    Thanks….

  12. Pingback: Drag Drop Multiple File Upload with Dropzone js and Save to Database - InfoTuts

  13. I have subscribed already. but it says that My Email id is not on the list. On another side, I saw , emails are being uploaded after 12 hours. Sad

  14. Hi, I use the Dropzone.js in my project and I use it to list and upload files, but when I upload the files I change the name of file and create one event to open the file uploaded in new tab. The problem is, the link to open the file, because in “addedfile” function the file.name is the original, but I need to create a link to server file, that now have a new name.

    What I did was, on “addedfile” function create one event with link to file.name (because it’s mandatory to list files) with next code:
    file.previewElement.addEventListener(“click”, function() {
    window.open(“uploads” + file.name, ‘_blank’);
    });

    and then, on “success” function I try to change this event with same code, but it add a new link, and open 2 new tabs, one with original filename and other with the new name (the correct name).

    My question is: How to change the EventListner, instead create a new link (removeEventListner(…) is not working), or in “addedfile” function save this new name on Dropzone plugin (in “addedfile” function the code file.name = “abc.docx” is not working)?

    Thanks in advance.

  15. Hi,

    Thanks a lot for your such wonderful tutorial.
    I have a simple problem that you can easily fix.

    I just changed the id of dropzone form element for further customization as:

    but now onwards the file is not moved to real path!! How can we fix it ?

  16. Already subscribed. Unable to download. Its showing “Sorry, We dont have your email. Please Subscribe Below”

  17. Pingback: Delete uploaded file in Dropzone.js

      1. Hi Roberto,

        Please check again. I am able to download the file using your email id as it is already activated in the system.

        Thanks:
        Sanjeev

  18. Pingback: Ajax Multiple Image upload using Javascript and PHP - InfoTuts

  19. I was tray many time but still didn’t download your code, don’t know what happen, please help thank you. 🙂

  20. Hi,

    Thanks a lot for your such wonderful tutorial.
    I have a simple problem that you can easily fix.

    I want to add more functionality such as when to upload image in drop box and then to click on image and to display popup of this image and in the popup image are cropping and to save in thumbnail folder. for example like in facebook to upload image and then click it cropped and save …..

    so please help me…!

    1. Hi i want Drag Drop image with submit button. If you provide me this code it will be helpfull for me

  21. How to use Submit botton? After submit imeges will be upload. i want this . how to use submit botton?

  22. Hi. First. Thanks again for those great Tuts.
    Some years before you helped me with a little problem with the code.
    Now I have another question. Maybe you have an idea.

    Is it possible to select only some documents from my uploaded documents ( by clicking a checkbox or so) an send them to an emailadress?
    I hope you can understand what i am meening.
    Best greats from germany
    Lukas

  23. I just subscribed for this project to download it, but when i give my email address then it show not subscribe now what to do to download this project??

  24. I subscribed, but not downloading your file. It’s very good…….
    If any way to download your source code, plz provide me link.

    Thank you.

Comments are closed.