PatternFly

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

Upload complete non editable

Upload complete editable

Drag file hover component

File upload in form with error

We don't support this file type. Try again with a different file type.

File upload loading

Documentation

Overview

Usage

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

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v5-c-file-upload--pf-v5-c-file-upload--m-loading__file-details--before--BackgroundColor
#fff
.pf-v5-c-file-upload--pf-v5-c-file-upload--m-loading__file-details--before--Left
1px
.pf-v5-c-file-upload--pf-v5-c-file-upload--m-loading__file-details--before--Right
1px
.pf-v5-c-file-upload--pf-v5-c-file-upload--m-loading__file-details--before--Bottom
1px
.pf-v5-c-file-upload--pf-v5-c-file-upload--m-drag-hover--before--BorderWidth
1px
.pf-v5-c-file-upload--pf-v5-c-file-upload--m-drag-hover--before--BorderColor
#06c
.pf-v5-c-file-upload--pf-v5-c-file-upload--m-drag-hover--before--ZIndex
100
.pf-v5-c-file-upload--pf-v5-c-file-upload--m-drag-hover--after--BackgroundColor
#06c
.pf-v5-c-file-upload--pf-v5-c-file-upload--m-drag-hover--after--Opacity
.1
.pf-v5-c-file-upload--pf-v5-c-file-upload__file-details__c-form-control--MinHeight
calc(4rem * 2)
.pf-v5-c-file-upload--pf-v5-c-file-upload__file-select__c-button--m-control--OutlineOffset
calc(-1 * 0.25rem)

View source on GitHub