You can trigger the click event of input file from external button using click
event of button. In the below sample, triggered click event of input file from Essential JavaScript 2 Button
.
@{
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">
<!-- Initialize Uploader -->
<div id="dropArea">
<span id="drop"> Drop image (JPG, PNG) files here or <button class='e-btn e-control' id="browse">Browse</button></span>
</div>
<ejs-uploader id="UploadFiles" dropArea="#drop" asyncSettings="@asyncSettings">
</ejs-uploader>
</div>
</div>
<script>
window.onload = function () {
document.getElementById('browse').onclick = () => {
document.getElementsByClassName('e-file-select-wrap')[0].querySelector('button').click();
};
}
</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;
}
#dropArea {
border: 1px dashed #c3c3cc;
text-align: center;
padding: 20px 0 10px;
}
.e-file-select-wrap {
display: none;
}
.control_wrapper .e-upload .e-upload-drag-hover {
margin: 0;
}