Simple file upload

A simple file upload component allows the users to upload a single file into the browser. This is primarily used for uploading and previewing text files, but other file types will also be accepted.

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-v5-c-file-upload`	`<div>`, `<form>`	Initiates the file upload component. Required.
`.pf-v5-c-file-upload__file-select`	`<div>`	Initiates the file select element. Required
`.pf-v5-c-file-upload__file-details`	`<div>`	Initiates the file details element. Required
`.pf-v5-c-file-upload__file-details-spinner`	`<div>`	Initiates the file details element. Required
`.pf-m-drag-hover`	`.pf-v5-c-file-upload`	Modifies file upload for when an element is dragged or dropped inside of its container.
`.pf-m-loading`	`.pf-v5-c-file-upload`	Modifies file upload for the loading state.

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v5-c-file-upload	--pf-v5-c-file-upload--m-loading__file-details--before--BackgroundColor	#fff
--pf-v5-c-file-upload--m-loading__file-details--before--BackgroundColor --pf-v5-global--BackgroundColor--100 $pf-v5-global--BackgroundColor--100 $pf-v5-color-white #fff
	.pf-v5-c-file-upload	--pf-v5-c-file-upload--m-loading__file-details--before--Left	1px
--pf-v5-c-file-upload--m-loading__file-details--before--Left --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px
	.pf-v5-c-file-upload	--pf-v5-c-file-upload--m-loading__file-details--before--Right	1px
--pf-v5-c-file-upload--m-loading__file-details--before--Right --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px
	.pf-v5-c-file-upload	--pf-v5-c-file-upload--m-loading__file-details--before--Bottom	1px
--pf-v5-c-file-upload--m-loading__file-details--before--Bottom --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px
	.pf-v5-c-file-upload	--pf-v5-c-file-upload--m-drag-hover--before--BorderWidth	1px
--pf-v5-c-file-upload--m-drag-hover--before--BorderWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px
	.pf-v5-c-file-upload	--pf-v5-c-file-upload--m-drag-hover--before--BorderColor	#06c
--pf-v5-c-file-upload--m-drag-hover--before--BorderColor --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c
	.pf-v5-c-file-upload	--pf-v5-c-file-upload--m-drag-hover--before--ZIndex	100
--pf-v5-c-file-upload--m-drag-hover--before--ZIndex --pf-v5-global--ZIndex--xs $pf-v5-global--ZIndex--xs 100
	.pf-v5-c-file-upload	--pf-v5-c-file-upload--m-drag-hover--after--BackgroundColor	#06c
--pf-v5-c-file-upload--m-drag-hover--after--BackgroundColor --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c
	.pf-v5-c-file-upload	--pf-v5-c-file-upload--m-drag-hover--after--Opacity	.1
	.pf-v5-c-file-upload	--pf-v5-c-file-upload__file-details__c-form-control--MinHeight	calc(4rem * 2)
--pf-v5-c-file-upload__file-details__c-form-control--MinHeight calc(--pf-v5-global--spacer--3xl * 2) calc($pf-v5-global--spacer--3xl * 2) calc(pf-size-prem(64px) * 2) calc(4rem * 2)
	.pf-v5-c-file-upload	--pf-v5-c-file-upload__file-select__c-button--m-control--OutlineOffset	calc(-1 * 0.25rem)
--pf-v5-c-file-upload__file-select__c-button--m-control--OutlineOffset calc(-1 * --pf-v5-global--spacer--xs) calc(-1 * $pf-v5-global--spacer--xs) calc(-1 * pf-size-prem(4px)) calc(-1 * 0.25rem)

View source on GitHub