Skip to content
Patternfly Logo

File upload - multiple

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. Learn more about Beta components here.

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--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--pf-c-multiple-file-upload__main--PaddingTop
1.5rem
.pf-c-multiple-file-upload--pf-c-multiple-file-upload__main--PaddingRight
1.5rem
.pf-c-multiple-file-upload--pf-c-multiple-file-upload__main--PaddingBottom
2rem
.pf-c-multiple-file-upload--pf-c-multiple-file-upload__main--PaddingLeft
1.5rem
.pf-c-multiple-file-upload--pf-c-multiple-file-upload__main--BorderWidth
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--pf-c-multiple-file-upload__main--BackgroundColor
#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--pf-c-multiple-file-upload__title-icon--Color
#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--pf-c-multiple-file-upload__info--FontSize
0.875rem
.pf-c-multiple-file-upload--pf-c-multiple-file-upload__info--Color
#6a6e73
.pf-c-multiple-file-upload--pf-c-multiple-file-upload__info--MarginTop
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--pf-c-multiple-file-upload--m-drag-over__main--BackgroundColor
#e7f1fa
.pf-c-multiple-file-upload--pf-c-multiple-file-upload--m-drag-over__main__title-icon--Color
#06c
.pf-c-multiple-file-upload--pf-c-multiple-file-upload--m-drag-over__main__title-text--Color
#06c
.pf-c-multiple-file-upload--pf-c-multiple-file-upload--m-drag-over__main__info--Color
#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--pf-c-multiple-file-upload--m-horizontal__main--PaddingBottom
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--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--pf-c-multiple-file-upload__status-progress-icon--Color
#6a6e73
.pf-c-multiple-file-upload--pf-c-multiple-file-upload__status-item--PaddingTop
1rem
.pf-c-multiple-file-upload--pf-c-multiple-file-upload__status-item--PaddingBottom
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--pf-c-multiple-file-upload__status-item--BorderWidth
1px
.pf-c-multiple-file-upload--pf-c-multiple-file-upload__status-item--BorderColor
#d2d2d2
.pf-c-multiple-file-upload--pf-c-multiple-file-upload__status-item-icon--Color
#6a6e73
.pf-c-multiple-file-upload--pf-c-multiple-file-upload__status-item-close--MarginTop
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--pf-c-multiple-file-upload__status-item-progress-text--Color
#06c
.pf-c-multiple-file-upload--pf-c-multiple-file-upload__status-item-progress-size--Color
#6a6e73
.pf-c-multiple-file-upload.pf-m-horizontal--pf-c-multiple-file-upload--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.pf-m-horizontal--pf-c-multiple-file-upload__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.pf-m-horizontal--pf-c-multiple-file-upload__main--Gap
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.pf-m-horizontal--pf-c-multiple-file-upload__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.pf-m-horizontal--pf-c-multiple-file-upload__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.pf-m-horizontal--pf-c-multiple-file-upload__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.pf-m-drag-over--pf-c-multiple-file-upload__main--BorderColor
#06c
.pf-c-multiple-file-upload.pf-m-drag-over--pf-c-multiple-file-upload__main--BackgroundColor
#e7f1fa
.pf-c-multiple-file-upload.pf-m-drag-over--pf-c-multiple-file-upload__title-icon--Color
#06c
.pf-c-multiple-file-upload.pf-m-drag-over--pf-c-multiple-file-upload__title-text--Color
#06c
.pf-c-multiple-file-upload.pf-m-drag-over--pf-c-multiple-file-upload__info--Color
#06c
.pf-c-multiple-file-upload__status-item:first-child--pf-c-multiple-file-upload__status-item--PaddingTop
0

View source on GitHub