Skip to Content
Patternfly Logo

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

Use the File upload component to upload the contents of a file into the browser for further processing. Once uploaded content may optionally be edited. While the component can upload any file, it is primarily designed for use with text files where the context can easily be displayed in the text area.

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

.pf-c-file-upload--pf-c-file-upload--m-loading__file-details--before--BackgroundColorc_file_upload_m_loading__file_details_before_BackgroundColor
#fff
.pf-c-file-upload--pf-c-file-upload--m-loading__file-details--before--Leftc_file_upload_m_loading__file_details_before_Left
1px
.pf-c-file-upload--pf-c-file-upload--m-loading__file-details--before--Rightc_file_upload_m_loading__file_details_before_Right
1px
.pf-c-file-upload--pf-c-file-upload--m-loading__file-details--before--Bottomc_file_upload_m_loading__file_details_before_Bottom
1px
.pf-c-file-upload--pf-c-file-upload--m-drag-hover--before--BorderWidthc_file_upload_m_drag_hover_before_BorderWidth
1px
.pf-c-file-upload--pf-c-file-upload--m-drag-hover--before--BorderColorc_file_upload_m_drag_hover_before_BorderColor
#06c
.pf-c-file-upload--pf-c-file-upload--m-drag-hover--before--ZIndexc_file_upload_m_drag_hover_before_ZIndex
100
.pf-c-file-upload--pf-c-file-upload--m-drag-hover--after--BackgroundColorc_file_upload_m_drag_hover_after_BackgroundColor
#06c
.pf-c-file-upload--pf-c-file-upload--m-drag-hover--after--Opacityc_file_upload_m_drag_hover_after_Opacity
.1
.pf-c-file-upload--pf-c-file-upload__file-details__c-form-control--MinHeightc_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--OutlineOffsetc_file_upload__file_select__c_button_m_control_OutlineOffset
calc(-1 * 0.25rem)