File upload

A file upload component allows the users to upload a single file into the browser.

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--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)

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

Privacy statement Terms of use All policies and guidelines