site logo

Form element - input type="file" and CSS

Form element input type="file" is used for uploading files to the server. In this article you can find examples of styling this element, utilisation of some attributes and operation in different browsers.

In mid-2013 were introduced new versions of browsers FireFox 22 and Opera 15. Both browsers for now render form element file according to Chrome standard. So IE is the last browser that displays and treats element file in 20 years old way.

A few examples of the appearance of element follow. In the first line of each example is the live element, its look is given by the used browser. Bellow are screenshots of the element from other browsers in the same style. Thus it is possible to compare the appearance of the element in different browsers. Finally code and commentary is published.

actual browser

Screenshots:

screenshot#1: form element file, default view in browsers

CSS: input {font: normal 13px Arial;}

HTML: <input type="file" name="f1" accept="image/*" multiple>

In the first example is default look of the file element used. Only the font property is set in CSS and that font is reflected in browsers Chrome, Safari and Opera, in IE and FireFox only the text is affected by font setting (but not the button). The text on the button can not be changed in any attribute. Some browsers set the text on button according to the attribute multiple.

Chrome, Safari, FireFox and Opera browsers render this element in an specific style. Button is located on the left, instead of the usual location on the right (elements select, number, date). Missing frame, and empty file name box causes the feeling that the element is not rendered completely. In case of white form background, only button is visible than.

Button and localized text is an unnecessary complication. All browsers (except IE) open the file selection widget when click anywhere on the element, not only the button. The simple element file might look like a normal textbox, completed with directory icon in the right of element.

actual browser

Screenshots:

screenshot#2: form element file, simple CSS view in different browsers

CSS: .f2 {width: 320px; height: 22px; margin: 0;}

HTML: <input type="file" name="f2" class="f2">

The second example shows the setting the width and height properties of the element. Chrome, Safari, FireFox and Opera apply different box model than IE. Dimensions are the same only because the border is not rendered. The width of the element in older FireFox could be set by the attribute size only.

Chrome, Safari, FireFox and Opera display only the name of the selected file. IE browser display the full, often very long file path (perhaps DOS relic). There is no benefit of full path for the average user. When multiple files are selected (using attribute multiple), Chrome, Safari, FireFox and Opera do not display file names, but the number of selected files, IE displays quite confusing list of files incl. the full path to each of them.

actual browser

Screenshots:

screenshot#3: form element file, tricky CSS view in different browsers

CSS: .f3 {width: 320px; height: 22px; margin: 0; border: 1px solid #777;
  float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}

input[type="file"].f3::-webkit-file-upload-button {
  float: right; position: relative; top: -1px; right: -1px;}

HTML: <input type="file" name="f3" class="f3" size="34">

The third example display the element type="file" similar to appearance in IE. In Chrome, Safari, FireFox and Opera border is added and browse button is moved to the right (poorly in FireFox). The result is shown in the screenshots. the code that

Code is based on the previous example of the sizing. The border is set by property border: 1px solid # 777. Thus entire element in Chrome, Safari, FireFox and Opera stay visible also on a white background of form. Since Webkit and Mozilla browsers calculate dimensions of this element according to W3C box model and IE by quirks model, property -webkit-box-sizing: border-box and -moz-box-sizing: border-box is set to unify box model. Empty space under the element in Chrome and Safari is removed by float: left property.

Selector -webkit-file-upload-button and float: right property causses the move of the Choose button in Chrome, Safari and Opera to the right side. Accurate position of button is tuned up so it lay in desired place. However, original button space is not released and the file name is not moved to the left. Sorry, this technique does not work in FireFox.

Width of the element in older FireFox is set by the attribute size="34". This way, around the same width of the element as in other browsers by using CSS property width: 320px is obtained.

The only way how to build up this element according to your wish is based on the following idea: set up the element input type="file" complete transparent, thus becomes invisible, but basic functionality is preserved (click opens the dialog box). Above the transparent file element, normal (visible) textbox is positioned. The file name in textbox is filled up by javascript. The solution is described in Quirksmode. A similar procedure can be found at Viget Labs.

Element file operating

To open file select dialog widget, click any place of element file, only in IE just the button have to be clicked. IE allow to walk through the path by using the arrow keys. To type or edit the file path by the keyboard do not allow any browser.

Chrome, FireFox and Opera browsers allow to select the file using the drag&drop. Open Windows Explorer or Total Commander and drag the file over an element file and release the mouse button. Multiple files can be dragged when multiple attribute is set. IE do not support such a method.

Sometimes arises a situation where you need to clear the content of the file element. Very simple practice works in Chrome: invoke file selection dialog, there click the cancel button. In IE, place the text cursor in file path text and press delete key. In other browsers reload the page (in Firefox with the shift key) to clear all form items. It is also possible to add the now almost forgotten the reset button.

Atributes of form element file


<form method="post" action="script.asp" enctype="multipart/form-data">
...
<input type="file" name="upFile" accept="image/*" multiple>
...
</form>

To use of an file element requires in the form opening tag attributes enctype="multipart/form-data" and method="post". Attribute multipart/form-data encode form data so that it can contain binary data of the file. The server have to first decode the form data. That is why get form data by Request.Form("name") method can not be used on server when file element is part of form.

Element file can contain an optional attribute accept, indicating acceptable file types specified by MIME. In the dialog box for selecting the file should appear only specified file types. Attribute accept does not work in IE and Safari, elsewhere only certain file types can be filtered.

Optional attribute multiple allows to select more files into a single file element. Files are selected at one step. In the file select dialog window select all desired files with help of ctrl, or shift keys. Then the number of selected files is displayed instead of file names. Attribute multiple works in all modern browsers except IE.

Attribute value is type of readonly. For safety reasons, it is not possible to set the path and file name and thus force the browser to submit any unwanted file. File selection must be done by the user action. When getting the value by JavaScript the following values are obtained: Chrome, Safari, Opera replace the real path with C:\fakepath\Image1.jpg , FireFox returns just the file name: Image1.jpg, IE returns the full file path and thus exposes subdirectory structure to the external environment.

updated 2013-07-18