Simple file upload

A simple file upload component allows users to select and upload a single file to a specific location.

Examples

Basic file upload

With helper text

Upload a CSV file

Upload complete non editable

Upload complete editable

Drag file hover component

File upload in form with error

Error: Must be a CSV file no larger than 1 KB

File upload loading

Documentation

Overview

Usage

Class
Applied to
Outcome
.pf-v6-c-file-upload
<div>, <form>
Initiates the file upload component. Required.
.pf-v6-c-file-upload__file-select
<div>
Initiates the file select element. Required
.pf-v6-c-file-upload__file-details
<div>
Initiates the file details element. Required
.pf-v6-c-file-upload__file-details-spinner
<div>
Initiates the file details element. Required
.pf-v6-c-file-upload__helper-text
<div>
Initiates a container for helper text
.pf-m-drag-hover
.pf-v6-c-file-upload
Modifies file upload for when an element is dragged or dropped inside of its container.
.pf-m-loading
.pf-v6-c-file-upload
Modifies file upload for the loading state.