File select

Last updated

In HTML, a file-select control is a component of a web form with which a user can select a local file. When the form is submitted (perhaps together with other form data), the file is uploaded to the web server. 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 to which the form is submitted.

Contents

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.

<formaction="form-handler.php"method="post"enctype="multipart/form-data"><div><inputid="myfile"name="myfile"type="file"><inputvalue="Upload ►"type="submit"></div></form>

Rendering


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 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 or any images:

<inputid="myfile"name="myfile"type="file"accept="image/gif,image/png"><inputid="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 [5] 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. [8] However, with the first beta release of Opera 7, this function was no longer available. Firefox version 3.6 started supporting multiple-file selection, [9] allowing the developer some limited access to the files themselves prior to being uploaded to the server, via the HTML5 File API. [10] This feature also allows users to drag-and-drop files from external applications (such as Windows Explorer) directly into the web application. One notable example of support for this feature is Gmail allowing attachments to be added in this way.

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

JavaScript alternative

One solution is to use client-side scripting such as JavaScript for generating an extra file-select control for each file the user selects for upload. Using CSS, 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. 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 support

The accept attribute is currently supported by Opera 11+, Chrome 16+, Safari 6+, Firefox 9+ and Microsoft Internet Explorer 10+.

Related Research Articles

<span class="mw-page-title-main">Document Object Model</span> Convention for representing and interacting with objects in HTML, XHTML, and XML documents

The Document Object Model (DOM) is a cross-platform and language-independent interface that treats an HTML or XML document as a tree structure wherein each node is an object representing a part of the document. The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree; with them one can change the structure, style or content of a document. Nodes can have event handlers attached to them. Once an event is triggered, the event handlers get executed.

The File Transfer Protocol (FTP) is a standard communication protocol used for the transfer of computer files from a server to a client on a computer network. FTP is built on a client–server model architecture using separate control and data connections between the client and the server. FTP users may authenticate themselves with a plain-text sign-in protocol, normally in the form of a username and password, but can connect anonymously if the server is configured to allow it. For secure transmission that protects the username and password, and encrypts the content, FTP is often secured with SSL/TLS (FTPS) or replaced with SSH File Transfer Protocol (SFTP).

<span class="mw-page-title-main">Favicon</span> Icon associated with a particular web site

A favicon, also known as a shortcut icon, website icon, tab icon, URL icon, or bookmark icon, is a file containing one or more small icons associated with a particular website or web page. A web designer can create such an icon and upload it to a website by several means, and graphical web browsers will then make use of it. Browsers that provide favicon support typically display a page's favicon in the browser's address bar and next to the page's name in a list of bookmarks. Browsers that support a tabbed document interface typically show a page's favicon next to the page's title on the tab, and site-specific browsers use the favicon as a desktop icon.

A query string is a part of a uniform resource locator (URL) that assigns values to specified parameters. A query string commonly includes fields added to a base URL by a Web browser or other client application, for example as part of an HTML document, choosing the appearance of a page, or jumping to positions in multimedia content.

MHTML, an initialism of "MIME encapsulation of aggregate HTML documents", is a Web archive file format used to combine, in a single computer file, the HTML code and its companion resources that are represented by external hyperlinks in the web page's HTML code. The content of an MHTML file is encoded using the same techniques that were first developed for HTML email messages, using the MIME content type multipart/related. MHTML files use an .mhtml or .mht filename extension.

<span class="mw-page-title-main">Digest access authentication</span> Method of negotiating credentials between web server and browser

Digest access authentication is one of the agreed-upon methods a web server can use to negotiate credentials, such as username or password, with a user's web browser. This can be used to confirm the identity of a user before sending sensitive information, such as online banking transaction history. It applies a hash function to the username and password before sending them over the network. In contrast, basic access authentication uses the easily reversible Base64 encoding instead of hashing, making it non-secure unless used in conjunction with TLS.

Mozilla Firefox has features that allow it to be distinguished from other web browsers, such as Chrome and Internet Explorer.

Link prefetching allows web browsers to pre-load resources. This speeds up both the loading and rendering of web pages. Prefetching was first introduced in HTML5.

In computer hypertext, a URI fragment is a string of characters that refers to a resource that is subordinate to another, primary resource. The primary resource is identified by a Uniform Resource Identifier (URI), and the fragment identifier points to the subordinate resource.

A webform, web form or HTML form on a web page allows a user to enter data that is sent to a server for processing. Forms can resemble paper or database forms because web users fill out the forms using checkboxes, radio buttons, or text fields. For example, forms can be used to enter shipping or credit card data to order a product, or can be used to retrieve search results from a search engine.

<span class="mw-page-title-main">HTML5</span> Fifth and current version of hypertext markup language

