CodyHouse Framework + Components are featured on Product Hunt! Join the discussion →


Progress value is 30%

File Upload

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

Copy: View demo


All components are built upon the CodyHouse Framework.

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

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


  • ✅ Component created
    🗓 July 08, 2019

Bug Report & Feedback

Get in touch: suggest a component or report a bug.

✅ Project duplicated

✅ Project created

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