Summary
Create a <pf-v6-multiple-file-upload> web component implementing the PatternFly v6 Multiple file upload component.
Multi-file upload with drag-and-drop, per-file progress indicators, and file list management.
Prior Art
Source
Element
Status
PFE v4
--
--
cem
--
--
cockpit
--
--
chickadee
--
--
Requirements
MUST implement PFv6 visual designs
MUST provide end-user feature parity with @patternfly/react-core MultipleFileUpload
MAY adjust element API to leverage web platform strengths
SHOULD maintain CSS custom property theming compatibility
SHOULD expose useful CSS shadow parts
Element-specific considerations
Depends on pf-v6-file-upload ([feat]: Create <pf-v6-file-upload> element #2693 ) - port that first
<input type="file" multiple> under the hood
Sub-components: MultipleFileUploadMain (drop zone), MultipleFileUploadInfo (status text), MultipleFileUploadStatus (file list), MultipleFileUploadStatusItem
Drag-and-drop zone shared with single upload; isDragActive state
Per-file status item: filename, file size, progress bar, remove button, success/error icon
onFileDrop / onFileInputChange events bubble the full FileList
Upload progress managed externally (consumer tracks progress per file and updates props)
isHorizontal layout variant
FACE: formAssociated may not apply here (multi-file forms typically use FormData manually); evaluate whether ElementInternals helps
Remove button per file: fires onFileRemove event with filename
Checklist
Implementation
Demos
Tests
Reviews
Ship
Summary
Create a
<pf-v6-multiple-file-upload>web component implementing the PatternFly v6 Multiple file upload component.Multi-file upload with drag-and-drop, per-file progress indicators, and file list management.
Prior Art
Requirements
@patternfly/react-coreMultipleFileUploadElement-specific considerations
pf-v6-file-upload([feat]: Create<pf-v6-file-upload>element #2693) - port that first<input type="file" multiple>under the hoodMultipleFileUploadMain(drop zone),MultipleFileUploadInfo(status text),MultipleFileUploadStatus(file list),MultipleFileUploadStatusItemisDragActivestateonFileDrop/onFileInputChangeevents bubble the fullFileListisHorizontallayout variantformAssociatedmay not apply here (multi-file forms typically useFormDatamanually); evaluate whetherElementInternalshelpsonFileRemoveevent with filenameChecklist
Implementation
.claude/ADVICE.md@summaryand JSDoc on element classDemos
Tests
a11ySnapshotassertionsReviews
/review-apipasses/review-demospasses/review-a11ypasseseslintandstylelintpassShip
staging/pfv6(NOTmain)