Question 86410 in ASP.NET Question posted in
The official documentation can be found here.

Clickable image to upload, when click FileUpload with Javascript not working correctly – Asp.net

I want to implement a clickable image which will prompt image upload, user upload image, then display the image. So I used an ImageButton which will call a invisible FileUpload(currently visible) for image upload. However, onchange() doesn’t seem to work, when I check, it seems to be the image is not uploaded to the FileUpload control.

So I tried debugging by making the FileUpload visible and click on the control directly click on the FileUpload control and select a photo, the image name is shown in the control. But when I use Javascript to click on FileUpload when ImageButton is clicked, and upload an image, the image name is not shown in the control, it remains ‘No file chosen’, meaning the image is not uploaded. Why is that?

Javascript code written on top of the page:

    function chooseFile() {
        $("#FileUpload1").click();
    }
    function fileChanged() {
        //do something
    }

ASP.NET code:

<asp:FileUpload ID="FileUpload1" runat="server" onchange="fileChanged()"/>
<asp:ImageButton ID="ImageButton1" runat="server" OnClientClick="chooseFile()" ImageUrl="images/placeholder.png" />

EDIT 1

Tried using ClientIdMode='static'

ASPX Code:

        function chooseFile() {
            $("#<%=FileUpload1.ClientID%>").click());
        }

Generated Code:

        function chooseFile() {
            $("#FileUpload1").click());
        }

Control code:

    <input type="file" name="FileUpload1" id="FileUpload1" onchange="fileChanged()" />
    <input type="image" name="ImageButton1" id="ImageButton1" src="images/placeholder.png" onclick="chooseFile();" />
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Okay, I realize that the file is empty because there is a postback happened right after the ImageButton is clicked, so even though it triggers the Javascript to click on the FileUpload and pops up file explorer for file selection, the connection between the file explorer and FileUpload is broken because of the postback.

    To avoid postback when ImageButton is clicked, I programmatically set OnClick attribute of the ImageButton in Page_Load() like this, it calls the chooseFile() Javascript function, and return a false which stops the program from having a postback. Once it the FileUpload detects a file has been uploaded by using onchange, it calls fileChanged() which replaces the image inside ImageButton

    ImageButton1.Attributes("OnClick") = "chooseFile();return false;"

    .aspx Code:

    function chooseFile() {
    document.getElementById("FileUpload1").click();
}

<asp:FileUpload ID="FileUpload1" runat="server" onchange="fileChanged()"/>
<asp:ImageButton ID="ImageButton1" runat="server" OnClientClick="chooseFile()" ImageUrl="images/placeholder.png" />

  2. 0

    using ClientIDMode static as below to keep same id when render server side control

    <asp:FileUpload ID="FileUpload1" ClientIDMode="static" runat="server"/>

    or acccess control in javascript using below

     function chooseFile() {
        $("#<%=FileUpload1.ClientID%>").click();
    }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search