Summary
Create a <pf-v6-file-upload> web component implementing the PatternFly v6 Simple file upload component.
Single file upload with drag-and-drop support, file type restrictions, and loading states.
Prior Art
| Source |
Element |
Status |
| PFE v4 |
-- |
-- |
| cem |
-- |
-- |
| cockpit |
-- |
-- |
| chickadee |
<chickadee-file-upload> |
Exists |
Design
Notes
Requirements
- MUST implement PFv6 visual designs
- MUST provide end-user feature parity with
@patternfly/react-core FileUpload
- 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
- FACE:
formAssociated = true, ElementInternals - submits File or file content
value (File or string), filename, onChange event
accept attr for file type restriction (maps to <input type="file" accept>)
isLoading state with spinner during upload
isReadOnly / isDisabled states
- Drag-and-drop zone:
dragover, dragleave, drop events; isDragActive state
- "Browse" button triggers hidden
<input type="file">
FileUploadField sub-component: text input area for showing filename or pasting text content
- Text file mode: read file as text (
FileReader.readAsText), display in textarea
onFileInputChange, onClearClick, onTextChange callbacks
- Progressive enhancement: functional without JS for basic file input
Checklist
Implementation
Demos
Tests
Reviews
Ship
Summary
Create a
<pf-v6-file-upload>web component implementing the PatternFly v6 Simple file upload component.Single file upload with drag-and-drop support, file type restrictions, and loading states.
Prior Art
<chickadee-file-upload>Design
Notes
<rh-file-upload>pf-v6-multiple-file-uploadis a separate issue ([feat]: Create<pf-v6-multiple-file-upload>element #3023)Requirements
@patternfly/react-coreFileUploadElement-specific considerations
formAssociated = true,ElementInternals- submitsFileor file contentvalue(File or string),filename,onChangeeventacceptattr for file type restriction (maps to<input type="file" accept>)isLoadingstate with spinner during uploadisReadOnly/isDisabledstatesdragover,dragleave,dropevents;isDragActivestate<input type="file">FileUploadFieldsub-component: text input area for showing filename or pasting text contentFileReader.readAsText), display in textareaonFileInputChange,onClearClick,onTextChangecallbacksChecklist
Implementation
formAssociated = trueElementInternalsfor value/validity reporting.claude/ADVICE.md@summaryand JSDoc on element classDemos
Tests
a11ySnapshotassertionsReviews
/review-apipasses/review-demospasses/review-a11ypasseseslintandstylelintpassShip
staging/pfv6(NOTmain)