Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

file upload

more options

the following code works in IE but not in Firefox - unless I add the alert as in the code snippet below:


function triggerFileUpload() {
                document.getElementById("File1").click();
                alert(document.getElementById("File1").value);
}

Note: Firefox does open the dialog box, but access to the file selected is prevented. Why would the alert override the default Firefox behavior, which prevents access to the file selected, and can I get access to the file information without applying this hack?

Full code is below:


<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">
    <title></title>

        <script type="text/javascript">
            function triggerFileUpload() {
                document.getElementById("File1").click();
            }

            function setHiddenValue() {
                document.getElementById("Hidden1").value = document.getElementById("File1").value;
            }
    </script>

</head>


<body>


    <form id="form1" runat="server">
    <div>
              <input runat="server" id="Hidden1" type="hidden" />
          <input runat="server" id="File1" type="file" onchange="setHiddenValue()" style=" visibility:hidden;" />
          <br />
          <br />
          <asp:Button ID="Button1" OnClientClick="triggerFileUpload()" runat="server" Text="ASPNET Button" />
          <br />
          <br />
          <input id="Button2" type="button" onclick="triggerFileUpload()" value="HTML Button" />
          <br />
          <br />
          <asp:Button ID="Button3" runat="server" Text="Go CodeBehind To Get Input Value" 
                  onclick="Button3_Click" />
          <br />
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
          <br />
        <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
    </div>
    </form>

</body>

</html>

Modified by cor-el

Chosen solution

Hey Gord,

I couldn't reproduce that behavior. I created an example here: http://jsfiddle.net/3wJSY/

It shows the alert and for whatever reason wants to open a popup. But no file dialog appears for me.

Read this answer in context 👍 0

All Replies (7)

more options

Unfortunately, Firefox doesn't support calling click() on file input elements. I am not sure if it is a security risk or if there is some other reason?

more options

Hi rrosario,

Yes I understand, but I am curious as to why simply placing an alert after the click() for the type="file" control, enables the file input functionality. (just what mechanism in the alert is causing the file input to be enabled, and can it be extracted/used to bypass the restriction)

cheers, Gord

more options

Chosen Solution

Hey Gord,

I couldn't reproduce that behavior. I created an example here: http://jsfiddle.net/3wJSY/

It shows the alert and for whatever reason wants to open a popup. But no file dialog appears for me.

more options

Hi rrosario

I am working in dot net and need to replace the fileupload control on some pages and thus the use of javascript. I have come across a promising example at

http://demos.telerik.com/aspnet-ajax/upload/examples/localization/defaultcs.aspx?RadUrid=20df88cb-83f2-4901-a62c-8283df33c882

which I am going to pursue.

I am still curious as to why simply placing an alert after the click() for the type="file" control, enables the file input functionality.

once again here is the code (dot net) which produced the behavior ( run it with the alert active, and the selected file is stored, comment out the alert and it is not stored - very curious)

Cheers Gord

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="2012May09_15_11.aspx.cs" Inherits="_2012May09_15_11" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script type="text/javascript">
        function triggerFileUpload() {
            document.getElementById("File1").click();
            alert("inside function triggerFileUpload()  ");
            //document.getElementById("TextBox1").focus();
            //document.getElementById("TextBox1").value = "test";
            document.getElementById("TextBox1").value = document.getElementById("File1").value;
        }


        function setHiddenValue() {
            document.getElementById("Hidden1").value = document.getElementById("File1").value;
            document.getElementById("TextBox1").value = document.getElementById("File1").value;
            //alert("inside function setHiddenValue() ");
        }
    </script>
</head>
<body>
    
    <form id="form1" runat="server">
        <div>
              <input runat="server" id="Hidden1" type="hidden" />
              <br />
              <input runat="server" id="File1" type="file" onchange="setHiddenValue()" style=" visibility:hidden;" />
              <br />
              <asp:Button ID="Button1" OnClientClick="triggerFileUpload()" runat="server" Text="ASPNET Button" />
              <br />
              <asp:TextBox ID="TextBox1" onChange="setHiddenValue()" runat="server" 
                  Width="305px"></asp:TextBox>
              <br />

        </div>
    </form>

</body>
</html>

Modified by cor-el

more options

It looks like they are doing some crazy trick where the file input is actually hidden behind all that other stuff. You can probably find whatever trick they are doing to do the click in their code.

Are you saying that adding an alert makes the file dialog open for you to select a file? I don't see that in my basic html example.

more options

actually the code:

<input type="file" id="file-btn">

var f = document.getElementById('file-btn'); f.click(); alert('hello world');

worked for me on jsfiddle (this is your code isn't it?) It loaded the control, but got caught in a loop with the alert.

Thanks for the feedback!

Gord

more options

Interesting. Sorry I couldn't help that much though. Good luck!