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.
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 partypromise
library like blue-bird to use the uploader in Internet Explorer.
<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.
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.
<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();
}
}
}
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.
@{
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();
}
}
}
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.
@{
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.