Simple file upload

A simple file upload component allows users to select and upload a single file to a specific location.

Examples

Basic file upload

With helper text

Upload a CSV file

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

CSS variables

Expand or collapse column	Selector	Variable	Value
	:where(:root, .pf-v6-c-file-upload)	--pf-v6-c-file-upload--RowGap	0.5rem
--pf-v6-c-file-upload--RowGap --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	:where(:root, .pf-v6-c-file-upload)	--pf-v6-c-file-upload--PaddingBlockStart	0.5rem
--pf-v6-c-file-upload--PaddingBlockStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	:where(:root, .pf-v6-c-file-upload)	--pf-v6-c-file-upload--PaddingBlockEnd	0.5rem
--pf-v6-c-file-upload--PaddingBlockEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	:where(:root, .pf-v6-c-file-upload)	--pf-v6-c-file-upload--PaddingInlineStart	0.5rem
--pf-v6-c-file-upload--PaddingInlineStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	:where(:root, .pf-v6-c-file-upload)	--pf-v6-c-file-upload--PaddingInlineEnd	0.5rem
--pf-v6-c-file-upload--PaddingInlineEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	:where(:root, .pf-v6-c-file-upload)	--pf-v6-c-file-upload--BorderRadius	6px
--pf-v6-c-file-upload--BorderRadius --pf-t--global--border--radius--small --pf-t--global--border--radius--200 6px
	:where(:root, .pf-v6-c-file-upload)	--pf-v6-c-file-upload--BorderWidth	1px
--pf-v6-c-file-upload--BorderWidth --pf-t--global--border--width--regular --pf-t--global--border--width--100 1px
	:where(:root, .pf-v6-c-file-upload)	--pf-v6-c-file-upload--BorderColor	transparent
	:where(:root, .pf-v6-c-file-upload)	--pf-v6-c-file-upload--BorderStyle	solid
	:where(:root, .pf-v6-c-file-upload)	--pf-v6-c-file-upload--m-drag-hover--BorderColor	(In light theme) #0066cc
--pf-v6-c-file-upload--m-drag-hover--BorderColor --pf-t--global--icon--color--brand--default --pf-t--global--color--brand--default --pf-t--global--color--brand--200 --pf-t--color--blue--50 #0066cc
	:where(:root, .pf-v6-c-file-upload)	--pf-v6-c-file-upload--m-drag-hover--BorderStyle	dashed
	:where(:root, .pf-v6-c-file-upload)	--pf-v6-c-file-upload__file-select__c-button--m-control--OutlineOffset	calc(-1 * 0.25rem)
--pf-v6-c-file-upload__file-select__c-button--m-control--OutlineOffset calc(-1 * --pf-t--global--spacer--xs) calc(-1 * --pf-t--global--spacer--100) calc(-1 * 0.25rem)
	:where(:root, .pf-v6-c-file-upload)	--pf-v6-c-file-upload__file-details__c-form-control--MinHeight	calc(4rem * 2)
--pf-v6-c-file-upload__file-details__c-form-control--MinHeight calc(--pf-t--global--spacer--3xl * 2) calc(--pf-t--global--spacer--700 * 2) calc(4rem * 2)
	.pf-v6-c-file-upload.pf-m-drag-hover	--pf-v6-c-file-upload--BorderColor	(In light theme) #0066cc
--pf-v6-c-file-upload--BorderColor --pf-v6-c-file-upload--m-drag-hover--BorderColor --pf-t--global--icon--color--brand--default --pf-t--global--color--brand--default --pf-t--global--color--brand--200 --pf-t--color--blue--50 #0066cc
	.pf-v6-c-file-upload.pf-m-drag-hover	--pf-v6-c-file-upload--BorderStyle	dashed
--pf-v6-c-file-upload--BorderStyle --pf-v6-c-file-upload--m-drag-hover--BorderStyle dashed

View source on GitHub