How to change thumbnail for non-image file in Dropzone

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.

How to change thumbnail for non-image file in Dropzone


Contents

  1. Download and Include
  2. HTML
  3. CSS
  4. PHP
  5. Script
  6. Demo
  7. Conclusion

1. Download and Include

  • Download the latest version of the dropzone.js library from here.
  • Include dropzone.css and dropzone.js with 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

View 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.

Leave a Comment