File select

In

<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>

When it comes to the 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 one's platform can take place. After selection, the filename of the selected file is displayed in the text field. Alternatively, instead of using the "Browse" button, the filename can be entered directly in the text field.

Some browsers, notably Firefox,^[1] no longer allow a filename to be typed directly in. This is a security measure - it is possible to trick the user into uploading confidential information.^[2]

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 then was incorporated in HTML 3.2, which explicitly refers to RFC 1867 for further information 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 references.^[3]

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^[4]

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^[5] that the plural "files" in the above quote is an indication that, in HTML 4.01, a single-file select-control still was supposed to handle selection of multiple files and not just a single file.

This situation is being clarified in HTML5 by adding a "multiple" attribute when the file input should accept multiple files. The current draft specifies the new behavior to be:

Unless the multiple attribute is set, there must be no more than one file in the list of selected files.^[6]

Accept attribute

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

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 restrict file selection, as, for example, in the following, restricted to GIF and PNG images or any images:

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

On a Windows platform, this might mean that the user agent would show files only of the types specified in the browse-file dialog.

Browser limitations

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

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

Cannot select multiple files

Form-based upload of multiple files with a single file-select control is supported in current versions of Chrome, Firefox, Internet Explorer, Safari and Opera. One source states

HTML5 allows multiple file uploads using the multiple attribute on input elements.[11]

JavaScript alternative

One solution is to use

External links

• Specification of the file select control from W3C
• File Upload with error handling