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

16 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
  4. Arijit Dasgupta said:

    Sir it’ll be really helpful if you provide the code to delete the image from database and folder.

    August 26, 2017
    Reply
      • Arijit Dasgupta said:

        I’ve tried many things… but it’s not working.. sir it’ll be very convenient if you post the code for it…

        August 27, 2017
        Reply
        • Yogesh Singh said:

          I am assuming that you have created separate delete button to remove the image. On the click of the button execute MySQL query to delete it from the database table and unset() method to remove from the folder.

          Example –
          To remove from the database table just update the column with an empty (“”) value or if you have created a separate table for the images storing then delete that image record.

          // Remove image from database table ( Execute this query if their is separate column to store image )
          mysqli_query($con,"update postTable set image='' where id=2");
          OR
          // Remove image from database table ( Execute this query if their is separate table to store images )
          mysqli_query($con,"delete from postTable where id=2");
          
          // Remove from folder ( $imagepath will contain the path of the image to delete )
          unset($imagepath);
          
          August 27, 2017
          Reply
  5. Arijit Dasgupta said:

    How can I get the Id of that image and how I can refer a php page when the user clicks the default remove file button in dropzone????

    August 27, 2017
    Reply
    • Yogesh Singh said:

      You can use below code to remove the existing files. Here, I initialized dropzone() and to delete option add addRemoveLinks: true and removefile options.

      From removefile send an AJAX request to delete the file.

      Script
      Dropzone.autoDiscover = false;
      $(“.dropzone”).dropzone({
      init: function() {
      },
      addRemoveLinks: true,
      removedfile: function(file) {
      $.ajax({
      url: ‘delete.php’,
      type: ‘post’,
      data: {name: file.name},
      success: function(data){

      }
      });
      file.previewElement.remove();
      return false;
      }
      });

      delete.php (AJAX file)

      < ?php $target_dir = "upload/"; $filename = $target_dir.$_POST['name']; unlink($filename); exit;

      August 29, 2017
      Reply

Leave a Reply

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