DropzoneJS provide us the functionality to upload multiple files with drag and drop option. It is an open-source library that is easy to use.
In this post, we will show you how easily you can upload the file by just drag and drop, using dropzone js and PHP.
We need DropzoneJS library and simple PHP upload function to upload the file on destination folder.
In the below example you will learn the use of dropzone js.
Step 1 : Create index.php File
First you need to create an index.php file with the following code.
<!DOCTYPE html>
<html>
<head>
<title>Drag and Drop File Upload using Dropzone JS and PHP - Atcodex.com</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/min/dropzone.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.2.0/min/dropzone.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>Drag and Drop File Upload using Dropzone JS and PHP - Atcodex.com</h2>
<form action="fileUpload.php" enctype="multipart/form-data" class="dropzone" id="image-upload">
<div>
<h3>Drag and Drop File</h3>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
Dropzone.options.imageUpload = {
maxFilesize:1,
acceptedFiles: ".jpeg,.jpg,.png,.gif"
};
</script>
</body>
</html>
Step 2 : Create fileUpload.php File
Next, you need to create fileUpload.php file in with the following code, which basically files uploading PHP code.
<?php
$directoryName = 'imageFolder'; // folder name where image need to be uploaded
if (!empty($_FILES)) {
$tmpFile = $_FILES['file']['tmp_name'];
$filename = $directoryName.'/'.time().'-'. $_FILES['file']['name'];
move_uploaded_file($tmpFile,$filename);
}
?>
Step 3 : Create imageFolder folder
In the final step, you need to create imageFolder folder to store the images. You can give it a different name also.
Now you can run the code in localhost. below is the demo of the code.
Also you can check jQuery ajax image upload in PHP with preview