HTML5 is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and final major HTML version that is a World Wide Web Consortium (W3C) recommendation. The current specification is known as the HTML Living Standard. It is maintained by the Web Hypertext Application Technology Working Group (WHATWG), a consortium of the major browser vendors.

<span class="mw-page-title-main">Web development tools</span> Software used to test the UI of a website or web application

Web development tools allow web developers to test and debug their source code. They are different from website builders and integrated development environments (IDEs) in that they do not assist in the direct creation of a webpage, rather they are tools used for testing the user interface of a website or web application.

<span class="mw-page-title-main">Web typography</span> Publishing considerations for the Web

Web typography, like typography generally, is the design of pages – their layout and typeface choices. Unlike traditional print-based typography, pages intended for display on the World Wide Web have additional technical challenges and – given its ability to change the presentation dynamically – additional opportunities. Early web page designs were very simple due to technology limitations; modern designs use Cascading Style Sheets (CSS), JavaScript and other techniques to deliver the typographer's and the client's vision.

Web storage, sometimes known as DOM storage, is a standard JavaScript API provided by web browsers. It enables websites to store persistent data on users' devices similar to cookies, but with much larger capacity and no information sent in HTTP headers. There are two main web storage types: local storage and session storage, behaving similarly to persistent cookies and session cookies respectively. Web Storage is standardized by the World Wide Web Consortium (W3C) and WHATWG, and is supported by all major browsers.

<span class="mw-page-title-main">WebGL</span> JavaScript bindings for OpenGL in web browsers

WebGL is a JavaScript API for rendering interactive 2D and 3D graphics within any compatible web browser without the use of plug-ins. WebGL is fully integrated with other web standards, allowing GPU-accelerated usage of physics, image processing, and effects in the HTML canvas. WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background.

The HTML5 specification introduced the video element for the purpose of playing videos, partially replacing the object element. HTML5 video is intended by its creators to become the new standard way to show video on the web, instead of the previous de facto standard of using the proprietary Adobe Flash plugin, though early adoption was hampered by lack of agreement as to which video coding formats and audio coding formats should be supported in web browsers. As of 2020, HTML5 video is the only widely supported video playback technology in modern browsers, with the Flash plugin being phased out.

WebRTC is a free and open-source project providing web browsers and mobile applications with real-time communication (RTC) via application programming interfaces (APIs). It allows audio and video communication to work inside web pages by allowing direct peer-to-peer communication, eliminating the need to install plugins or download native apps.

Content Security Policy (CSP) is a computer security standard introduced to prevent cross-site scripting (XSS), clickjacking and other code injection attacks resulting from execution of malicious content in the trusted web page context. It is a Candidate Recommendation of the W3C working group on Web Application Security, widely supported by modern web browsers. CSP provides a standard method for website owners to declare approved origins of content that browsers should be allowed to load on that website—covered types are JavaScript, CSS, HTML frames, web workers, fonts, images, embeddable objects such as Java applets, ActiveX, audio and video files, and other HTML5 features.

HTML5 Audio is a subject of the HTML5 specification, incorporating audio input, playback, and synthesis, as well as, in the browser. iOS

Upload components are software products that are designed to be embedded into a web site to add upload functionality to it. Upload components are designed to replace the standard HTML4 upload mechanism. Compared with HTML4, Upload Components have a more user-friendly interface and support a wider range of features.

References

  1. ↑ "388784 – (CVE-2007-3511) Firefox file input focus stealing vulnerability". Bugzilla.mozilla.org. Retrieved 2013-09-02.
  2. ↑ "Mozilla Firefox OnKeyDown Event File Upload Vulnerability". Juniper.net. 2010-11-15. Archived from the original on 2013-02-21. Retrieved 2013-09-02.
  3. ↑ "HTML 4 Specification References". W3.org. Retrieved 2013-09-02.
  4. ↑ "Forms in HTML documents". W3.org. Retrieved 2013-09-02.
  5. 1 2 3 "File input (or "upload") in HTML forms". Cs.tut.fi. Retrieved 2013-09-02.
  6. ↑ "HTML 5.1 specification". W3C.
  7. ↑ "input type=file Object". Msdn2.microsoft.com. 2013-07-22. Retrieved 2013-09-02.
  8. 1 2 "Browser History: Opera". Blooberry.com. Retrieved 2013-09-02.
  9. ↑ on December 10, 2009 by Paul Rouget (2009-12-10). "multiple file input in Firefox 3.6 ✩ Mozilla Hacks – the Web developer blog". Hacks.mozilla.org. Retrieved 2013-09-02.{{cite web}}: CS1 maint: numeric names: authors list (link)
  10. ↑ "Using files from web applications - MDC". Developer.mozilla.org. 2013-08-23. Retrieved 2013-09-02.
  11. ↑ HTML 5.1 specification: 4.10.5.3 Common input element attributes
This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.