Simple file upload

A simple file upload component allows the users to upload a single file into the browser. This is primarily used for uploading and previewing text files, but other file types will also be accepted.

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

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.

CSS variables

Expand or collapse columnSelectorVariableValue
:where(:root, .pf-v6-c-file-upload)--pf-v6-c-file-upload--RowGap
0.5rem
:where(:root, .pf-v6-c-file-upload)--pf-v6-c-file-upload--PaddingBlockStart
0.5rem
:where(:root, .pf-v6-c-file-upload)--pf-v6-c-file-upload--PaddingBlockEnd
0.5rem
:where(:root, .pf-v6-c-file-upload)--pf-v6-c-file-upload--PaddingInlineStart
0.5rem
:where(:root, .pf-v6-c-file-upload)--pf-v6-c-file-upload--PaddingInlineEnd
0.5rem
:where(:root, .pf-v6-c-file-upload)--pf-v6-c-file-upload--BorderRadius
6px
:where(:root, .pf-v6-c-file-upload)--pf-v6-c-file-upload--BorderWidth
1px
:where(:root, .pf-v6-c-file-upload)--pf-v6-c-file-upload--BorderColor
transparent
:where(:root, .pf-v6-c-file-upload)--pf-v6-c-file-upload--BorderStyle
solid
:where(:root, .pf-v6-c-file-upload)--pf-v6-c-file-upload--m-drag-hover--BorderColor
(In light theme) #06c
:where(:root, .pf-v6-c-file-upload)--pf-v6-c-file-upload--m-drag-hover--BorderStyle
dashed
:where(:root, .pf-v6-c-file-upload)--pf-v6-c-file-upload__file-select__c-button--m-control--OutlineOffset
calc(-1 * 0.25rem)
:where(:root, .pf-v6-c-file-upload)--pf-v6-c-file-upload__file-details__c-form-control--MinHeight
calc(4rem * 2)
.pf-v6-c-file-upload.pf-m-drag-hover--pf-v6-c-file-upload--BorderColor
(In light theme) #06c
.pf-v6-c-file-upload.pf-m-drag-hover--pf-v6-c-file-upload--BorderStyle
dashed
We use cookies on our websites to deliver our online services. Details about how we use cookies and how you may disable them are set out in our Privacy Statement. By using this website you agree to our use of cookies.