Patternfly Logo

Info alert:Beta feature

This Beta component is currently under review, so please join in and give us your feedback on the PatternFly forum.

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

ClassApplied toOutcome
.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-uploadModifies file upload for when an element is dragged or dropped inside of its container.
.pf-m-loading.pf-c-file-uploadModifies 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