Adding value changing functionality to the HTML file input element
As a means to circumvent security issues, the HTML file input element doesn't allow developers to change the value of the element using normal scripting methods. However, the file input is a valuable commodity that can add value to intranet applications. And when you can't control the value of this element, it ties your hands when it comes to implementing quick and easy solutions.
In this article, I provide simple code that will give you this functionality, and discuss why you can benefit from it. (Note: I created this sample with Visual Basic 6.0 and tested it in Internet Explorer 6.0.)
If you work with .NET, then you're probably aware of the virtues of the HttpPostedFile class. It provides you with the binary data that composes the posted file, and it gives you valuable information concerning the file such as the ContentType (the MIME type) and the posted file's FileName. The SaveAs() method encapsulates the code needed to convert the data to a file. All of this information can come in quite handy when you reference the document for retrieval. It's easy to set the Content-type header and the file name if you store this information someplace where you can reference it again such as a database. The best benefit you achieve is the time savings you get developing this solution on the server side.
Now, if all you need to do is implement a basic browse and pick solution for adding files, then there's no need to add functionality to the file input element. However, if you want to provide both a browse button and another function, such as an image scanning solution, you need to be able to set the value of the file input element to the name of the temporary file of the scanned image. In this case, if you're using Internet Explorer, you're probably hosting an ActiveX or Web Form control to provide the scanning functionality. You can exploit this control to set the value of the file input element.
The security of the file input element is set in the control, so providing a secure method for setting the value isn't available. However, with Visual Basic 6.0, you can use the SendKeys() function to "type" in the value. (I chose VB because I'm familiar with the language, and the VB runtime exists on most Windows 2000 and Windows XP computers. To use .NET technologies, you must install the .NET Framework on the client computer.)
In VB, you can create a public function that you would pass the ID of the file input element and the name of the file:
Public Function SetInputValue(id As String, newValue As String) As String
On Error Resume Next
Dim doc As MSHTML.HTMLDocument
Dim inp As MSHTML.HTMLInputFileElement
Set doc = UserControl.Parent
Set inp = doc.All.Item(id)
inp.focus
SendKeys newValue, False
SetInputValue = inp.Value
Set inp = Nothing
Set doc = Nothing
End Function
This very simple approach sets the focus on the HTML control and executes the key sequence. You do need to add a reference to the Microsoft HTML Object Library in your project.
In order to run this sample, your control must be allowed to execute within the browser. You can also choose to implement the IObjectSafety interface and/or use a digitally signed installation package.
You can test the code with this HTML:
<html>
<head>
<script language="JavaScript">
function btn_onclick() {
FileInput1.SetInputValue("file1",
"c:\\test.txt");
}
</script>
</head>
<body>
<input type="file" id="file1">
<OBJECT id=FileInput1 classid="clsid:759F074C-8D49
VIEWASTEXT>
<span style="color:red">ActiveX control could not load. Check your security
settings.</span>
</OBJECT>
<button id="btn1" onclick="btn_onclick()">Click
Me</button>
</body>
</html>