Components

File inputs

File inputs allow users to select files from their system for upload.

file input field

Using file inputs

Through file input fields users can input files, which are selected for upload.

File inputs feature an input field and a select button by default. But they also exist in button only and upload drop area types. Moreover they are part of some form or dialog where the upload itself follows as final step.

Designing

file inputs design properties

Label
File input labels communicate what input is requested in the input box. Labels are obligatory for file input fields.

Icon (optional)
Icon is optional in the input. Consider 'upload' icon as useful hint.

Placeholder text (optional)
Use Base30 for it.

Inline error messages and form validation (optional)
When possible, place messages inline with where the error occurred and explain to users what caused the error and, or how it can be fixed. Utilize appropriate colors for different message types (Green50 for successful or Red50 for erroneous). Inline messages should only be shown after a user has clicked into or interacted with the corresponding input.

Types

File input and button

See definition above.

File input with drop area

file input field with drop area

A user-friendly type of file inputs on pointer devices is featuring a drop area. It's normally signified by a dashed border which allows the user to drag and drop a file for selection.

File input select button only

file input select button only

In cases where screen space is very limited, a select button only input could be considered. Please note, that feedback on which file has been chosen by the user, needs to be provided in a different manner here.

Coding

See OOUI's demos section of file inputs.

Resources

Several Wikimedia projects provide file naming guidelines, that might be of interest for file input hints.
A selection: