The file Type

Live Demo

Firefox	Safari	Safari	Chrome	Opera	IE	Android

The Low Down

The file input type is used to identify resource(s) in the file structure, upload a file, or create a resource to upload.

• The file input element provides a GUI to select a file, and then represents a list of files that are selected with the option to change resource(s) until form submission.
• The multiple attribute allows more than one resource to be selected. Some browsers will add an “s” to their no file is selected message if this attribute is present.
• The accept attribute provides a hint of what file types the server is able to accept. Adding capture on some devices will allow the user to capture a video, audio or image files with the devices camcorder, microphone and/or camera.
• Of the input types, the file input type varies the most between browser, and is not very stylable.
• Messages vary: Firefox and IE both use “browse”, while Safari, Chrome and Opera employ “Choose File”, or “Choose Files” if the multiple attribute is present.
• Firefox, Safari, Chrome and Opera indicate the name of the file next to the button if only one file was selected, with Safari including an icon indicating file type.
• If more than one file was selected in the case of multiple, “X files” is listed, with X being the number of files selected.
• IE shows the file name including the full path to that file. In case of multiple files, it presents all files in a scrollable text input.