Skip to content
PatternFly

Multiple file upload

A multiple file upload 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-v5-c-multiple-file-upload
<div>
Initiates the multiple file upload component. Required
.pf-v5-c-multiple-file-upload__main
<div>
Defines the main section.
.pf-v5-c-multiple-file-upload__title
<div>
Defines the title.
.pf-v5-c-multiple-file-upload__title-icon
<div>
Defines the title icon.
.pf-v5-c-multiple-file-upload__title-text
<div>
Defines the title text.
.pf-v5-c-multiple-file-upload__title-text-separator
<div>
Defines the title text separator.
.pf-v5-c-multiple-file-upload__upload
<div>
Defines the upload button.
.pf-v5-c-multiple-file-upload__info
<div>
Defines the info section.
.pf-v5-c-multiple-file-upload__status
<div>
Defines the status section.
.pf-v5-c-multiple-file-upload__status-progress
<div>
Defines the status toggle progress.
.pf-v5-c-multiple-file-upload__status-progress-icon
<div>
Defines the status toggle progress icon.
.pf-v5-c-multiple-file-upload__status-progress-text
<div>
Defines the status toggle progress text.
.pf-v5-c-multiple-file-upload__status-list
<div>
Defines the status item list.
.pf-v5-c-multiple-file-upload__status-item
<div>
Defines a status item.
.pf-v5-c-multiple-file-upload__status-item-icon
<div>
Defines the status item icon.
.pf-v5-c-multiple-file-upload__status-item-main
<div>
Defines the status item main progress section.
.pf-v5-c-multiple-file-upload__status-item-close
<div>
Defines the status item close button.
.pf-v5-c-multiple-file-upload__status-item-progress
<div>
Defines the status item progress description.
.pf-v5-c-multiple-file-upload__status-item-progress-text
<div>
Defines the status item progress description text.
.pf-v5-c-multiple-file-upload__status-item-progress-size
<div>
Defines the status item progress description size.

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v5-c-multiple-file-upload--pf-v5-c-multiple-file-upload--GridTemplateColumns
1fr
.pf-v5-c-multiple-file-upload--pf-v5-c-multiple-file-upload--Gap
1.5rem
.pf-v5-c-multiple-file-upload--pf-v5-c-multiple-file-upload__main--TextAlign
center
.pf-v5-c-multiple-file-upload--pf-v5-c-multiple-file-upload__main--GridTemplateColumns
auto
.pf-v5-c-multiple-file-upload--pf-v5-c-multiple-file-upload__main--GridTemplateRows
auto
.pf-v5-c-multiple-file-upload--pf-v5-c-multiple-file-upload__main--GridTemplateAreas
"title" "upload" "info"
.pf-v5-c-multiple-file-upload--pf-v5-c-multiple-file-upload__main--Gap
1rem
.pf-v5-c-multiple-file-upload--pf-v5-c-multiple-file-upload__main--PaddingTop
1.5rem
.pf-v5-c-multiple-file-upload--pf-v5-c-multiple-file-upload__main--PaddingRight
1.5rem
.pf-v5-c-multiple-file-upload--pf-v5-c-multiple-file-upload__main--PaddingBottom
2rem
.pf-v5-c-multiple-file-upload--pf-v5-c-multiple-file-upload__main--PaddingLeft
1.5rem
.pf-v5-c-multiple-file-upload--pf-v5-c-multiple-file-upload__main--BorderWidth
1px
.pf-v5-c-multiple-file-upload--pf-v5-c-multiple-file-upload__main--BorderStyle
dashed
.pf-v5-c-multiple-file-upload--pf-v5-c-multiple-file-upload__main--BorderColor
#d2d2d2
.pf-v5-c-multiple-file-upload--pf-v5-c-multiple-file-upload__main--BackgroundColor
#fff
.pf-v5-c-multiple-file-upload--pf-v5-c-multiple-file-upload__title--Display
grid
.pf-v5-c-multiple-file-upload--pf-v5-c-multiple-file-upload__title--GridTemplateColumns
auto
.pf-v5-c-multiple-file-upload--pf-v5-c-multiple-file-upload__title--Gap
0.5rem
.pf-v5-c-multiple-file-upload--pf-v5-c-multiple-file-upload__title-icon--Color
#151515
.pf-v5-c-multiple-file-upload--pf-v5-c-multiple-file-upload__title-text-separator--Display
block
.pf-v5-c-multiple-file-upload--pf-v5-c-multiple-file-upload__title-text-separator--MarginTop
0.5rem
.pf-v5-c-multiple-file-upload--pf-v5-c-multiple-file-upload__info--FontSize
0.875rem
.pf-v5-c-multiple-file-upload--pf-v5-c-multiple-file-upload__info--Color
#6a6e73
.pf-v5-c-multiple-file-upload--pf-v5-c-multiple-file-upload__info--MarginTop
0.5rem
.pf-v5-c-multiple-file-upload--pf-v5-c-multiple-file-upload--m-drag-over__main--BorderStyle
solid
.pf-v5-c-multiple-file-upload--pf-v5-c-multiple-file-upload--m-drag-over__main--BorderColor
#06c
.pf-v5-c-multiple-file-upload--pf-v5-c-multiple-file-upload--m-drag-over__main--BackgroundColor
#e7f1fa
.pf-v5-c-multiple-file-upload--pf-v5-c-multiple-file-upload--m-drag-over__main__title-icon--Color
#06c
.pf-v5-c-multiple-file-upload--pf-v5-c-multiple-file-upload--m-drag-over__main__title-text--Color
#06c
.pf-v5-c-multiple-file-upload--pf-v5-c-multiple-file-upload--m-drag-over__main__info--Color
#06c
.pf-v5-c-multiple-file-upload--pf-v5-c-multiple-file-upload--m-horizontal--GridTemplateColumns
fit-content(100%)
.pf-v5-c-multiple-file-upload--pf-v5-c-multiple-file-upload--m-horizontal__main--TextAlign
start
.pf-v5-c-multiple-file-upload--pf-v5-c-multiple-file-upload--m-horizontal__main--GridTemplateColumns
1fr auto
.pf-v5-c-multiple-file-upload--pf-v5-c-multiple-file-upload--m-horizontal__main--GridTemplateAreas
"title upload" "info upload"
.pf-v5-c-multiple-file-upload--pf-v5-c-multiple-file-upload--m-horizontal__main--Gap
0.5rem 3rem
.pf-v5-c-multiple-file-upload--pf-v5-c-multiple-file-upload--m-horizontal__main--PaddingBottom
1.5rem
.pf-v5-c-multiple-file-upload--pf-v5-c-multiple-file-upload--m-horizontal__title--GridTemplateColumns
auto 1fr
.pf-v5-c-multiple-file-upload--pf-v5-c-multiple-file-upload--m-horizontal__title--Gap
0.25rem
.pf-v5-c-multiple-file-upload--pf-v5-c-multiple-file-upload--m-horizontal__title-text-separator--Display
inline
.pf-v5-c-multiple-file-upload--pf-v5-c-multiple-file-upload--m-horizontal__title-text-separator--MarginTop
0
.pf-v5-c-multiple-file-upload--pf-v5-c-multiple-file-upload--m-horizontal__info--MarginTop
0
.pf-v5-c-multiple-file-upload--pf-v5-c-multiple-file-upload__status-progress--GridTemplateColumns
auto 1fr
.pf-v5-c-multiple-file-upload--pf-v5-c-multiple-file-upload__status-progress--Gap
0.5rem
.pf-v5-c-multiple-file-upload--pf-v5-c-multiple-file-upload__status-progress-icon--Color
#151515
.pf-v5-c-multiple-file-upload--pf-v5-c-multiple-file-upload__status-item--PaddingTop
1rem
.pf-v5-c-multiple-file-upload--pf-v5-c-multiple-file-upload__status-item--PaddingBottom
1rem
.pf-v5-c-multiple-file-upload--pf-v5-c-multiple-file-upload__status-item--first-child--PaddingTop
0
.pf-v5-c-multiple-file-upload--pf-v5-c-multiple-file-upload__status-item--GridTemplateColumns
auto 1fr auto
.pf-v5-c-multiple-file-upload--pf-v5-c-multiple-file-upload__status-item--Gap
0.5rem
.pf-v5-c-multiple-file-upload--pf-v5-c-multiple-file-upload__status-item--BorderWidth
1px
.pf-v5-c-multiple-file-upload--pf-v5-c-multiple-file-upload__status-item--BorderColor
#d2d2d2
.pf-v5-c-multiple-file-upload--pf-v5-c-multiple-file-upload__status-item-icon--Color
#151515
.pf-v5-c-multiple-file-upload--pf-v5-c-multiple-file-upload__status-item-close--MarginTop
calc(0.375rem * -1)
.pf-v5-c-multiple-file-upload--pf-v5-c-multiple-file-upload__status-item-progress--GridTemplateColumns
fit-content(100%) max-content
.pf-v5-c-multiple-file-upload--pf-v5-c-multiple-file-upload__status-item-progress--Gap
0.5rem
.pf-v5-c-multiple-file-upload--pf-v5-c-multiple-file-upload__status-item-progress-text--Color
#06c
.pf-v5-c-multiple-file-upload--pf-v5-c-multiple-file-upload__status-item-progress-size--Color
#6a6e73
.pf-v5-c-multiple-file-upload.pf-m-horizontal--pf-v5-c-multiple-file-upload--GridTemplateColumns
fit-content(100%)
.pf-v5-c-multiple-file-upload.pf-m-horizontal--pf-v5-c-multiple-file-upload__main--TextAlign
start
.pf-v5-c-multiple-file-upload.pf-m-horizontal--pf-v5-c-multiple-file-upload__main--GridTemplateColumns
1fr auto
.pf-v5-c-multiple-file-upload.pf-m-horizontal--pf-v5-c-multiple-file-upload__main--GridTemplateAreas
"title upload" "info upload"
.pf-v5-c-multiple-file-upload.pf-m-horizontal--pf-v5-c-multiple-file-upload__main--Gap
0.5rem 3rem
.pf-v5-c-multiple-file-upload.pf-m-horizontal--pf-v5-c-multiple-file-upload__main--PaddingBottom
1.5rem
.pf-v5-c-multiple-file-upload.pf-m-horizontal--pf-v5-c-multiple-file-upload__title--GridTemplateColumns
auto 1fr
.pf-v5-c-multiple-file-upload.pf-m-horizontal--pf-v5-c-multiple-file-upload__title--Gap
0.25rem
.pf-v5-c-multiple-file-upload.pf-m-horizontal--pf-v5-c-multiple-file-upload__title-text-separator--Display
inline
.pf-v5-c-multiple-file-upload.pf-m-horizontal--pf-v5-c-multiple-file-upload__title-text-separator--MarginTop
0
.pf-v5-c-multiple-file-upload.pf-m-horizontal--pf-v5-c-multiple-file-upload__info--MarginTop
0
.pf-v5-c-multiple-file-upload.pf-m-drag-over--pf-v5-c-multiple-file-upload__main--BorderStyle
solid
.pf-v5-c-multiple-file-upload.pf-m-drag-over--pf-v5-c-multiple-file-upload__main--BorderColor
#06c
.pf-v5-c-multiple-file-upload.pf-m-drag-over--pf-v5-c-multiple-file-upload__main--BackgroundColor
#e7f1fa
.pf-v5-c-multiple-file-upload.pf-m-drag-over--pf-v5-c-multiple-file-upload__title-icon--Color
#06c
.pf-v5-c-multiple-file-upload.pf-m-drag-over--pf-v5-c-multiple-file-upload__title-text--Color
#06c
.pf-v5-c-multiple-file-upload.pf-m-drag-over--pf-v5-c-multiple-file-upload__info--Color
#06c
.pf-v5-c-multiple-file-upload__status-item:first-child--pf-v5-c-multiple-file-upload__status-item--PaddingTop
0

View source on GitHub
Red Hat
Copyright © 2014-2024 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines