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 - Dropzone


Contents

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

1. Download and Include

  • Download dropzone.js library from here.
  • Include dropzone.css and dropzone.js with jQuery library at the <head> section.
<link href='dropzone.css' type='text/css' rel='stylesheet'>

<!-- Script -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></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="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></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

Drag and drop the file to upload section.


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.

Related Post

Spread the love

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *