Is there a way to use default Word or PDF images/icons as the thumbnail rather than generic greyed out background?

Question

I want to change the generic greyed out background for word/pdf files in dropzone file preview. This is the default view:

Which is the best way to do it?

Answer 1

This is the way I did it finally:

myAwesomeDropzone.on('addedfile', function(file) {

    var ext = file.name.split('.').pop();

    if (ext == "pdf") {
        $(file.previewElement).find(".dz-image img").attr("src", "/Content/Images/pdf.png");
    } else if (ext.indexOf("doc") != -1) {
        $(file.previewElement).find(".dz-image img").attr("src", "/Content/Images/word.png");
    } else if (ext.indexOf("xls") != -1) {
        $(file.previewElement).find(".dz-image img").attr("src", "/Content/Images/excel.png");
    }
});

The images must be 120x120 pixels to fit the default preview template.

This is the result:

Answer 2

I found a simple way to do this just now. Please note that I am using jQuery, so make sure to include that, too.

First of all, make sure your Dropzone has an id. Mine is myAwesomeDropzone:

<form id="myAwesomeDropzone" action="/upload-target" class="dropzone"></form>

Second, create image icons for each filetype you want to include. I found icons for PDF and Word and put them in a directory called img.

Then include the following JavaScript:

// Make sure to use YOUR Dropzone's ID below...
Dropzone.options.myAwesomeDropzone = {
  accept: function(file, done) {
    var thumbnail = $('.dropzone .dz-preview.dz-file-preview .dz-image:last');

    switch (file.type) {
      case 'application/pdf':
        thumbnail.css('background', 'url(img/pdf.png');
        break;
      case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
        thumbnail.css('background', 'url(img/doc.png');
        break;
    }

    done();
  },
};

The code above will work for PDF and Word. If you want to add more, just add more cases to the switch statement using this template:

case '[mime type]':
  thumbnail.css('background', 'url(img/[icon filename]');
  break;

Note that you can find the mime type by adding console.log(file.type); in the accept function, then drop a test file and check your browser's console.

Explanation

Dropzone allows you to configure a dropzone with a configuration object in the form of Dropzone.options.[your dropzone's id]. One of the options is an accept function that is fired before a file is accepted. You can use this function's first parameter to spy on the incoming file.

That parameter has properties such as type which can tell you the mime type. Once you know the mime type, you can change the element's background image using CSS. Our element will always be $('.dropzone .dz-preview.dz-file-preview .dz-image:last') since we always want to target the latest dropzone file. Just change the background-image to an appropriate icon. For example, any of these will work for PDF.