When uploading the image with Dropzone then it will create a thumbnail of it for preview but it will show a blank thumbnail while uploading the non-image file like – text, word, pdf files.
This will be handled by using the dropzone option where check the image type and define the new default thumbnail image.
Contents
1. Download and Include
- Download the latest version of the dropzone.js library from here.
- Include
dropzone.cssanddropzone.jswith the jQuery library at the<head>section.
<link href='dropzone.css' type='text/css' rel='stylesheet'> <!-- Script --> <script src='dropzone.js' type='text/javascript'></script>
2. HTML
Create a <form class='dropzone' > and set its action='upload.php'.
Completed Code
<!doctype html>
<html>
<head>
<!-- CSS -->
<link href="style.css" rel="stylesheet" type="text/css">
<link href="dropzone.css" rel="stylesheet" type="text/css">
<!-- Script -->
<script src="dropzone.js" type="text/javascript"></script>
</head>
<body >
<div class="container" >
<div class='content'>
<form action="upload.php" class="dropzone" id="dropzonewidget">
</form>
</div>
</div>
</body>
</html>
3. CSS
Create new style.css file.
Completed Code
.container{
margin: 0 auto;
width: 50%;
}
.content{
padding: 5px;
margin: 0 auto;
}
.content span{
width: 250px;
}
.dz-message{
text-align: center;
font-size: 28px;
}
4. PHP
Create a upload.php file and a upload directory.
Upload the file in the upload directory.
Completed Code
<?php
$target_dir = "upload/"; // Upload directory
$target_file = $target_dir . basename($_FILES["file"]["name"]);
$msg = "";
if (move_uploaded_file($_FILES["file"]["tmp_name"], $target_dir.$_FILES['file']['name'])) {
$msg = "Successfully uploaded";
}else{
$msg = "Error while uploading";
}
echo $msg;
5. Script
I have uploaded the default image which uses for non-image files in upload/logo.png.
Created checkFileExt() function to get the file extension which I called when the file successfully uploaded and check the extension is of image type i.e. jpg, jpeg, png, or not.
If the file is not image type then set the default image path in newimage variable and pass in createThumbnailFromUrl() method.
Completed Code
Dropzone.options.myAwesomeDropzone = {
init: function() {
this.on("success", function(file) {
var ext = checkFileExt(file.name); // Get extension
var newimage = "";
// Check extension
if(ext != 'png' && ext != 'jpg' && ext != 'jpeg'){
newimage = "upload/logo.png"; // default image path
}
this.createThumbnailFromUrl(file, newimage);
});
}
};
// Get file extension
function checkFileExt(filename){
filename = filename.toLowerCase();
return filename.split('.').pop();
}
6. Demo
7. Conclusion
You can handle thumbnail images in Dropzone with init() function. Within this check the file extension and set your default image.
You can set the image for different types of files.
If you found this tutorial helpful then don't forget to share.