File upload - multiple

The file upload - multiple component allows users to select 1 or more files to upload to a specific location. The component can be configured to support any file type as well as restrict the user's ability to upload 1 or more files. Users have the ability to select files from their system either natively using a file input or via drag and drop. Once uploaded, the user can edit any files.

Info alert:Beta feature

This Beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack. To learn more go to our Beta components page on GitHub.

Examples

Basic

Drag and drop files here

or

Accepted file types: JPEG, Doc, PDF, PNG

Drag over

Drag and drop files here

or

Accepted file types: JPEG, Doc, PDF, PNG

Horizontal

Drag and drop files here

or

Accepted file types: JPEG, Doc, PDF, PNG

Horizontal drag over

Drag and drop files here

or

Accepted file types: JPEG, Doc, PDF, PNG

File upload status

Drag and drop files here

or

Accepted file types: JPEG, Doc, PDF, PNG

File upload status expanded

Drag and drop files here

or

Accepted file types: JPEG, Doc, PDF, PNG

filename.png 40 mb
filename.doc 30 mb
filename.pdf 25 mb

Horizontal file upload status expanded

Drag and drop files here

or

Accepted file types: JPEG, Doc, PDF, PNG

filename.png 40 mb
filename.doc 30 mb
filename.pdf 25 mb

Documentation

Usage

Class	Applied	Outcome
`.pf-c-multiple-file-upload`	`<div>`	Initiates the multiple file upload component. Required
`.pf-c-multiple-file-upload__main`	`<div>`	Defines the main section.
`.pf-c-multiple-file-upload__title`	`<div>`	Defines the title.
`.pf-c-multiple-file-upload__title-icon`	`<div>`	Defines the title icon.
`.pf-c-multiple-file-upload__title-text`	`<div>`	Defines the title text.
`.pf-c-multiple-file-upload__title-text-separator`	`<div>`	Defines the title text separator.
`.pf-c-multiple-file-upload__upload`	`<div>`	Defines the upload button.
`.pf-c-multiple-file-upload__info`	`<div>`	Defines the info section.
`.pf-c-multiple-file-upload__status`	`<div>`	Defines the status section.
`.pf-c-multiple-file-upload__status-progress`	`<div>`	Defines the status toggle progress.
`.pf-c-multiple-file-upload__status-progress-icon`	`<div>`	Defines the status toggle progress icon.
`.pf-c-multiple-file-upload__status-progress-text`	`<div>`	Defines the status toggle progress text.
`.pf-c-multiple-file-upload__status-list`	`<div>`	Defines the status item list.
`.pf-c-multiple-file-upload__status-item`	`<div>`	Defines a status item.
`.pf-c-multiple-file-upload__status-item-icon`	`<div>`	Defines the status item icon.
`.pf-c-multiple-file-upload__status-item-main`	`<div>`	Defines the status item main progress section.
`.pf-c-multiple-file-upload__status-item-close`	`<div>`	Defines the status item close button.
`.pf-c-multiple-file-upload__status-item-progress`	`<div>`	Defines the status item progress description.
`.pf-c-multiple-file-upload__status-item-progress-text`	`<div>`	Defines the status item progress description text.
`.pf-c-multiple-file-upload__status-item-progress-size`	`<div>`	Defines the status item progress description size.

CSS variables


	.pf-c-multiple-file-upload	--pf-c-multiple-file-upload--GridTemplateColumns	1fr
	.pf-c-multiple-file-upload	--pf-c-multiple-file-upload--Gap	1.5rem
--pf-c-multiple-file-upload--Gap --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-multiple-file-upload	--pf-c-multiple-file-upload__main--TextAlign	center
	.pf-c-multiple-file-upload	--pf-c-multiple-file-upload__main--GridTemplateColumns	auto
	.pf-c-multiple-file-upload	--pf-c-multiple-file-upload__main--GridTemplateRows	auto
	.pf-c-multiple-file-upload	--pf-c-multiple-file-upload__main--GridTemplateAreas	"title" "upload" "info"
	.pf-c-multiple-file-upload	--pf-c-multiple-file-upload__main--Gap	1rem
--pf-c-multiple-file-upload__main--Gap --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-multiple-file-upload	--pf-c-multiple-file-upload__main--PaddingTop	1.5rem
--pf-c-multiple-file-upload__main--PaddingTop --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-multiple-file-upload	--pf-c-multiple-file-upload__main--PaddingRight	1.5rem
--pf-c-multiple-file-upload__main--PaddingRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-multiple-file-upload	--pf-c-multiple-file-upload__main--PaddingBottom	2rem
--pf-c-multiple-file-upload__main--PaddingBottom --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-multiple-file-upload	--pf-c-multiple-file-upload__main--PaddingLeft	1.5rem
--pf-c-multiple-file-upload__main--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-multiple-file-upload	--pf-c-multiple-file-upload__main--BorderWidth	1px
--pf-c-multiple-file-upload__main--BorderWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-multiple-file-upload	--pf-c-multiple-file-upload__main--BorderStyle	dashed
	.pf-c-multiple-file-upload	--pf-c-multiple-file-upload__main--BorderColor	#d2d2d2
--pf-c-multiple-file-upload__main--BorderColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-multiple-file-upload	--pf-c-multiple-file-upload__main--BackgroundColor	#fff
--pf-c-multiple-file-upload__main--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #fff
	.pf-c-multiple-file-upload	--pf-c-multiple-file-upload__title--Display	grid
	.pf-c-multiple-file-upload	--pf-c-multiple-file-upload__title--GridTemplateColumns	auto
	.pf-c-multiple-file-upload	--pf-c-multiple-file-upload__title--Gap	0.5rem
--pf-c-multiple-file-upload__title--Gap --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-multiple-file-upload	--pf-c-multiple-file-upload__title-icon--Color	#6a6e73
--pf-c-multiple-file-upload__title-icon--Color --pf-global--Color--200 $pf-global--Color--200 $pf-color-black-600 #6a6e73
	.pf-c-multiple-file-upload	--pf-c-multiple-file-upload__title-text-separator--Display	block
	.pf-c-multiple-file-upload	--pf-c-multiple-file-upload__title-text-separator--MarginTop	0.5rem
--pf-c-multiple-file-upload__title-text-separator--MarginTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-multiple-file-upload	--pf-c-multiple-file-upload__info--FontSize	0.875rem
--pf-c-multiple-file-upload__info--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-multiple-file-upload	--pf-c-multiple-file-upload__info--Color	#6a6e73
--pf-c-multiple-file-upload__info--Color --pf-global--Color--200 $pf-global--Color--200 $pf-color-black-600 #6a6e73
	.pf-c-multiple-file-upload	--pf-c-multiple-file-upload__info--MarginTop	0.5rem
--pf-c-multiple-file-upload__info--MarginTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-multiple-file-upload	--pf-c-multiple-file-upload--m-drag-over__main--BorderStyle	solid
	.pf-c-multiple-file-upload	--pf-c-multiple-file-upload--m-drag-over__main--BorderColor	#06c
--pf-c-multiple-file-upload--m-drag-over__main--BorderColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-multiple-file-upload	--pf-c-multiple-file-upload--m-drag-over__main--BackgroundColor	#e7f1fa
--pf-c-multiple-file-upload--m-drag-over__main--BackgroundColor --pf-global--palette--blue-50 $pf-color-blue-50 #e7f1fa
	.pf-c-multiple-file-upload	--pf-c-multiple-file-upload--m-drag-over__main__title-icon--Color	#06c
--pf-c-multiple-file-upload--m-drag-over__main__title-icon--Color --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-multiple-file-upload	--pf-c-multiple-file-upload--m-drag-over__main__title-text--Color	#06c
--pf-c-multiple-file-upload--m-drag-over__main__title-text--Color --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-multiple-file-upload	--pf-c-multiple-file-upload--m-drag-over__main__info--Color	#06c
--pf-c-multiple-file-upload--m-drag-over__main__info--Color --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-multiple-file-upload	--pf-c-multiple-file-upload--m-horizontal--GridTemplateColumns	fit-content(100%)
	.pf-c-multiple-file-upload	--pf-c-multiple-file-upload--m-horizontal__main--TextAlign	left
	.pf-c-multiple-file-upload	--pf-c-multiple-file-upload--m-horizontal__main--GridTemplateColumns	1fr auto
	.pf-c-multiple-file-upload	--pf-c-multiple-file-upload--m-horizontal__main--GridTemplateAreas	"title upload" "info upload"
	.pf-c-multiple-file-upload	--pf-c-multiple-file-upload--m-horizontal__main--Gap	0.5rem 3rem
--pf-c-multiple-file-upload--m-horizontal__main--Gap --pf-global--spacer--sm --pf-global--spacer--2xl $pf-global--spacer--sm $pf-global--spacer--2xl pf-size-prem(8px) pf-size-prem(48px) 0.5rem 3rem
	.pf-c-multiple-file-upload	--pf-c-multiple-file-upload--m-horizontal__main--PaddingBottom	1.5rem
