How to upload a file using Dropzone.js with PHP

Dropzone.js is a lightweight JavaScript library which provides drag and drops file upload with preview.

It works with or without jQuery within the project and also it doesn’t require any other libraries.

It doesn’t upload the file to your server. For uploading, I am using PHP in this tutorial.

You not only upload the file by drag n’ drop you can also use file chooser dialog that’s open when drag n’ drop widget gets clicked. While uploading it shows the progress bar, generates thumbnail image and shows file size in preview after uploading.

How to upload a file using Dropzone.js with PHP


Contents

  1. Download and Include
  2. HTML
  3. PHP
  4. CSS
  5. Demo
  6. Conclusion

1. Download and Include

You can download Dropzone.js library from here and include dropzone.css and dropzone.js files in your page.

<link href='dropzone.css' type='text/css' rel='stylesheet'>
<script src='dropzone.js' type='text/javascript'></script>

2. HTML

Create a <form > and add class=’dropzone’ and set the action to PHP file from where you are handling uploading file operations. Currently, I set it’s to upload.php which I create in next step.

Completed Code

<!doctype html>
<html>
 <head>
 <link href="style.css" rel="stylesheet" type="text/css">
 <link href="dropzone.css" rel="stylesheet" type="text/css">
 <script src="dropzone.js" type="text/javascript"></script>
 </head>
 <body >
 <div class="container" >
  <div class='content'>
   <form action="upload.php" class="dropzone" id="dropzonewidget">
 
   </form> 
  </div> 
 </div>
 </body>
</html>

3. PHP

Create a new upload folder and a upload.php file and use move_uploaded_file() method to upload a file using PHP.

Completed Code

<?php
$target_dir = "upload/";
$target_file = $target_dir . basename($_FILES["file"]["name"]);


if (move_uploaded_file($_FILES["file"]["tmp_name"], $target_dir.$_FILES['file']['name'])) {
 $status = 1;
}

4. CSS

Completed Code

.container{
 margin: 0 auto;
 width: 50%;
}

.content{
 padding: 5px;
 margin: 0 auto;
}
.content span{
 width: 250px;
}

.dz-message{
 text-align: center;
 font-size: 28px;
}

5. Demo


6.Conclusion

It makes your drag n’ drop uploading process lot more similar. For implementing it you only need to add the dropzone library and add dropzone class to <form> that’s it.

It supported by –

  • Chrome 7+
  • Firefox 4+<l/i>
  • IE 10+
  • Opera 12+ (Version 12 for MacOS is disabled because their API is buggy)
  • Safari 6+

Related Post

Spread the love

10 Comments

  1. anurag said:

    sir,
    it is not creating thumbnails for non image files how to create or show custom image at place of greyish box at time of upload

    June 21, 2017
    Reply
    • Yogesh Singh said:

      You can use below script to set custom images for non image files –

      $(“.dropzone”).dropzone({
      init: function() {

      this.on(“success”, function(file) {

      var ext = checkFileExt(file.name);
      var newimage = “”;

      // Check extension
      if(ext != ‘png’ && ext != ‘jpg’ && ext != ‘jpeg’){
      newimage = “upload/logo.png”;
      }

      this.createThumbnailFromUrl(file, newimage);
      });
      }
      });

      // Get file extension
      function checkFileExt(filename){

      filename = filename.toLowerCase();
      return filename.split(‘.’).pop();
      }

      Initialize dropdoze() and check if the file has the specified type of image extensions or not. If it does not have then change thumbnail image source e.g. “upload/logo.png”.

      Here is the demo link.

      June 21, 2017
      Reply
      • anuragbatra said:

        thank you sir

        June 22, 2017
        Reply
      • Karloche said:

        Hi,
        I’m a newbie in this ambit, in which part of the code / page, should the script be implemented? And is there any way to implement the functionality of downloading already uploaded files?

        Thanks for your help, regards.

        July 19, 2017
        Reply
  2. anuragbatra said:

    sir,
    how to send a custom error from php file to be previewed if we found that there is error in file that the user uploaded or the user do not have permissions to make upload

    June 25, 2017
    Reply
    • Yogesh Singh said:

      From PHP return your message based on the success or not and in jQuery handle it on dropzone success.

      Dropzone.autoDiscover = false;
      $(“.dropzone”).dropzone({
      init: function() {

      this.on(“success”, function(file,response) {
      alert(response);
      });

      }
      });

      June 25, 2017
      Reply
      • anuragbatra said:

        sir where to add above code for that sir my php upload file finds error in file example upload limit exeeded then how my php file process this jquery code with default message sir i need code for my php file so that it could be processed

        June 29, 2017
        Reply
  3. Peter Samsom said:

    Thanks for this. How can I get a check to see if the already File Exists, then a prompt to overwrite if it does?

    June 27, 2017
    Reply
    • Yogesh Singh said:

      You can use following code to check and prompt a message on duplicate file case –

      Dropzone.autoDiscover = false;
      $(".dropzone").dropzone({
         init: function() {
                     
           this.on("addedfile", function(file) {
             if (this.files.length) {
               var _i, _len, _ref = this.files.slice();
               for (_i = 0, _len = this.files.length; _i < _len - 1; _i++) {
                                  if (_ref[_i].name === file.name && _ref[_i].size === file.size) {
                                      var r = confirm("Overrite existing file");
                                      if (r == true) {
                                          this.removeFile(_ref[_i]);
                                      }
                                      
                                  }
                              }
                          }
                      });
          }
      });
      June 27, 2017
      Reply
      • Peter Samsom said:

        Thank you

        June 28, 2017
        Reply

Leave a Reply

Your email address will not be published. Required fields are marked *