FilePicker

This component it’s a trigger opening the native file uploader. This component uses default Web input type file check Mozilla Input Docs if you need to know more about the supported attributes and values

Appearance

  • File title: This provides a clear description of what the user should upload. If long, takes as many lines as needed extending the height of the component.
  • Button label: Describes the main action, it works better when short
  • It is recommended to place this component together with a helper text to provide additional help for what's expected. Helper text should only appear if the user open the file explorer and doesn't select anything.

Placement

  • They are mainly used in forms but can also appear in other places as a stand alone component, like item or user registration screens.
  • It should be placed with a minimum of 8px ("Spaces" value 1 for our default spaces values) margin on each side
  • It should be placed vertically aligned

Behaviour

  • The user may select 1 file at a time.
  • By default, any file format is accepted, but you can add parameters to validate a specific file format.
  • The action of clicking Browse file will trigger a browser-specific upload window.
  • Once the user selects the file, the browser-specific select window closes and the files will appear below the File title label.

Error

Below you have an example of how you can properly show an error using the HelperText. You can try to submit any file to trigger the error and clean the input by canceling the selection to remove the error state.

Playground

The example below will demostrate how to create compositions of FilePicker

In the real world you may need to deal with the FilePicker within a form that will handle the submission of the file. Below you will find a snippet that can help as example.

Tip: The FilePicker exposes an additional callback of onFileChange which signature is (file, event). The File and the standard input event. This is a convenient to use file instead of e.target.elements.avatar.files[0] check the console while using the example below.