Articles in this section
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

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied