Skip to content
Patternfly Logo

File upload

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-c-file-upload
<div>, <form>
Initiates the file upload component. Required.
.pf-c-file-upload__file-select
<div>
Initiates the file select element. Required
.pf-c-file-upload__file-details
<div>
Initiates the file details element. Required
.pf-c-file-upload__file-details-spinner
<div>
Initiates the file details element. Required
.pf-m-drag-hover
.pf-c-file-upload
Modifies file upload for when an element is dragged or dropped inside of its container.
.pf-m-loading
.pf-c-file-upload
Modifies file upload for the loading state.

CSS variables

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

View source on GitHub