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
- 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.
- 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
- 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.
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.
The example below will demostrate how to create compositions of
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.
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 check the console while using the example below.