How to upload image files in Uploader component

This article explains how to upload image files only in the Syncfusion Uploader control in ASP.NET MVC application.

Getting started

To render the Syncfusion component, please follow the steps given in the getting started documentation.

The Uploader control will be rendered by using the “EJS().Uploader()” razor syntax as mentioned in the following code example.

@{
    var asyncSettings = new Syncfusion.EJ2.Inputs.UploaderAsyncSettings { SaveUrl = "https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save", RemoveUrl = "https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove" };
}
 
@Html.EJS().Uploader("UploadFiles").AutoUpload(false).AsyncSettings(asyncSettings).Render()

By default, the Uploader control allows you to select the all types of files. But, you can select a particular type of file using the AllowedExtensions property.

To select an image file only to upload, you need to provide the AllowedExtensions property value as “PNG, JPG, JPEG”. This will restrict the other type of files to be selected for upload.

@Html.EJS().Uploader("UploadFiles").AllowedExtensions(".jpg,.png,.jpeg").AsyncSettings(new Syncfusion.EJ2.Inputs.UploaderAsyncSettings { SaveUrl = "https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save", RemoveUrl = "https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove" }).AutoUpload(false).Render()

Please find the sample from the following link. https://www.syncfusion.com/downloads/support/directtrac/general/ze/Uploader_image_upload1349129482

To learn more about Uploader component, refer to this UG Documentation, API Reference, and Demo sites.