PHP Upload file using Dropzone. Dropzone is light weight and easy to use library
let’s have create demo for file upload using dropzone.
Create file index.php
<!DOCTYPE html>
<html>
<head>
<title>PHP Dropzone File Upload Example Tutorial</title>
<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">
</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,
addRemoveLinks: true,
acceptedFiles: ".jpeg,.jpg,.png,.gif"
});
$('#uploadFile').click(function(){
myDropzone.processQueue();
});
</script>
</body>
</html>
autoProcessQueue you can set false or true, true means image upload instantly without click on submit button.
maxFilesize is set 1 which allow image to upload 1MB increase or descease as per your needs.
addRemoveLinks is set true or false based on needs. Remove appear on image when it true so when you will require to delete image from server set it true
acceptedFiles checks the file’s mime type or extension when you upload the file. We define .jpeg,.jpg,.png,.gif. You will change it based on your needs.
Now create File Upload Code for PHP to accept files and save to server
Read Also : PHP file upload in database with Error Handling
upload.php
<?php
$uploadDir = 'uploads';
if (!empty($_FILES)) {
$tmpFile = $_FILES['file']['tmp_name'];
$filename = $uploadDir.'/'.time().'-'. $_FILES['file']['name'];
move_uploaded_file($tmpFile,$filename);
}
?>