--pf-c-multiple-file-upload--m-horizontal__main--PaddingBottom --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-multiple-file-upload	--pf-c-multiple-file-upload--m-horizontal__title--GridTemplateColumns	auto 1fr
	.pf-c-multiple-file-upload	--pf-c-multiple-file-upload--m-horizontal__title--Gap	0.25rem
--pf-c-multiple-file-upload--m-horizontal__title--Gap --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-multiple-file-upload	--pf-c-multiple-file-upload--m-horizontal__title-text-separator--Display	inline
	.pf-c-multiple-file-upload	--pf-c-multiple-file-upload--m-horizontal__title-text-separator--MarginTop	0
	.pf-c-multiple-file-upload	--pf-c-multiple-file-upload--m-horizontal__info--MarginTop	0
	.pf-c-multiple-file-upload	--pf-c-multiple-file-upload__status-progress--GridTemplateColumns	auto 1fr
	.pf-c-multiple-file-upload	--pf-c-multiple-file-upload__status-progress--Gap	0.5rem
--pf-c-multiple-file-upload__status-progress--Gap --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-multiple-file-upload	--pf-c-multiple-file-upload__status-progress-icon--Color	#6a6e73
--pf-c-multiple-file-upload__status-progress-icon--Color --pf-global--Color--200 $pf-global--Color--200 $pf-color-black-600 #6a6e73
	.pf-c-multiple-file-upload	--pf-c-multiple-file-upload__status-item--PaddingTop	1rem
--pf-c-multiple-file-upload__status-item--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-multiple-file-upload	--pf-c-multiple-file-upload__status-item--PaddingBottom	1rem
--pf-c-multiple-file-upload__status-item--PaddingBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-multiple-file-upload	--pf-c-multiple-file-upload__status-item--first-child--PaddingTop	0
	.pf-c-multiple-file-upload	--pf-c-multiple-file-upload__status-item--GridTemplateColumns	auto 1fr auto
	.pf-c-multiple-file-upload	--pf-c-multiple-file-upload__status-item--Gap	0.5rem
--pf-c-multiple-file-upload__status-item--Gap --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-multiple-file-upload	--pf-c-multiple-file-upload__status-item--BorderWidth	1px
--pf-c-multiple-file-upload__status-item--BorderWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-multiple-file-upload	--pf-c-multiple-file-upload__status-item--BorderColor	#d2d2d2
--pf-c-multiple-file-upload__status-item--BorderColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-multiple-file-upload	--pf-c-multiple-file-upload__status-item-icon--Color	#6a6e73
--pf-c-multiple-file-upload__status-item-icon--Color --pf-global--Color--200 $pf-global--Color--200 $pf-color-black-600 #6a6e73
	.pf-c-multiple-file-upload	--pf-c-multiple-file-upload__status-item-close--MarginTop	calc(0.375rem * -1)
--pf-c-multiple-file-upload__status-item-close--MarginTop calc(--pf-global--spacer--form-element * -1) calc($pf-global--spacer--form-element * -1) calc(pf-size-prem(6px) * -1) calc(0.375rem * -1)
	.pf-c-multiple-file-upload	--pf-c-multiple-file-upload__status-item-progress--GridTemplateColumns	fit-content(100%) max-content
	.pf-c-multiple-file-upload	--pf-c-multiple-file-upload__status-item-progress--Gap	0.5rem
--pf-c-multiple-file-upload__status-item-progress--Gap --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-multiple-file-upload	--pf-c-multiple-file-upload__status-item-progress-text--Color	#06c
--pf-c-multiple-file-upload__status-item-progress-text--Color --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-multiple-file-upload	--pf-c-multiple-file-upload__status-item-progress-size--Color	#6a6e73
--pf-c-multiple-file-upload__status-item-progress-size--Color --pf-global--Color--200 $pf-global--Color--200 $pf-color-black-600 #6a6e73
	.pf-c-multiple-file-upload.pf-m-horizontal	--pf-c-multiple-file-upload--GridTemplateColumns	fit-content(100%)
--pf-c-multiple-file-upload--GridTemplateColumns --pf-c-multiple-file-upload--m-horizontal--GridTemplateColumns fit-content(100%)
	.pf-c-multiple-file-upload.pf-m-horizontal	--pf-c-multiple-file-upload__main--TextAlign	left
--pf-c-multiple-file-upload__main--TextAlign --pf-c-multiple-file-upload--m-horizontal__main--TextAlign left
	.pf-c-multiple-file-upload.pf-m-horizontal	--pf-c-multiple-file-upload__main--GridTemplateColumns	1fr auto
