Developer

Add value changing functionality to the HTML file input element

The HTML file input element is a valuable commodity that can add value to intranet applications. However, it doesn't allow you to change the value of the element. Phillip Perkins shows you a simple coding trick that allows you to get past this drawback.

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-40E0-B6FC-5AC1169BD29A"
 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>

Keep your developer skills sharp by automatically signing up for TechRepublic's free Web Development Zone newsletter, delivered each Tuesday.

Editor's Picks

Free Newsletters, In your Inbox