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.

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