ASP.NET Core Blazor [Preview]
Search results

Getting Started

This section briefly explains about how to include a simple Uploader in your ASP.NET Core Razor application. You can refer ASP.NET Core Razor Getting Started documentation page for introduction part of the system requirements and configure the common specifications.

Adding component package to the application

Open ~/_Imports.razor file and import the Syncfusion.EJ2.RazorComponents.Inputs packages.

@using Syncfusion.EJ2.RazorComponents
@using Syncfusion.EJ2.RazorComponents.Inputs

Adding uploader component to the application

Now, add the Syncfusion Essential JS 2 Uploader component in any web page razor in the Pages folder. For example, the Uploader component is added in the ~/Pages/Index.razor page.

<EjsUploader ID="UploadFiles"></EjsUploader>

Run the application

After successful compilation of your application, simply press F5 to run the application.

Output be like the below.

Uploader Sample

Adding drop area

By default, the uploader component allows to upload files by drag the files from file explorer, and drop into the drop area. You can configure any other external element as drop target using dropArea property.

<EjsUploader ID="UploadFiles" DropArea='.drop-area'></EjsUploader>

Configure asynchronous settings

The uploader component process the files to upload in Asynchronous mode by default. Define the properties saveUrl and removeUrl to handle the save and remove action as follows.

<EjsUploader ID="UploadFiles" DropArea='.drop-area'>
   <UploaderAsyncSettings SaveUrl="https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save"
   RemoveUrl="https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove"></UploaderAsyncSettings>
</EjsUploader>