22

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

enter image description here

Which is the best way to do it?

Filburt
  • 17,626
  • 12
  • 64
  • 115
Gabriel Cerutti
  • 1,347
  • 1
  • 15
  • 17

5 Answers5

26

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:

enter image description here

Gabriel Cerutti
  • 1,347
  • 1
  • 15
  • 17
  • Nice solution. Any reason why you're using `(ext.indexOf("pdf") != -1)` instead of `(ext == "pdf")`? – Travis Aug 06 '15 at 17:11
  • 2
    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! – Gabriel Cerutti Aug 07 '15 at 17:50
  • Are these icons free to use? What are the copyright restrictions? – markthewizard1234 Oct 05 '17 at 11:48
  • 3
    If you already included FontAwesome on your website, you can use `$(file.previewElement).find(".dz-image img").replaceWith('');` and others. – Petr Nagy Jun 11 '19 at 04:02
21

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.

Community
  • 1
  • 1
Travis
  • 12,001
  • 8
  • 39
  • 52
  • I prefer this solution because of checking mime type, not file extension which can be simply invalid. – instead Feb 11 '17 at 17:53
  • 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. – Logic1 Dec 03 '18 at 02:46
2

Use this:

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

or

myDropzone.emit("thumbnail", file, "/WebResources/cre_pdf_icon");
jkdev
  • 11,360
  • 15
  • 54
  • 77
mkk
  • 21
  • 1
2

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");
                    }
                });
            }
        };
Liknes
  • 195
  • 14
1

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();
    }
};
Faruk UNAL
  • 114
  • 5