Dropzone. js is a light weight JavaScript library that turns an HTML element into a “dropzone“‘, Users can drag and drop a file onto an area of the page, uploading to a server.
In this tutorial, you will learn how to create drag and drop multiple file uploads using dropzone js in PHP MySQL.
Drag and Drop Multiple File Upload PHP MySql using Dropzone JS
Follow following the below steps and upload file using jQuery dropzone js in PHP:
- Step 1 – Create index.php
- Step 2 – Create upload.php
- Step 3 – Create a Directory
Step 1 – Create index.php
First of all, create an index.php file and update the below HTML code into index.php file.
<!DOCTYPE html>
<html>
<head>
<title>PHP Dropzone File Upload Example Tutorial</title>
<!-- Bootstrap Css -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<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>PHP Dropzone File Upload on Button Click Example</h2>
<form action="upload.php" enctype="multipart/form-data" class="dropzone" id="image-upload">
<div>
<h3>Upload Multiple Image By Click On Box</h3>
</div>
</form>
<button id="uploadFile">Upload Files</button>
</div>
</div>
</div>
<script type="text/javascript">
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone(".dropzone", {
autoProcessQueue: false,
maxFilesize: 1,
acceptedFiles: ".jpeg,.jpg,.png,.gif"
});
$('#uploadFile').click(function(){
myDropzone.processQueue();
});
</script>
</body>
</html>
This HTML code shows the image upload form, so using this form you can upload the images on the DB table and project folder.
Step 2 – Create upload.php
In this step, create a new file name upload.php file and update the below code into your upload.php file.
<?php
$uploadDir = 'uploads';
if (!empty($_FILES)) {
$tmpFile = $_FILES['file']['tmp_name'];
$filename = $uploadDir.'/'.time().'-'. $_FILES['file']['name'];
move_uploaded_file($tmpFile,$filename);
}
?>
This PHP code will upload file into project directory.
Step 3 – Create Directory
In this step, we need to create a directory into your project directory, which named uploads.
Conclusion
In this tutorial, you have learned how to upload files using dropzone js in PHP without refresh the whole web page.
Does Dropzone code work in Android and IOS? And is it really worth the extra thousands of lines of code? Thanks for your demo. It worked well on my Windows 11/Chrome browser.