HyperText Markup Language is the predominant markup language for web pages. HTML elements are the basic building-blocks of webpages....
, a file-select control is a component of a web form
Form (web)
A webform on a web page allows a user to enter data that is sent to a server for processing. Webforms resemble paper or database forms because internet users fill out the forms using checkboxes, radio buttons, or text fields...
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
Web server
Web server can refer to either the hardware or the software that helps to deliver content that can be accessed through the Internet....
. There, 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
Server-side scripting
Server-side scripting is a web server technology in which a user's request is verified by running a script directly on the web server to generate dynamic web pages. It is usually used to provide interactive web sites that interface to databases or other data stores. This is different from...
to which the form is submitted.
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.
Rendering
When it comes to the rendering on the screen of a file-select control, there is some variation among web browser
Web browser
A web browser is a software application for retrieving, presenting, and traversing information resources on the World Wide Web. An information resource is identified by a Uniform Resource Identifier and may be a web page, image, video, or other piece of content...
s. 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
File dialog
In computing, a file dialog is a dialog box that allows users to choose a file from the file system...
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, with its full path. Alternatively, instead of using the "Browse" button, the filename can be entered directly in the text field.
Some browsers, notably Firefox, 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.
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.
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
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 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.
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 restrict file selection, as, for example, in the following, restricted to GIF and PNG images:
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
Internet Explorer
Windows Internet Explorer is a series of graphical web browsers developed by Microsoft and included as part of the Microsoft Windows line of operating systems, starting in 1995. It was first released as part of the add-on package Plus! for Windows 95 that year...
Netscape Navigator was a proprietary web browser that was popular in the 1990s. It was the flagship product of the Netscape Communications Corporation and the dominant web browser in terms of usage share, although by 2002 its usage had almost disappeared...
Opera is a web browser and Internet suite developed by Opera Software with over 200 million users worldwide. The browser handles common Internet-related tasks such as displaying web sites, sending and receiving e-mail messages, managing contacts, chatting on IRC, downloading files via BitTorrent,...
3.5 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.
Cannot select multiple files
Form-based upload of multiple files with a single file-select control is supported in current versions of Firefox, Safari, Opera, and Chrome, but not Internet Explorer. One source states that Opera supports multiple-file selection through a single file-select control. This was true for Opera versions starting from 3.5, in which the file-upload feature was introduced. However, with the first beta release of Opera 7 line, this function was no longer available. Firefox version 3.6 started supporting multiple-file selection, allowing the developer some limited access to the files themselves prior to being uploaded to the server, via the HTML5 File API. This feature also allows users to drag-and-drop files from external applications (such as Windows Explorer
Windows Explorer
This article is about the Windows file system browser. For the similarly named web browser, see Internet ExplorerWindows Explorer is a file manager application that is included with releases of the Microsoft Windows operating system from Windows 95 onwards. It provides a graphical user interface...
) directly into the web application. One notable example of support for this feature is Gmail
Gmail
Gmail is a free, advertising-supported email service provided by Google. Users may access Gmail as secure webmail, as well via POP3 or IMAP protocols. Gmail was launched as an invitation-only beta release on April 1, 2004 and it became available to the general public on February 7, 2007, though...
Client-side scripting generally refers to the class of computer programs on the web that are executed client-side, by the user's web browser, instead of server-side...
JavaScript is a prototype-based scripting language that is dynamic, weakly typed and has first-class functions. It is a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles....
for generating an extra file-select control for each file the user selects for upload. Using CSS
Cascading Style Sheets
Cascading Style Sheets is a style sheet language used to describe the presentation semantics of a document written in a markup language...
, these extra file-select controls may be set not to display. An example of this technique is demonstrated in the Multiple File Upload plugin for jQuery
JQuery
jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML. It was released in January 2006 at BarCamp NYC by John Resig...
. In this manner, the multiple-file upload problem is solved by providing as many file-select controls as the user has files to upload. Still, this does not solve the problem of selecting multiple files for upload in Internet Explorer.
Accept attribute has no effect
Most browsers make no use of the accept attribute, currently Opera and Chrome seem to be the only browsers supporting a file type filter defined this way.
Alternative technologies
The lack of support for multiple-file selection has led developers to search for alternative solutions. These solutions have in common that they do not use the input type="file" element.
A Java applet is an applet delivered to users in the form of Java bytecode. Java applets can run in a Web browser using a Java Virtual Machine , or in Sun's AppletViewer, a stand-alone tool for testing applets...
. An example of this is JUpload. It allows selection of multiple files within its file browser as well as offering a file-type filter.
Adobe Flash is a multimedia platform used to add animation, video, and interactivity to web pages. Flash is frequently used for advertisements, games and flash animations for broadcast...
MooTools is a lightweight, object-oriented, web-application framework for JavaScript, written in JavaScript. It is released under the free, open-source MIT License...
jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML. It was released in January 2006 at BarCamp NYC by John Resig...
). Both allow selection of multiple files as well as offering a file-type filter.
Several implementations of Flash-based file-upload utilities stopped working for users as they upgraded to Adobe Flash Player 10 released October 2008.
When it comes to the rendering on the screen of a file-select control, there is some variation among web browser