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. How to Add Dropzone.js
  2. HTML
  3. PHP
  4. CSS
  5. Final Output
  6. Conclusion

1. How to Add Dropzone.js

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. Final output


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+
Spread the love

Related Post

Be First to Comment

Leave a Reply

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