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.