How to upload multiple files with ASP.NET Core File Upload component?

ASP.NET Core File Upload is a component for uploading one or multiple files, images, documents, audio, video, and other files to a server. It is an improved version of the HTML5 upload component with a rich set of features that include multiple file selection, progress bars, auto-uploading, drag and drop, folder (directory) uploading, file validation, and more.

When working with file uploads in an ASP.NET Core application, you can integrate Syncfusion’s File Upload component to handle multiple file uploads efficiently. This control is designed to enhance the user experience by supporting drag-and-drop functionality, file validation, and progress indicators.

Multiple File Upload Support:

By Default, the 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 clear button that is shown in footer. You can add the multiple attributes to original input element of file by enabling the multiple file selection. The following example explains about multiple file upload settings.

Features of Multiple File Upload

1. Simultaneous File Selection
   The uploader control is designed to facilitate the selection of multiple files at once. When files are selected, they are organized in a list, allowing users to review their selections before proceeding with the upload. This feature is particularly useful for applications that require users to submit multiple documents or images in a single action.

2. Clear Selection
   To maintain a clean and user-friendly interface, the uploader includes a “Clear” button located in the footer. This button allows users to easily remove all selected files from the list, providing a quick way to start over if needed.

3. Configuration for Multiple File Upload
   To enable multiple file selection in the uploader, developers can add the multiple attribute to the original input element. This configuration allows users to select more than one file at a time, making the upload process more efficient.

4. Example Implementation
   Below is an example of how to implement the Syncfusion Uploader with multiple file upload settings in a CSHTML file:

@{
   var asyncSettings = new Syncfusion.EJ2.Inputs.UploaderAsyncSettings { SaveUrl = "https://services.syncfusion.com/aspnet/production/api/FileUploader/Save", RemoveUrl = "https://services.syncfusion.com/aspnet/production/api/FileUploader/Remove" };
}
<ejs-uploader id="uploadFiles" asyncSettings="@asyncSettings" autoUpload="false"></ejs-uploader> 

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.

1. Configuring Single File Upload

To enable single file upload, the multiple property of the file input element must be set to false. This configuration ensures that when a user selects a new file to upload, any previously selected file will be removed from the list by default. This behavior is particularly useful in scenarios where only one file is required, such as profile picture uploads or document submissions.

2. Implementation Example

Here is an example of how to implement a single file upload using the Syncfusion Uploader component in an ASP.NET application:

@{
   var asyncSettings = new Syncfusion.EJ2.Inputs.UploaderAsyncSettings { SaveUrl = "https://services.syncfusion.com/aspnet/production/api/FileUploader/Save", RemoveUrl = "https://services.syncfusion.com/aspnet/production/api/FileUploader/Remove" };
}
<ejs-uploader id="uploadFiles" asyncSettings="@asyncSettings" multiple="false" autoUpload="false"></ejs-uploader> 

Conclusion

I hope you found it helpful to learn How to upload multiple files with ASP.NET Core File Upload component.

You can refer to our ASP.NET Core File Upload feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our ASP.NET Core File Upload example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!