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?

Craner

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:

Craner

Nice solution. Any reason why you're using (ext.indexOf("pdf") != -1) instead of (ext == "pdf")? – Brigettebrigg

Not really, and makes no sense for .pdf actually!. I did it in that way for the other formats because a word document can be .doc/.docx and excel .xls/.xlsx/.xlsm. I've already edited the answer. Thanks! – Craner

Are these icons free to use? What are the copyright restrictions? – Chau

If you already included FontAwesome on your website, you can use $(file.previewElement).find(".dz-image img").replaceWith('<i class="fa fa-file-pdf-o"></i>'); and others. – Sullage

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.

Brigettebrigg

I prefer this solution because of checking mime type, not file extension which can be simply invalid. – Subvene

I like this approach. I noticed in edge cases adjacent thumbnails were being modified instead of the target. I found: var thumbnail = $(file.previewElement).find('.dz-image:last'); was the solution. – Meld

Answer 3

Use this:

this.emit("thumbnail", file, "/WebResources/cre_pdf_icon");

or

myDropzone.emit("thumbnail", file, "/WebResources/cre_pdf_icon");

Chobot

Answer 4

I ended up using a variation of the answer given by @Gabriel

Dropzone.options.myAwesomeDropzone= {
            init: function () {
                this.on("addedfile", function (data) {
                    console.log(data);

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

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

Jacquelinjacqueline

Answer 5

I think, it's important to resize thumbnail image, so you should add a line to resize.

Dropzone.options.myAwesomeDropzoneUpload = {
    accept: function(file, done) {

        switch (file.type) {
          case 'application/pdf':
              this.emit("thumbnail", file, "/static/img/pdf.png");            
              break;
          case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
              this.emit("thumbnail", file, "/static/img/word.png"); 
              break;
        }
        file.previewTemplate.querySelector(".dz-image img").style.width="120px";

        done();
    }
};

Crosspatch