How to set file restrictions on file browser for kendo upload

[n/a]

How can the file upload be configured so that the user does not have the option select files of a type that are not in the restrictions list.

[Dimiter Madjarov]

Hello John,


Preventing the user to select a specific type of file from his machine is not allowed by the browsers. We could apply the accept attribute

https://www.telerik.com/kendo-angular-ui/components/upload/api/UploadComponent/#toc-accept

to the <input type="file" /> element. However this only sets the default file type to be displayed in the file select window and again does not prevent the user from selecting any type of file.


In order to validate if the expected file type is selected, the following approach could be used:

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

Regards,
Dimiter Madjarov
Progress Telerik

[n/a]

Is there an example of this working for excel?

I have tried

<kendo-upload [saveUrl]="uploadSaveUrl"
              [removeUrl]="uploadRemoveUrl"
              (upload)="uploadEventHandler($event)"
              (remove)="removeEventHandler($event)"
              [restrictions]="myRestrictions"
              [accept]="acceptString">
</kendo-upload>

With

export class UploadComponent implements OnInit {
  @Input() application: Application;
  uploadSaveUrl = environment.serviceUrl + "api/UploadFiles/UploadFile"; // should represent an actual API endpoint
  uploadRemoveUrl = 'removeUrl'; // should represent an actual API
  userDataSubscription: Subscription;
  userData;
  acceptString: ".xls,.xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel";

[Dimiter Madjarov]

Hi John,


Here is an example of setting file restrictions and an accept attribute to the Upload component.

https://stackblitz.com/edit/angular-qff6mq?file=app%2Fupload.component.ts

Regards,
Dimiter Madjarov
Progress Telerik