Getting started with ASP.NET Core Uploader control

30 Jul 2021 / 3 minutes to read

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

Starting with v16.2.0.x, if you reference Syncfusion assemblies from trial setup or from the NuGet feed, you also have to include the license key in your projects. Please refer to this link to know about registering Syncfusion license key in your ASP.NET Core application to use our controls.

Initialize Uploader control to the Application

Uploader control can be rendered by using the ejs-uploader tag helper in ASP.NET Core application. Add the below simple code to your index.cshtml page which is available within the Views/Home folder, to initialize the Uploader.

The following example shows a basic Uploader control.

From v16.2.41 version, the Essential JS2 AJAX library has been integrated for uploader server requests. Hence, use the third party promise library like blue-bird to use the uploader in Internet Explorer.

tagHelper

getting-started.cs

<ejs-uploader id="uploadFiles" autoUpload="false"></ejs-uploader>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers.TextBoxes
{
    public class UploaderController : Controller
    {
        public ActionResult DefaultFunctionalities()
        {
            return View();
        }
    }
}

Running the above code will display the basic Uploader on the browser.

Output be like the below.

uploader

Adding drop area

By default, the uploader control 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.

In the following sample, drop target is configured.

tagHelper

drop-area.cs

<div id='droparea'>Drop files here to upload</div>

<ejs-uploader id="uploadFiles" dropArea="#droparea" autoUpload="false"></ejs-uploader>

<style>
    .fileupload {
        margin: 20px auto;
        width: 400px;
    }

    #droparea {
        padding: 50px 25px;
        margin: 30px auto;
        border: 1px solid #c3c3c3;
        text-align: center;
        width: 20%;
        display: inline-flex;
    }

    .e-file-select,
    .e-file-drop {
        display: none;
    }

    body .e-upload-drag-hover {
        outline: 2px dashed brown;
    }

    #uploadfile {
        width: 60%;
        display: inline-flex;
        margin-left: 5%;
    }
</style>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers.TextBoxes
{
    public partial class UploaderController : Controller
    {
        public ActionResult DefaultFunctionalities()
        {
            return View();
        }
    }
}

Configure asynchronous settings

The uploader control 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.

tagHelper

async-settings.cs

@{
    var asyncSettings = new Syncfusion.EJ2.Inputs.UploaderAsyncSettings { SaveUrl = "https://ej2.syncfusion.com/services/api/uploadbox/Save", RemoveUrl = "https://ej2.syncfusion.com/services/api/uploadbox/Remove" };
}

<ejs-uploader id="uploadFiles" asyncSettings="@asyncSettings" autoUpload="false"></ejs-uploader>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers.TextBoxes
{
    public class UploaderController : Controller
    {
        public ActionResult DefaultFunctionalities()
        {
            return View();
        }
    }
}

Handle success and failed upload

You can handle the success and failure actions using the success and failure events. To handle these events, define the function and assign it to the corresponding event as follows.

tagHelper

success_failed.cs

@{
    var asyncSettings = new Syncfusion.EJ2.Inputs.UploaderAsyncSettings { SaveUrl = "https://ej2.syncfusion.com/services/api/uploadbox/Save", RemoveUrl = "https://ej2.syncfusion.com/services/api/uploadbox/Remove" };
}
<ejs-uploader id="uploadFiles" asyncSettings="@asyncSettings" success="onUploadSuccess" failure="onUploadFailure" autoUpload="false"></ejs-uploader>
<script>
    function onUploadSuccess(args) {
        if (args.operation === 'upload') {
            console.log('success');
        }
    }
    function onUploadFailure(args) {
        console.log('failed');
    }
</script>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers.TextBoxes
{
    public class UploaderController : Controller
    {
        public ActionResult DefaultFunctionalities()
        {
            return View();
        }
    }
}

Output be like the below.

uploader

You can also explore ASP.NET Core File Upload feature tour page for its groundbreaking features. You can also explore our ASP.NET Core File Upload example to understand how to browse the files which you want to upload to the server.

Getting started with ASP.NET Core Uploader control

Initialize Uploader control to the Application

Adding drop area

Configure asynchronous settings

Handle success and failed upload

See Also