ngx dropzone - change accepted files format with a condition

MarcheM 0
Viewed 10

I'm trying to figure out if it is possible to narrow down the accepted files format in ngx-dropzone for some condition. For default I want ngx-dropzone to accept all types of files, but if user clicks an image button (which fires showFileSelector()) I want user to be able to select only image files. Is there any way I can achieve that? Passing a variable for accept attribute is not working. The dropzone itself (no accept attribute so by default accept all):

<div
  ngx-dropzone
  class="controls"
  [maxFileSize]="maxFileSize"
  #drop
  [disableClick]="true"
  (change)="receiveFileToSend($event)"
>

But when user clicks this image, I want him to be able only to choose image files:

<img
    class="mr-2 cursor-pointer"
    src="../../../assets/icons/addImage.svg"
    (click)="drop.showFileSelector()"
    alt=""
  />
format file types typescript angular
1 Answers

From the documentation (https://www.npmjs.com/package/ngx-dropzone) I can see that ngx-dropzone has an input property called accept that can be used to determine which file types are allowed. You can bind a variable to this accept property and set it dynamically to whatever file type you want to allow. E.g.:

HTML

...
   <ngx-dropzone (change)="onSelect($event)" [accept]="accept">
...

Typescript

accept = '*';
...
onImageClick() {
  this.accept = 'image/*';
}

Stackblitz of working application can be found here: https://stackblitz.com/edit/angular-ivy-xqzxec?file=src/app/app.component.ts

Fabian Strathaus0
Related