File upload

Info alert:Beta feature

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

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