--pf-c-multiple-file-upload__main--GridTemplateColumns --pf-c-multiple-file-upload--m-horizontal__main--GridTemplateColumns 1fr auto
	.pf-c-multiple-file-upload.pf-m-horizontal	--pf-c-multiple-file-upload__main--GridTemplateAreas	"title upload" "info upload"
--pf-c-multiple-file-upload__main--GridTemplateAreas --pf-c-multiple-file-upload--m-horizontal__main--GridTemplateAreas "title upload" "info upload"
	.pf-c-multiple-file-upload.pf-m-horizontal	--pf-c-multiple-file-upload__main--Gap	0.5rem 3rem
--pf-c-multiple-file-upload__main--Gap --pf-c-multiple-file-upload--m-horizontal__main--Gap --pf-global--spacer--sm --pf-global--spacer--2xl $pf-global--spacer--sm $pf-global--spacer--2xl pf-size-prem(8px) pf-size-prem(48px) 0.5rem 3rem
	.pf-c-multiple-file-upload.pf-m-horizontal	--pf-c-multiple-file-upload__main--PaddingBottom	1.5rem
--pf-c-multiple-file-upload__main--PaddingBottom --pf-c-multiple-file-upload--m-horizontal__main--PaddingBottom --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-multiple-file-upload.pf-m-horizontal	--pf-c-multiple-file-upload__title--GridTemplateColumns	auto 1fr
--pf-c-multiple-file-upload__title--GridTemplateColumns --pf-c-multiple-file-upload--m-horizontal__title--GridTemplateColumns auto 1fr
	.pf-c-multiple-file-upload.pf-m-horizontal	--pf-c-multiple-file-upload__title--Gap	0.25rem
--pf-c-multiple-file-upload__title--Gap --pf-c-multiple-file-upload--m-horizontal__title--Gap --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-multiple-file-upload.pf-m-horizontal	--pf-c-multiple-file-upload__title-text-separator--Display	inline
--pf-c-multiple-file-upload__title-text-separator--Display --pf-c-multiple-file-upload--m-horizontal__title-text-separator--Display inline
	.pf-c-multiple-file-upload.pf-m-horizontal	--pf-c-multiple-file-upload__title-text-separator--MarginTop	0
--pf-c-multiple-file-upload__title-text-separator--MarginTop --pf-c-multiple-file-upload--m-horizontal__title-text-separator--MarginTop 0
	.pf-c-multiple-file-upload.pf-m-horizontal	--pf-c-multiple-file-upload__info--MarginTop	0
--pf-c-multiple-file-upload__info--MarginTop --pf-c-multiple-file-upload--m-horizontal__info--MarginTop 0
	.pf-c-multiple-file-upload.pf-m-drag-over	--pf-c-multiple-file-upload__main--BorderStyle	solid
--pf-c-multiple-file-upload__main--BorderStyle --pf-c-multiple-file-upload--m-drag-over__main--BorderStyle solid
	.pf-c-multiple-file-upload.pf-m-drag-over	--pf-c-multiple-file-upload__main--BorderColor	#06c
--pf-c-multiple-file-upload__main--BorderColor --pf-c-multiple-file-upload--m-drag-over__main--BorderColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-multiple-file-upload.pf-m-drag-over	--pf-c-multiple-file-upload__main--BackgroundColor	#e7f1fa
--pf-c-multiple-file-upload__main--BackgroundColor --pf-c-multiple-file-upload--m-drag-over__main--BackgroundColor --pf-global--palette--blue-50 $pf-color-blue-50 #e7f1fa
	.pf-c-multiple-file-upload.pf-m-drag-over	--pf-c-multiple-file-upload__title-icon--Color	#06c
--pf-c-multiple-file-upload__title-icon--Color --pf-c-multiple-file-upload--m-drag-over__main__title-icon--Color --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-multiple-file-upload.pf-m-drag-over	--pf-c-multiple-file-upload__title-text--Color	#06c
--pf-c-multiple-file-upload__title-text--Color --pf-c-multiple-file-upload--m-drag-over__main__title-text--Color --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-multiple-file-upload.pf-m-drag-over	--pf-c-multiple-file-upload__info--Color	#06c
--pf-c-multiple-file-upload__info--Color --pf-c-multiple-file-upload--m-drag-over__main__info--Color --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-multiple-file-upload__status-item:first-child	--pf-c-multiple-file-upload__status-item--PaddingTop	0
--pf-c-multiple-file-upload__status-item--PaddingTop --pf-c-multiple-file-upload__status-item--first-child--PaddingTop 0

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

Copyright © 2022 Red Hat, Inc.

Privacy statement Terms of use All policies and guidelines