Usage

The File Input allows the user to select one or many files from the user's file system and upload them to the application.

Anatomy

1. Button: The shape that encloses the icon and action. When selected, the user's default file explorer will open.

2. Icon: Gives more definition to the upload action. Can be used in place of the label due to lack of space or on mobile.

3. Label: A single action associated with the File Input, such as 'Browse' or 'Upload content.'

4. Input field: The input field contains placeholder text that 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.

   The entire component is clickable and, when selected, the user's default file explorer will open.

For detailed documentation on our File Input anatomy, view the design specs.

Types

Our File Input that allows the user to upload a single file through their file explorer or drag and drop.

Icon

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.

States

Normal

Normal state is how the File Input looks by default before any interaction or action is taken.

Hover

Hover state occurs when the user hovers over the File Input with their cursor.

Pressed

Pressed state occurs very briefly when the File Input is being activated by the user when pressing down on the mouse button.

Drag

Drag state occurs when the user drags the file over the File Input while pressing down on the mouse button before releasing.

Disabled

Disabled state occurs when the File Input action is not available to the user.

Disabled File Inputs should only be used when an action can be taken within the current UI to enable them. If no action can be taken to enable the File Input, then the File Input should be hidden instead of disabled.

Error

Error state occurs when the user takes an action that is not possible, such as moving on in the workflow without uploading a file, or attempts to upload a file that is not permitted, such as a file that is too large.

Responsive layout

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.

Behavior

Drag and drop

When using the drag and drop functionality of a 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.

Support for drag and drop in File Inputs is not yet available. You can track our progress here.

Best practices