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


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




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 file upload for when an element is dragged or dropped inside of its container. file upload for the loading state.

CSS Variables