Category / Section
How to open upload file dialog on clicking some other target other than browse button
4 mins read
Description:
You can open the file select dialog of Uploadbox programmatically by clicking some other target other than default browse button of Uploadbox
Solution:
To hide the browse button, you can set the width and height property of the upload control to “0px” instead of setting display attribute to none for the upload box div element which in turn prevent upload dialog from being displayed as the display none property hinders the upload dialog’s position calculation. You can open file dialog programmatically by triggering click on upload input manually as shown below
<div class="posupload"> <div id="UploadDefault"></div> </div> <button id="griddiv"> Right click here to open uploadbox's Fileselect </button>
$(function () { // declaration $("#UploadDefault").ejUploadbox({ saveUrl: "http://js.syncfusion.com/demos/ejServices/api/uploadbox/Save", removeUrl: "http://js.syncfusion.com/demos/ejServices/api/uploadbox/Remove", width: "0px", height: "0px" }); $("#griddiv").mousedown(function(e){ if( e.button == 2 ) { $("#UploadDefault").find(".e-uploadinput").trigger("click"); // trigger click on upload box input. return false; } return true; }); });
Sample: https://jsplayground.syncfusion.com/4wm5cjkc