如何为 ngx-dropzone 中的非图像文件使用自定义缩略图？ 角10+

Question

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 for a playground.

Answer 1

Try using this for getting file type,

onSelect(event) {
        console.log(event.addedFiles);
    let type:any = event.addedFiles[0].name.split('.');
    type = type[type.length - 1];
    console.log(type);
    
        this.files.push(...event.addedFiles);
    }