Drag and Drop File Upload using DropzoneJS and PHP
Hi guys, in this post, we will be learning how to Drag and Drop File Upload using DropzoneJS and PHP.
To implement drag and drop file upload using Dropzone.js in PHP, follow these steps:
Step 1: Create a PHP file named gallery-upload.php and paste the below code:
include DropzoneJS CDN links ( css and js ) and Initialize Dropzone.js with the options to configure it in a script tag as given below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drag and drop file upload using Dropzone.js in PHP</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/dropzone.min.css" />
</head>
<body>
<form action="upload.php" class="dropzone" id="myAwesomeDropzone" enctype="multipart/form-data">
</form>
<br/>
<!-- To show thee success message -->
<h4 id="success_message"></h4>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/min/dropzone.min.js"></script>
<script>
Dropzone.options.myAwesomeDropzone = {
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 12, // MB
maxFiles: 10, // maximum 10 images
acceptedFiles: ".png,.jpg,.gif,.jpeg",
addRemoveLinks: false,
init: function() {
this.on("success", function(file, responseText) {
$('#success_message').text(response.success);
console.log(responseText);
});
this.on("error", function(file, responseText) {
alert(responseText);
this.removeFile(file);
console.log(responseText);
});
}
};
</script>
</body>
</html>
Step 2 : Create a PHP file named 'upload.php' to handle the file upload
<?php
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["file"]["name"]);
if (move_uploaded_file($_FILES["file"]["tmp_name"], $target_file)) {
echo "The file ". basename( $_FILES["file"]["name"]). " has been uploaded.";
} else {
echo "Sorry, there was an error uploading your file.";
}
?>
In the options, 'paramName' is the name of the file parameter that will be sent to the server, 'maxFilesize' is the maximum allowed file size in MB, and 'acceptedFiles' is a comma-separated list of file types that are accepted.
Step 3: Run your PHP script using a web server that supports PHP
That's all guys, you are ready to go for upload file via drag and drop using dropzone in laravel..