How do I use a custom thumbnail for non-image files in ngx-dropzone? Angular10+

So far I found one answer for JS Dropzone (older version). Nothing on Angular (ngx-dropzone). Basically, I’m looking to add a MS Excel icon, MS Word icon, and PDF icon to the script so that when someone adds one of those filetypes it generates that thumbnail in the preview. It works for images out of the box.

I inspected the code rendered and there are no indications or attributes of filetype other than the name of the file itself having a filetype associated with it (document.pdf or document.xlsx). Perhaps this can be done? How can I extract the filetype from the file being added and then according to that filetype, add an icon for it to the preview placeholder?

I imagine this is where it would go?

onSelect(event) {
   this.files.push(...event.addedFiles);
}

I added a StackBlitz here for a playground. Thanks in advance

79 thoughts on “How do I use a custom thumbnail for non-image files in ngx-dropzone? Angular10+”

Leave a Comment