file upload
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 👍 0All Replies (7)
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?
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
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.
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
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
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.
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
Interesting. Sorry I couldn't help that much though. Good luck!