PHP drag and drop file upload tutorial using dropzone.js

dropzone.js is a Open Source under MIT Licience library that lets you upload files (images, pdfs, text files, docs e.t.c) to the server via simple drag-and-drop option.

This tutorial provides an example with PHP :

Steps :

Download the js dropzone-amd-module.js and css - dropzone.css from github :

Create a HTML page that with file upload form :

Example: drag-drop-example.html

<title>Drag drop Images, PDF, Docs and other files Example : PHP + Dropzone.js</title>

<script src="js/dropzone.js"></script>

<style type="text/css">
 * The MIT License
 * Copyright (c) 2012 Matias Meno <>
.dropzone,.dropzone * {
	box-sizing: border-box;

.dropzone {
	position: relative;

.dropzone .dz-preview {
	position: relative;
	display: inline-block;
	width: 120px;
	margin: 0.5em;

.dropzone .dz-preview .dz-progress {
	display: block;
	height: 15px;
	border: 1px solid #aaa;

.dropzone .dz-preview .dz-progress .dz-upload {
	display: block;
	height: 100%;
	width: 0;
	background: green;

.dropzone .dz-preview .dz-error-message {
	color: red;
	display: none;

.dropzone .dz-error-message,.dropzone .dz-error-mark
	display: block;

.dropzone .dz-success-mark {
	display: block;

.dropzone .dz-preview .dz-error-mark,.dropzone .dz-preview .dz-success-mark
	position: absolute;
	display: none;
	left: 30px;
	top: 30px;
	width: 54px;
	height: 58px;
	left: 50%;
	margin-left: -27px;

/* Custom decoration code */ 
.decoration {
	border: 1px dashed #999;
	background: #f2f2f2;
	padding: 20px;

<form action="upload-files.php" class="dropzone decoration"

<script type="text/javascript">

Dropzone.options.myAwesomeDropzone = {
		  maxFilesize: 20, // Size in MB
		  addRemoveLinks: true,
		    removedfile: function(file) { 
		      var fileRef;
		      return (fileRef = file.previewElement) != null ? 
				      fileRef.parentNode.removeChild(file.previewElement) : void 0;

	success: function(file, response) {

	error: function(file, response) {


Create a PHP page to upload files to the server :
//PHP code to upload file to server directory
if (!empty($_FILES)) {
	$temporaryFile = $_FILES['file']['tmp_name'];     
	$targetFile =  "uploaded-file-dir-location". $_FILES['file']['name'];
	if(!move_uploaded_file($temporaryFile,$targetFile))  {
		echo "Error occurred while uploading the file to server!";		

Recent Posts:

Code2care is an initiative to publish and share varied knowledge in programming and technical areas gathered during day-to-day learnings and development activities.

Students and Software Developers can leverage this portal to find solutions to their various queries without re-inventing the wheel by referring to our easy to understand posts. Technical posts might include Learnings, Video Tutorials, Code Snippets, How Tos, Blogs, Articles, etc.