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
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__file-details__c-form-control--MinHeightc_file_upload__file_details__c_form_control_MinHeight
calc(4rem*2)
--pf-c-file-upload__file-select__c-button--m-control--disabled--after--BorderBottomColorc_file_upload__file_select__c_button_m_control_disabled_after_BorderBottomColor
#8a8d90
--pf-c-file-upload__file-select__c-button--m-control--disabled--after--BorderLeftColorc_file_upload__file_select__c_button_m_control_disabled_after_BorderLeftColor
#ededed
--pf-c-file-upload__file-select__c-button--m-control--disabled--after--BorderRightColorc_file_upload__file_select__c_button_m_control_disabled_after_BorderRightColor
#ededed
--pf-c-file-upload__file-select__c-button--m-control--disabled--after--BorderTopColorc_file_upload__file_select__c_button_m_control_disabled_after_BorderTopColor
#ededed
--pf-c-file-upload__file-select__c-button--m-control--disabled--after--BorderWidthc_file_upload__file_select__c_button_m_control_disabled_after_BorderWidth
1px
--pf-c-file-upload__file-select__c-button--m-control--disabled--BackgroundColorc_file_upload__file_select__c_button_m_control_disabled_BackgroundColor
#ededed
--pf-c-file-upload__file-select__c-button--m-control--OutlineOffsetc_file_upload__file_select__c_button_m_control_OutlineOffset
calc(-1*0.25rem)
--pf-c-file-upload--m-drag-hover--after--BackgroundColorc_file_upload_m_drag_hover_after_BackgroundColor
#06c
--pf-c-file-upload--m-drag-hover--after--Opacityc_file_upload_m_drag_hover_after_Opacity
.1
--pf-c-file-upload--m-drag-hover--before--BorderColorc_file_upload_m_drag_hover_before_BorderColor
#06c
--pf-c-file-upload--m-drag-hover--before--BorderWidthc_file_upload_m_drag_hover_before_BorderWidth
1px
--pf-c-file-upload--m-drag-hover--before--ZIndexc_file_upload_m_drag_hover_before_ZIndex
100
--pf-c-file-upload--m-loading__file-details--before--BackgroundColorc_file_upload_m_loading__file_details_before_BackgroundColor
#fff
--pf-c-file-upload--m-loading__file-details--before--Bottomc_file_upload_m_loading__file_details_before_Bottom
1px
--pf-c-file-upload--m-loading__file-details--before--Leftc_file_upload_m_loading__file_details_before_Left
1px
--pf-c-file-upload--m-loading__file-details--before--Rightc_file_upload_m_loading__file_details_before_Right
1px