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.

Examples Documentation CSS Variables

Examples

Basic file upload

Upload complete non editable

Ssh-Rsa AAh3zJFkzjjakCJialksjfB3zJFkzzAAhhMskjjakCJialksjfB3z89z3zJFkz3 +kzMAjsauoox88aaZXphBx4fczJFkzMAjsauoox88aaZXphBx4fczJFkzMAjsauoox88aaZXphBx4fc

Upload complete editable

Drag file hover component

File upload in form with error

File upload loading

Documentation

Overview

Usage

Class	Applied to	Outcome
`.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-upload`	Modifies file upload for when an element is dragged or dropped inside of its container.
`.pf-m-loading`	`.pf-c-file-upload`	Modifies 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--m-loading__file-details--before--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #fff
	.pf-c-file-upload	--pf-c-file-upload--m-loading__file-details--before--Left	1px
--pf-c-file-upload--m-loading__file-details--before--Left --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-file-upload	--pf-c-file-upload--m-loading__file-details--before--Right	1px
--pf-c-file-upload--m-loading__file-details--before--Right --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-file-upload	--pf-c-file-upload--m-loading__file-details--before--Bottom	1px
--pf-c-file-upload--m-loading__file-details--before--Bottom --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-file-upload	--pf-c-file-upload--m-drag-hover--before--BorderWidth	1px
--pf-c-file-upload--m-drag-hover--before--BorderWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-file-upload	--pf-c-file-upload--m-drag-hover--before--BorderColor	#06c
--pf-c-file-upload--m-drag-hover--before--BorderColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-file-upload	--pf-c-file-upload--m-drag-hover--before--ZIndex	100
--pf-c-file-upload--m-drag-hover--before--ZIndex --pf-global--ZIndex--xs $pf-global--ZIndex--xs 100
	.pf-c-file-upload	--pf-c-file-upload--m-drag-hover--after--BackgroundColor	#06c
--pf-c-file-upload--m-drag-hover--after--BackgroundColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #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__file-details__c-form-control--MinHeight calc(--pf-global--spacer--3xl * 2) calc($pf-global--spacer--3xl * 2) calc(pf-size-prem(64px) * 2) calc(4rem * 2)
	.pf-c-file-upload	--pf-c-file-upload__file-select__c-button--m-control--disabled--BackgroundColor	#f0f0f0
--pf-c-file-upload__file-select__c-button--m-control--disabled--BackgroundColor --pf-global--disabled-color--300 $pf-global--disabled-color--300 $pf-color-black-200 #f0f0f0
	.pf-c-file-upload	--pf-c-file-upload__file-select__c-button--m-control--disabled--after--BorderTopColor	#f0f0f0
--pf-c-file-upload__file-select__c-button--m-control--disabled--after--BorderTopColor --pf-global--BorderColor--300 $pf-global--BorderColor--300 $pf-color-black-200 #f0f0f0
	.pf-c-file-upload	--pf-c-file-upload__file-select__c-button--m-control--disabled--after--BorderRightColor	#f0f0f0
--pf-c-file-upload__file-select__c-button--m-control--disabled--after--BorderRightColor --pf-global--BorderColor--300 $pf-global--BorderColor--300 $pf-color-black-200 #f0f0f0
	.pf-c-file-upload	--pf-c-file-upload__file-select__c-button--m-control--disabled--after--BorderBottomColor	#8a8d90
--pf-c-file-upload__file-select__c-button--m-control--disabled--after--BorderBottomColor --pf-global--BorderColor--200 $pf-global--BorderColor--200 $pf-color-black-500 #8a8d90
	.pf-c-file-upload	--pf-c-file-upload__file-select__c-button--m-control--disabled--after--BorderLeftColor	#f0f0f0
--pf-c-file-upload__file-select__c-button--m-control--disabled--after--BorderLeftColor --pf-global--BorderColor--300 $pf-global--BorderColor--300 $pf-color-black-200 #f0f0f0
	.pf-c-file-upload	--pf-c-file-upload__file-select__c-button--m-control--disabled--after--BorderWidth	1px
--pf-c-file-upload__file-select__c-button--m-control--disabled--after--BorderWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-file-upload	--pf-c-file-upload__file-select__c-button--m-control--OutlineOffset	calc(-1 * 0.25rem)
--pf-c-file-upload__file-select__c-button--m-control--OutlineOffset calc(-1 * --pf-global--spacer--xs) calc(-1 * $pf-global--spacer--xs) calc(-1 * pf-size-prem(4px)) calc(-1 * 0.25rem)