Uploading a single file

[Iyodo Edward Achor]

Hello, please how do i restrict the file uploader to allow only a single file?

[Sevvandhi Nagulan]

Hi Iyodo, 

Greetings from Syncfusion support. 

You can select and upload a single file by disabling the multiple file selection property. Please refer the below code and UG documentation, 

<ejs-uploader id="uploadFiles" asyncSettings="@asyncSettings" multiple="false" autoUpload="false"></ejs-uploader> 

UG link: https://ej2.syncfusion.com/aspnetcore/documentation/uploader/async/#single-file-upload 

Please check the above link and get back to us if you need further assistance. 

Regards, 

Sevvandhi N 

[Dan Clarke]

Thanks @Sevvandhi - this helped me too. As a bit of feedback on the documentation - putting this in the "Async" section is a bit strange. I'm doing the same in Angular, and couldn't find how to do a single file in the documentation - it never occurred to me to look in the "Async" section - a term which has nothing to do with single vs multiple file uploads.

[UdhayaKumar Duraisamy]

The uploader component allows you to upload the files asynchronously. The upload process requires saving and removing action URLs to manage the upload process on the server. You can refer to the below documentation for more information about the “Async in Angular Uploader component”.

https://ej2.syncfusion.com/angular/documentation/uploader/async

You can use the multiple property to upload a sing file uploading. The multiple property Specifies a Boolean value that indicates whether the multiple files can be browsed or dropped simultaneously in the uploader component. Please refer to the below-shared sample and documentation for more information.

[app.component.html]

  <ejs-uploader

    #defaultupload

    id="defaultfileupload"

    [asyncSettings]="path"

    multiple="false"

    [dropArea]="dropElement"

    (removing)="onFileRemove($event)"

  ></ejs-uploader>

[app.component.ts]

 public path: Object = {

    saveUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Save',

    removeUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Remove',

  };

[Output]

 

Documentation: https://ej2.syncfusion.com/angular/documentation/api/uploader/#multiple

Sample: https://stackblitz.com/edit/angular-ewvfye?file=src%2Fapp.component.html,src%2Fapp.component.ts