File Upload

Custom file input element used to select and upload a file.

How To

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.

When JavaScript is enabled, the <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 and .btn--primary / .btn--subtle have been used to style the <label> element.

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).  

Add the multiple attribute to the input element if you want to allow multiple files selection (see --icon demo).