-
Notifications
You must be signed in to change notification settings - Fork 106
[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
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
Type
Fields
Give feedbackNo fields configured for issues without a type.
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)