The file input allows the user to select one or many files from the user's file system and upload to the application.
The single-file input consists of an action and input field.
- Icon (optional): Gives more definition to the upload action.
- Action: A single action associated with the file input, such as 'Browse' or 'Upload content.'
- Input field: A clickable container that brings up the file explorer.
- Input text: Placeholder text will instruct users to select file(s) or drop file(s) into the dropzone for upload. Once a file has been selected, the filename will appear.
For detailed documentation on our single-file input anatomy, view the ZUI single-file input design specs.
We have two types of file inputs that allow the user to upload the appropriate amount of files through their file explorer or drag and drop.
Allows the user to upload one file through their file explorer or by dropping the file in the dropzone.
Multiple-file input (WIP)
The behavior and location of the single-file input remain unchanged on mobile devices with viewports smaller than 720px. The action text can be omitted due to lack of space on mobile; in this case, the upload icon should be used to represent the action.
This icon can be found in the icon documentation under Standard system icons.
When the single-file input is used in a form, it should be grouped with related fields and include a label so users know what type of file is required.
For detailed documentation on our forms pattern, view the forms documentation.
An icon can be added to assist the user in quickly identifying the action needed to be taken. The icon or action text can be omitted due to a lack of space, such as on mobile or a form with a decreased width.
Drag and drop
When using the drag and drop functionality of a single-file input, the dropzone should be highlighted only when the user drags a file over the input. This will allow the user to differentiate between multiple inputs on a page and ensure that the correct file is being uploaded.
The action text can be edited to better apply to the content being uploaded or verbiage on the page.
The action text should not be overly specific or call out file details, such as a Word or Excel file type. Details, such as file type and size, should be called out in description text or a tooltip.