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":
- ACCEPT - Attempts to limit media types for file uploads.
- ACCESSKEY - A shortcut key to put focus on the element.
- DISABLED - Grays out the element and prevents the user from altering its value.
- TABINDEX - Specified as a number, this alters the default tabbing order of a form.
JavaScript
Properties
- accept - A comma-separated list of MIME tupes indicated by the ACCEPT attribute
- defaultValue - Indicates the default value, if specified.
Methods
- click() - Emulates a click on the button that activates the client's "choose file" dialog.
Event Handlers
- onchange - Takes effect when the value is changed (an file is selected)
- onclick - Takes effect when the element is clicked
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.