File inputs
File inputs allow users to select files from their system for upload.
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
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 the user has clicked into or interacted with the corresponding input.
Types
File input and button
See definition above.
File input 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
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
Resources
Several Wikimedia projects provide file naming guidelines, that might be of interest for file input hints.
A selection: