locked
Use image button to trigger FileUpload RRS feed

  • Question

  • User1144600762 posted

    Hi,

    I am trying to use an image button click to trigger a file upload.  After clicking the image, the browse for a file popup opens but after clicking open on a file and stopping the program in debugger, context.Request.Files in the file handler contains 0 files. 

    The functionality works with out setting the style of the input to style="display: none" and using the standard browser button,  but I want the user to use an image to click on rather than the standard browser button that is with the input type file element. 

    Using Browser: IE11

    Below is the code.  Can someone suggest how to accomplish this?  thanks very much

    <asp:ImageButton ID="imgFiles" runat="server" ImageUrl="myImageButtonLocation"  />
    <input id="fileupload" type="file" name="files[]" data-url="myHandler.ashx" multiple style="display: none;">
    
    //below code is located in the document.ready function//
    
    $('[id$=imgFiles]').click(function () {
            $('#fileupload').click();
    
    });

    Wednesday, October 12, 2016 6:03 PM

Answers

  • User1435244517 posted

    In trying to replicate your scenario I created a jsFiddle.

    https://jsfiddle.net/adam_jd/tjugqqv4/

    Your code works. But if I introduce the assumption that there is another element on the page with an id of fileupload .. then it will break.

    <!-- If you have another element on the page with the same id, then it will no work -->
    <input id="fileupload" type="text" name="files[]" data-url="myHandler.ashx" multiple style="display: none;">

    <input type="image" style="border-width: 0px;" alt="Enable Rule Toggle" src="https://lh6.ggpht.com/gL8cI18HRjHWvHMjJ28fPKbkruqKfehiBbUtpQEPnH0zL2ZzkOfa8z3G6wvETT7dTjFx=w300" id="ctl00_ContentPlaceHolderPage_name_ctrl0_EnabledToggle" name="ctl00$ContentPlaceHolderPage$name$ctrl0$EnabledToggle">

    <input id="fileupload" type="file" name="files[]" data-url="myHandler.ashx" multiple style="display: none;">

    If there are two elements (and the first is not a file input) then:

    $('#fileupload').click();

    will not work.

    This is the only way I could replicate your scenario. 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, October 13, 2016 12:53 AM

All replies

  • User-691209617 posted

    Hi,

    Try this

    $('#' + '<% = imgFiles.ClientID %>').click(function () {
            $('#fileupload').click();
    
    });
    Wednesday, October 12, 2016 9:01 PM
  • User1144600762 posted

    I tried this suggestion but it does not overcome the issue.  Thanks for your help.

    Wednesday, October 12, 2016 11:09 PM
  • User1435244517 posted

    In trying to replicate your scenario I created a jsFiddle.

    https://jsfiddle.net/adam_jd/tjugqqv4/

    Your code works. But if I introduce the assumption that there is another element on the page with an id of fileupload .. then it will break.

    <!-- If you have another element on the page with the same id, then it will no work -->
    <input id="fileupload" type="text" name="files[]" data-url="myHandler.ashx" multiple style="display: none;">

    <input type="image" style="border-width: 0px;" alt="Enable Rule Toggle" src="https://lh6.ggpht.com/gL8cI18HRjHWvHMjJ28fPKbkruqKfehiBbUtpQEPnH0zL2ZzkOfa8z3G6wvETT7dTjFx=w300" id="ctl00_ContentPlaceHolderPage_name_ctrl0_EnabledToggle" name="ctl00$ContentPlaceHolderPage$name$ctrl0$EnabledToggle">

    <input id="fileupload" type="file" name="files[]" data-url="myHandler.ashx" multiple style="display: none;">

    If there are two elements (and the first is not a file input) then:

    $('#fileupload').click();

    will not work.

    This is the only way I could replicate your scenario. 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, October 13, 2016 12:53 AM
  • User1144600762 posted

    Thanks, your analysis was correct.  I had another fileupload as well referenced by using the blueimp file uploader.   I've managed to successfully style the existing file input element using this link as a resource.  http://webmuch.com/how-to-customize-a-file-upload-button-using-css3-html5-and-javascript/

    Thanks again.

    Friday, October 14, 2016 12:36 AM