Repository navigation
[feat]: Create <pf-v6-file-upload> element #2693
Copy link
Copy link
Open
Labels
1:1Aligning components with PatternFly v4Aligning components with PatternFly v4featureNew feature or requestNew feature or requestfor devgood 1st issueGood for newcomers to the project; requires at least an introductory knowledge of the languageGood for newcomers to the project; requires at least an introductory knowledge of the languagenew component requestpriority: mediumSeverity level: 2Severity level: 2red hack dayGood issue for Red Hack DayGood issue for Red Hack Day
Milestone
Description
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
- Related:
<rh-file-upload> pf-v6-multiple-file-uploadis a separate issue ([feat]: Create<pf-v6-multiple-file-upload>element #3023)
Requirements
- MUST implement PFv6 visual designs
- MUST provide end-user feature parity with
@patternfly/react-coreFileUpload - 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- submitsFileor file content value(File or string),filename,onChangeeventacceptattr for file type restriction (maps to<input type="file" accept>)isLoadingstate with spinner during uploadisReadOnly/isDisabledstates- Drag-and-drop zone:
dragover,dragleave,dropevents;isDragActivestate - "Browse" button triggers hidden
<input type="file"> FileUploadFieldsub-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,onTextChangecallbacks- Progressive enhancement: functional without JS for basic file input
Checklist
Implementation
-
formAssociated = true -
ElementInternalsfor value/validity reporting - API per
.claude/ADVICE.md - CSS uses v6 tokens, logical properties, nesting
-
@summaryand JSDoc on element class
Demos
- Demos match patternfly.org naming/structure
- CSS custom properties match computed styles from patternfly.org (Chrome MCP)
- Visual parity verified via Chrome MCP
Tests
- Public API covered (attributes, properties, events, slots)
-
a11ySnapshotassertions - Form submission test
Reviews
-
/review-apipasses -
/review-demospasses -
/review-a11ypasses -
eslintandstylelintpass
Ship
- Add changeset
- PR targets
staging/pfv6(NOTmain)
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
1:1Aligning components with PatternFly v4Aligning components with PatternFly v4featureNew feature or requestNew feature or requestfor devgood 1st issueGood for newcomers to the project; requires at least an introductory knowledge of the languageGood for newcomers to the project; requires at least an introductory knowledge of the languagenew component requestpriority: mediumSeverity level: 2Severity level: 2red hack dayGood issue for Red Hack DayGood issue for Red Hack Day
Activity
[-][feat] Create `<pf-file-upload>` element[/-][+][feat]: Create `<pf-v6-file-upload>` element[/+]