setting file restrictions in uploader

[Bob]

I have a file uploader:

<kendo-upload
   #templateUploader
   id="document"
   [multiple]="false"
   [saveUrl]="uploadSaveUrl"
   [removeUrl]="uploadRemoveUrl"
   [autoUpload]="false"
   [disabled]="!templateTypeSelected"
   [restrictions]="fileRestrictions"
   (remove)="removeEventHandler($event)"
   (success)="successEventHandler($event)"
   (upload)="uploadEventHandler($event)">
</kendo-upload>

And I need to dynamically change fileRestrictions.allowedExtensions when I select a different document type from a drop down list:

templateTypeSelectionChange(documentType: NcDocumentTypeDto) {
    this.templateTypeSelected = true;
    this.selectedNcDocumentCategory.documentTemplate.ncDocumentTypeId = documentType.id;
    this.fileRestrictions.allowedExtensions = documentType.extensions.split(',');
}

The string array is set correctly but the component is not updated with new file restrictions.  What is the problem?

 

[Dimiter Madjarov]

Hello Bob,


The reason for the issue in the current implementation is that the restrictions Input property instance is the same, so the component is not aware of the change. I would suggest to override the whole fileRestrictions object in order to trigger the Angular change detection life cycle. Here is the updated version of the example:

https://stackblitz.com/edit/angular-gpw3dy?file=app/upload.component.ts

Regards,
Dimiter Madjarov
Progress Telerik

[Viktor]

It doesn't even work in this stackblitz

UPDATE: sorry, I can't even imagine that restrictions implemented in a such way. I believe it must be the same as for simple input type file, so the user prevented from selecting wrong files

[Georgi]

Hi Viktor,

Thank you very much for the details provided.

I double-checked the initially provided StackBlitz demo and I can confirm that the suggested approach for dynamically changing the file restrictions is still valid. The issue with the demo is a discrepancy between the version of the Kendo themes and the Kendo packages. Here is an updated version:

https://stackblitz.com/edit/angular-tk7shn

With that being said, I would like to further clarify the role of the restrictions property, and more precisely the allowedExtensions option. Setting this option would allow the component to recognize the files with extensions, which are not included in the list, will not be upload them and will display them as invalid. For further reference, please check out the following article: 

https://www.telerik.com/kendo-angular-ui/components/uploads/upload/restrictions/#toc-file-extension

In case the requirement is to avoid displaying the element indicating that the file is not allowed for upload, I would suggest checking out the following example: 

https://stackblitz.com/edit/angular-ygluxs

I hope the provided information sheds some light on the matter. Please, let me know if I am missing out on something.

Regards,
Georgi
Progress Telerik

[Viktor]

Thank you for your reply, actually, it was my mistake because I missed the "accept" input in the docs

[Georgi]

Hi Viktor,

I am happy to hear that you have managed to identify the exact property that will help you achieve the desired functionality.

Please let me know if I can help you further with this case.

Regards,
Georgi
Progress Telerik