🎉 Black Friday deal! 25% off your first year of CodyHouse Pro →


Progress value is 30%

File Upload

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

Copy: View demo


All components are based on CodyFrame.

This component includes variations. All variations share the same SCSS/JS code. They only differ in their HTML.

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

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us