Custom file input element used to select and upload a file.
All components are based on CodyFrame.
This component includes variations. All variations share the same SCSS/JS code. They only differ in their HTML.
The File Upload component allows you to upload a file (or multiple files) by selecting it from your device storage. It uses the native
<input type="file"> element.
<input> element (
.file-upload__input) is visually hidden, while the
<label> element (
.file-upload__label) is used to trigger the file picker modal.
In the component demos, the classes
.btn--subtle have been used to style the
When a file is selected, the default label text is replaced by the name of the uploaded file. If you want to set a maximum width to this text, add the
.file-upload__text--has-max-width class to the
.file-upload__text element (default max-width is 200px, you can modify this value in the SCSS file of the component).
Since the component uses the native
<input type="file"> element, you can access the list of selected files using its
files attribute (or you can use the
value attribute to access the path of the first selected file).
multiple attribute to the input element if you want to allow multiple files selection (see --icon demo).