jim.shamlin.com

File

A file element enables the user to specify a file on their computer or network, generally with a goal of uploading it to the Web server.


Basics

Bare-bones code for a file input is:

<INPUT TYPE="file">

The way in which this will render in the browser is highly variable. Some will provide a button and a text field (which shows the local path to the file once it has been selected), others will provide only a button and render the file name, possibly the path, and possibly a thumbnail icon, beside the button once it has been selected. And the text that appears on the button may vary as well.


Usage

The file object enables the user to specify a file on their hard drive, which is uploaded to the server when the form is submitted.


Processing

Processing uploaded files is somewhat involved. The form must be given an ENCTYPE attribute of multipart/form-data to send the file to the server.

The server will receive a name=value pair that reflects the name of the file (as it was named on the user's computer) and the file content will be sent as an attachment that will need to be received and processed.

Going into detail on the "how to" aspect is beyond the scope of the present document. I may document it elsewhere in future.


HTML Attributes

The file element is relatively new and unusual, so the way it will render in Web browsers is a bit random. Typically, it includes a button that will launch the system dialog to locate a file. It may also show a text field that will contain the name of the file once found. There doesn't seem to be any generally accepted way of controlling the appearance (such as the width of the text field, if one is displayed, or the words that appear on the button).

That said, I've found a few things that seem to "work":


JavaScript

Properties

Methods

Event Handlers


Misc Notes

At the time of this writing, the file element is still a bit wonky. The basic functions (choose a file, pass it as form-data) is reliable, but any additional features or properties are still inconsistently supported.

The file element also depends on the "choose file" dialog on the user's system, over which the developer has no control or influence.

Unless a JavaScript hack is used, the file is not uploaded to the server until the form is submitted. A reliable hack does not exist, for security reasons.

Security settings on Web browsers may (and should) prevent such a hack from working, as a mischievous developer could force a person to upload a file unwittingly. Security settings also prevent (or should prevent) the file's content from being accessed by client-side script. The feral sort are constantly working out hacks to get around this, but the browser developers are usually close on their heels with a patch to re-prevent this.