You can upload a file programmatically using upload method. The selected files data, get from getFilesData public method in uploader.
The upload method behaves differently based on its arguments.
@{
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" };
}
<div class="col-lg-8 control-section">
<div class="control_wrapper">
<ejs-uploader id="UploadFiles" asyncSettings="@asyncSettings" autoUpload="false">
</ejs-uploader>
</div>
<span style=' padding-left: 40px; margin-top: 30px'>
<button id='first' class='e-btn e-control'>Upload 0th File</button>
</span>
<span style=' padding-left: 40px; margin-top: 30px'>
<button id='full' class='e-btn e-control'>Upload All Files</button>
</span>
</div>
<script>
window.onload = function () {
var uploadObj = document.getElementById("UploadFiles").ej2_instances[0];
document.getElementById('first').onclick = (args) => {
uploadObj.upload(uploadObj.getFilesData()[0]);
};
document.getElementById('full').onclick = (args) => {
uploadObj.upload(uploadObj.getFilesData());
};
}
</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 ActionResult DefaultFunctionalities()
{
return View();
}
}
}
.control_wrapper {
max-width: 500px;
margin: auto;
}
.e-upload {
width: 100%;
position: relative;
margin-top: 15px;
margin-bottom: 15px;
}
.e-upload-actions {
display: none;
}
.e-btn {
text-transform: none;
}
.control_wrapper .e-upload .e-upload-drag-hover {
margin: 0;
}