File select

From Wikipedia, the free encyclopedia

In HTML, a file select control is a component of a web form with which a user can select a file from his local machine. When the form is submitted (perhaps together with other form data) the file is uploaded to the web server. Here, when the file arrives, some action usually takes place such as saving the file on the web server. However, the particular action that takes place is determined by the server-side script to which the form is submitted.

[edit] Code example

Here is a code example of a web form with a file select control. It is the input element with type="file" that creates the file select control.

<form action="form-handler.php" method="post" enctype="multipart/form-data">
        <div>
                <input id="myfile" name="myfile" type="file">
                <input value="Upload ►" type="submit">
        </div>
</form>

[edit] Rendering

Firefox 2 screen shot on Windows XP showing the rendering of the previous example. The file select control is comprised by the text field together with the "Browse" button. The second button is a submit button

After clicking the "Browse" button the file dialog opens

After file selection the filename is displayed in the text field. The form is submitted by clicking the second button and the file will be uploaded.

When it comes to rendering on the screen of a file select control there is some variation among web browsers. Typically, on a windows-based platform user agents will render a file select control as a text field together with a "Browse" button. When the "Browse" button is pressed, a file dialog opens with which actual file selection on ones platform can take place. After doing this the filename of the selected file is displayed in the text field with its full path. Alternatively, instead of using the "Browse" button, the filename can be entered directly in the text field.

[edit] Functionality

The mechanism for form-based file upload was originally proposed in RFC 1867 (published November 1995) as an extension to HTML 2.0 (RFC 1866) after its publication. Form-based file upload was then incorporated in HTML 3.2 which explicitly refers to RFC 1867 for further reading on form-based file upload.

HTML 4.01 does not in itself describe how the file select control is supposed to work, but it does list RFC 2388 and RFC 1867 as informative references.^[1]

[edit] Multiple file selection

The intention in RFC 1867 is that a single file select control should allow selection of multiple files. This intention seems reflected in HTML 4.01 which for the file select control type states^[2]

This control type allows the user to select files so that their contents may be submitted with a form. The INPUT element is used to create a file select control.

It has been noted^[3] that the plural "files" in the above quote is an indication that a single file select control still, in HTML 4.01, was supposed to handle selection of multiple files and not just a single file.

[edit] Accept attribute

RFC 1867 also introduced the accept attribute for the input element. This would enable file type filtering based on MIME type for the file select control.

In addition, it is proposed that the INPUT tag have an ACCEPT attribute, which is a list of comma-separated media types.

If an ACCEPT attribute is present, the browser might constrain the file patterns prompted for to match those with the corresponding appropriate file extensions for the platform.

Thus, a user agent may in this example here restrict file selection to GIF and PNG images:

<input id="myfile" name="myfile" type="file" accept="image/gif,image/png">

On a Windows platform this might mean that the user agent is allowed to only shows files of the specified types in the browse file dialog.

[edit] Browser Limitations

Basic support for the file select control was adapted rather quickly by browser vendors. For example, already Internet Explorer 4^[4] and Netscape Navigator 2.0 recognized the input element of type="file" as a file select control.

However, most modern browsers still do not implement the file select control the way it was intended, or lack certain features^[3].

[edit] Cannot select multiple files

Generally, there is lacking support for form-based upload of multiple files with the use of a single file select control. One source states^[3] that Opera supports multiple file selection through a single file select control, but without mentioning which version of Opera this applies to.

[edit] JavaScript alternative

One such solution is to use client-side scripting such as JavaScript for generating an extra file select control for each time the user selects one file for upload. The extra file select controls may be set not to display using CSS. An example of this technique is demonstrated in the Multiple File Upload plugin for jQuery. In this manner the multiple file upload problem is solved by providing as many file select controls as the user has files to upload.

[edit] Accept attribute has no effect

Most, if not all, browsers do not make any use of the accept attribute^[3].

[edit] Alternative Technologies

The lacking support for multiple file selection has led developers to search for alternative solutions. These solutions have in common that they do not utilize the input type="file" element.

One solution is to use a Java Applet. An example of this is JUpload. It allows selection of multiple files within its file browser as well as offering a file type filter.

An example of a Flash based file upload utility is FancyUpload which is based on MooTools. It too allows selection of multiple files as well as offering a file type filter.

[edit] References

1. ^ HTML 4 Specification References
2. ^ Forms in HTML documents
3. ^ ^{a b c d} File input (or "upload") in HTML forms
4. ^ input type=file Object

[edit] External links

• Specification of the file select control from W3C