How to upload multiples files using file uploader in TypeScript?
By default, the EJ2 Uploader component allows you to select and upload multiple files simultaneously. The selected files are organized in a list for every file selection until you clear it by clicking the clear button that is shown in footer. The following example explains about multiple file upload settings.
[Index.html]
<div id='uploadfile'> <input type="file" id="fileupload" name="UploadFiles" /> </div>
[Index.ts]
import { Uploader } from '@syncfusion/ej2-inputs';
//Initialize Uploader component
let uploadObject: Uploader = new Uploader({
asyncSettings: {
saveUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save',
removeUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove'
}
});
//Render initialized Uploader
uploadObject.appendTo('#fileupload');
You can add the multiple attributes to original input element of file by enabling the multiple file selection.
[Index.html]
<input type="file" id="fileupload" name="UploadFiles" multiple />
Single file upload
If you want to select the single file to upload, set the multiple property value to false. While selecting a new file to upload, previously generated file list item will be removed.
You can remove the multiple attributes from the original input element of file by enabling the single file upload property.
[Index.ts]
import { Uploader } from '@syncfusion/ej2-inputs';
//Initialize Uploader component
let uploadObject: Uploader = new Uploader({
asyncSettings: {
saveUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save',
removeUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove'
},
multiple: false
});
//Render initialized Uploader
uploadObject.appendTo('#fileupload');
Please find the sample from the following link with the provided details.
Sample Link: https://stackblitz.com/edit/p1uwvf-vhps4b?file=index.ts
To learn more about EJ2 Uploader component, refer to this UG, API documentation, and Demo sites.
