How to upload multiple files with JavaScript File Upload control?

By default, the EJ2 Uploader component allows you to select and upload multiple files simultaneously. The selected files will be organized in a list for every file selection until you clear it by clicking the clear button that is shown in the footer. The following example explains you about the multiple file upload settings.

 [Index.html]

<div id='uploadfile'>
    <input type="file" id="fileupload" name="UploadFiles"/>
</div>
 

[Index.js]

// Initialize the uploader component
var uploadObj = new ej.inputs.Uploader({
    asyncSettings: {
        saveUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save',
        removeUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove'
    },
});
 
//Render initialized Uploader
uploadObj.appendTo('#fileupload');
 

You can add the multiple attributes to the original input element of a 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 a single file to upload, set the multiple property value to false. When selecting a new file to upload, the previously generated file list item will be removed by default.

You can remove the multiple attributes from the original input element of a file by enabling the single file upload property.

[Index.js]

// Initialize the uploader component
var uploadObj = new ej.inputs.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
uploadObj.appendTo('#fileupload');
 

Please find the sample from the following link with the provided details.

Sample Link: https://stackblitz.com/edit/w2jnr5?file=index.js

To learn more about the EJ2 Uploader component, refer to this UG, API documentation, and Demo sites.