Getting Started

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 components.

Adding TagHelpers

Now open _viewImports.cshtml file from the views folder and add the following namespace for components references and Tag Helper support.

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, Syncfusion.EJ2.Uploader

Adding ScriptManager

Add ScriptManager to the bottom of the layout.cshtml page. The ScriptManager used to place our control initialization script in the page.

<ej-scripts> </ej-scripts>

Adding uploader component to the application

Now open your view page to render uploader component.

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

@section ControlsSection{

   <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 partial class UploaderController : Controller
    {
        public IActionResult DefaultFunctionalities()
        {
            return View();
        }
    }
}

Output be like the below.

uploader

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.

In the following sample, drop target is configured.

tagHelper

drop-area.cs

@{
    var dropAreaElem = document.getElementById('droparea');
}

@section ControlsSection{
    <div id='droparea'>Drop files here to upload</div>
    
    <ejs-uploader id="uploadFiles" dropArea ="@dropAreaElem" 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 partial class UploaderController : Controller
    {
        public IActionResult DefaultFunctionalities()
        {
            return View();
        }
    }
}

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.

tagHelper

async-settings.cs

@{
    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" };
}

@section ControlsSection{
   <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 partial class UploaderController : Controller
    {
        public IActionResult 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://aspnetmvc.syncfusion.com/services/api/uploadbox/Save", RemoveUrl = "https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove" };
}

@section ControlsSection{
   <ejs-uploader id="uploadFiles" asyncSettings="@asyncSettings" success="onUploadSuccess" failure="onUploadFailed" autoUpload="false"></ejs-uploader>
}

<script>
    function onUploadSuccess(args) {
        var _this = this;
        var spinnerElement = document.getElementById('dropArea');
        var li = document.getElementById('dropArea').querySelector('[data-file-name="' + args.file.name + '"]');
        if (!ej.base.isNullOrUndefined(li.querySelector('.progress-bar-container'))) {
            ej.base.detach(li.querySelector('.progress-bar-container'));
        }
        if (args.operation === 'upload') {
            li.querySelector('.file-name').classList.add('upload-success');
            li.querySelector('.close-icon-container').classList.add('delete-icon');
            (li.querySelector('.close-icon-container')).onclick = function () {
                generateSpinner(_this.uploadWrapper);
            };
            li.querySelector('.close-icon-container').onkeydown = function (e) {
                if (e.keyCode === 13) {
                    generateSpinner(e.target.closest('.e-upload'));
                }
            };
        }
        if (args.operation === 'remove') {
            this.fileList.splice(this.fileList.indexOf(li), 1);
            this.filesData.splice(this.fileList.indexOf(li), 1);
            ej.base.detach(li);
            ej.popups.hideSpinner(spinnerElement);
            ej.base.detach(spinnerElement.querySelector('.e-spinner-pane'));
        }
        ej.base.EventHandler.add(li.querySelector('.close-icon-container'), 'click', removeFiles, this);
    }
    function generateSpinner(targetElement) {
        ej.popups.createSpinner({ target: targetElement, width: '25px' });
        ej.popups.showSpinner(targetElement);
    }
    function onUploadFailed(args) {
        var li = document.getElementById('dropArea').querySelector('[data-file-name="' + args.file.name + '"]');
        ej.base.EventHandler.add(li.querySelector('.close-icon-container'), 'click', removeFiles, this);
        li.querySelector('.file-name ').classList.add('upload-fails');
        if (args.operation === 'upload') {
            ej.base.detach(li.querySelector('.progress-bar-container'));
        }
    }
</script>

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 IActionResult DefaultFunctionalities()
        {
            return View();
        }
    }
}

Output be like the below.

uploader

Getting Started

Adding TagHelpers

Adding ScriptManager

Adding uploader component to the application

Adding drop area

Configure asynchronous settings

Handle success and failed upload

See Also