DropzoneJs + Php

What is DropZoneJs?

DropZoneJs is javascript library that helps to upload multiple files  using AJAX. DropZoneJs gives Drag and Drop File Upload Functionality.  There are common question to us as web-developer how we allow users to allow upload multiple files. DropZoneJs is also previews images thumbnail in upload preview area. DropZoneJs is also compatible to Bootstrap upload file UI. We can also restrict to upload only single file upload to specific numbers of files upload.

DopZoneJs is easy to integrate as beginners.

Benefits of DopZoneJs:

  • Easy to implement
  • Highly Customizable
  • Easy to custom configuration
  • Not Depend on Jquery
  • Lightweight
  • Drag and Drop File Upload

Integrate or Implement Dropzone in Php:

  • To implement dropzone we need dropzone js file and css file. This files you can download from download folder.
  • First you have to download dropzone project from
  • Copy download folder from that DropZoneJs project folder DropZoneJs and paste it into our project folder. In our case this our project folder is upload_demo.
  • Rename that download folder as DropZoneJs in our project folder.
  • Now we have to include javascript  and css in our webpage file:
<script src="DropZoneJs/dropzone.min.js"></script>
	<link rel="stylesheet" type="text/css" href="DropZoneJs/css/dropzone.css"/>
	<link rel="stylesheet" type="text/css" href="DropZoneJs/css/basic.css"/>
  • Then, The Place where we want to put draf\g and drop upload functionality write this code:
<form action="upload.php" class="dropzone"id="my-awesome-dropzone">

This code is equivalent to :

<form action="upload.php" method="post"enctype="multipart/form-data">
<input type="file"name="file"/>

  • When any file is selected for upload or dragged and droped, upload.php called with file input name “file”(Like name=”file”).

In Upload.php file


$upload_path = "uploads";
    move_uploaded_file($_FILES["file"]["tmp_name"], $upload_path .$ds. $_FILES["file"]["name"]);

Please comment below, if you have any queries.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s