fix(#3602): FileUploadInput error state to match FileUploadCard by willcodeforcoffee · Pull Request #3842 · GovAlta/ui-components

willcodeforcoffee · 2026-04-17T22:49:32Z

Before (the change)

File upload errors were listed in a unique state, which could cause them to not be visible when used in conjunction with the FileUploadCards.

After (the change)

File upload errors are listed in the same format as FileUploadCard.

Make sure that you've checked the boxes below before you submit the PR

I have read and followed the setup steps
I have created necessary unit tests
I have tested the functionality in both React and Angular.

Steps needed to test

Copilot

Pull request overview

This PR updates the goa-file-upload-input web component to present validation errors using the same goa-file-upload-card UI as FileUploadCard, and adds Angular/React PR demo routes for bug #3602.

Changes:

Render FileUploadInput validation issues as goa-file-upload-card instances (including size/type metadata).
Update FileUploadInput unit tests to assert the new issue rendering format.
Add PR demo routes/pages for Angular and React to reproduce/verify bug #3602.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
libs/web-components/src/components/file-upload-input/FileUploadInput.svelte	Switches issue rendering to `goa-file-upload-card` and adds delete-to-dismiss behavior.
libs/web-components/src/components/file-upload-input/file-upload-input.spec.ts	Updates tests to look for the new issue card test ids.
apps/prs/react/src/routes/bugs/bug3602.tsx	Adds a React demo page showcasing FileUploadInput + FileUploadCard together.
apps/prs/react/src/app/routes/bugs/bug3602.route.ts	Registers the React demo route.
apps/prs/angular/src/routes/bugs/3602/bug3602.route.json	Registers the Angular demo route metadata.
apps/prs/angular/src/routes/bugs/3602/bug3602.component.ts	Adds an Angular demo component for the scenario.
apps/prs/angular/src/routes/bugs/3602/bug3602.component.html	Adds the Angular demo template displaying uploaded cards.

willcodeforcoffee · 2026-04-23T16:59:06Z

@copilot apply changes based on the comments in this thread

Copilot · 2026-04-23T17:04:26Z

@copilot apply changes based on the comments in this thread

Applied all changes from the review thread in commit 8b50b90:

FileUploadInput.svelte: Added (issue) key to the {#each} block, changed filter to use object identity (currentIssue !== issue), and added an update hook to dismissOnDelete so the listener is rebound when the closure changes.
file-upload-input.spec.ts: Added a test that fires the _delete event on an issue card and asserts the element is removed.
bug3602.tsx (React): Imported Dispatch/SetStateAction directly from "react" (removing React.* namespace usage), fixed the escaped template literal (\${Date.now()} → ${Date.now()}), removed handleDelete and instead close over f.id in each card's onDelete handler.
bug3602.component.ts (Angular): Replaced filter with a removeFirstMatchingFile helper using findIndex so only the first matching filename is removed.

github-actions · 2026-04-27T16:11:04Z

PR Preview Action v1.8.1
🚀 View preview at https://GovAlta.github.io/ui-components/pr-preview-angular/pr-3842/
Built to branch `gh-pages` at 2026-04-30 19:50 UTC. Preview will be ready when the GitHub Pages deployment is complete.

github-actions · 2026-04-27T16:11:17Z

Preview links

Target	URL
Docs	https://govalta.github.io/ui-components/pr-preview/pr-3842/
React playground	https://govalta.github.io/ui-components/pr-preview-react/pr-3842/
Angular playground	https://govalta.github.io/ui-components/pr-preview-angular/pr-3842/

Built from commit aeaba12. Previews are removed automatically when this PR closes.

vanessatran-ddi

Looks good!

bdfranck

I looked at the changes...

✅ When I attempt to upload a file that exceeds the limits, I see the error on the file card.
✅ I don't see the error message below the drag-and-drop upload input.
✅ The error message aligns with our "File too large" error message content guidelines.

Looks good to me! 👍

willcodeforcoffee · 2026-04-29T20:41:18Z

@ArakTaiRoth ready for merge when you are! 🙏

ArakTaiRoth · 2026-04-30T01:55:20Z

@Spark450 In the story attached to this PR, you have "The FileUploadCard component is documented as a "subcomponent" and is not surfaced for users that may want to use it independently from the uploader. There should be examples that show both uploader and uploader cards."

I just want to check about this, as this requirement doesn't make sense to me. Reading this implies to me that we have File Upload Card as a completely separate component from File Upload Input and documented as such. That doesn't make sense to me because Card is only meant to be used with Input, and is not intended to be used independently. As this isn't included in the Acceptance Criteria, I just want to make sure that this is a mistake and not intended to be taken this way?

ArakTaiRoth · 2026-04-30T01:59:39Z

+    files: UploadedFile[],
+    detail: GoabFileUploadOnDeleteDetail,
+  ): UploadedFile[] {
+    const index = files.findIndex((f) => f.filename === detail.filename);


Here you're deleting files based off of filename while they're tracked in the html file by id. If 2 files have the same filename (which would work because tracked by id), deleting the second item will remove the first matching item instead of the one selected.

This doesn't happen in the React playground, because it deletes via id and tracks via id.

@ArakTaiRoth Good point. It is just for the PR code, but I updated it.

willcodeforcoffee · 2026-04-30T18:57:59Z

@Spark450 In the story attached to this PR, you have "The FileUploadCard component is documented as a "subcomponent" and is not surfaced for users that may want to use it independently from the uploader. There should be examples that show both uploader and uploader cards."

I just want to check about this, as this requirement doesn't make sense to me. Reading this implies to me that we have File Upload Card as a completely separate component from File Upload Input and documented as such. That doesn't make sense to me because Card is only meant to be used with Input, and is not intended to be used independently. As this isn't included in the Acceptance Criteria, I just want to make sure that this is a mistake and not intended to be taken this way?

Mark and I had discussed this. I was planning to do the documentation updates in a separate PR. That said, Vanessa just did a huge PR with a ton of documentation updates, including stuff for FileUploadInput and FileUploadCard and now I'm not sure its even necessary.

…d format Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: willcodeforcoffee <3766866+willcodeforcoffee@users.noreply.github.com>

Spark450 · 2026-05-01T14:02:47Z

@Spark450 In the story attached to this PR, you have "The FileUploadCard component is documented as a "subcomponent" and is not surfaced for users that may want to use it independently from the uploader. There should be examples that show both uploader and uploader cards."

I just want to check about this, as this requirement doesn't make sense to me. Reading this implies to me that we have File Upload Card as a completely separate component from File Upload Input and documented as such. That doesn't make sense to me because Card is only meant to be used with Input, and is not intended to be used independently. As this isn't included in the Acceptance Criteria, I just want to make sure that this is a mistake and not intended to be taken this way?

@ArakTaiRoth There has been a use case surfaced to me a few times where a team would want to use the upload card without the uploader. For example a worker could be reviewing a submission that includes uploaded files. Designers have expressed interest in showing those uploaded file (cards) on the page of that submission. I think its likely that they would need a this new feature to round out what they would want to do though.

willcodeforcoffee self-assigned this Apr 17, 2026

willcodeforcoffee added File uploader P2 Priority 2 (should have): Improves completeness and reduces the post-launch support load. labels Apr 17, 2026

This comment was marked as outdated.

Sign in to view

willcodeforcoffee linked an issue Apr 17, 2026 that may be closed by this pull request

Document FileUploadCard and fix invalid file upload card state #3602

Open

willcodeforcoffee force-pushed the eric/file-upload-input-error-card branch 3 times, most recently from c881917 to 6490d79 Compare April 22, 2026 21:25

willcodeforcoffee requested a review from Copilot April 23, 2026 16:37

willcodeforcoffee marked this pull request as ready for review April 23, 2026 16:38

Copilot started reviewing on behalf of willcodeforcoffee April 23, 2026 16:38 View session

Copilot AI reviewed Apr 23, 2026

View reviewed changes

Copilot started work on behalf of willcodeforcoffee April 23, 2026 16:59 View session

Copilot finished work on behalf of willcodeforcoffee April 23, 2026 17:05

willcodeforcoffee force-pushed the eric/file-upload-input-error-card branch from 8b50b90 to 5496f96 Compare April 23, 2026 17:18

willcodeforcoffee requested review from bdfranck and vanessatran-ddi April 23, 2026 17:24

willcodeforcoffee force-pushed the eric/file-upload-input-error-card branch from 5496f96 to 7d63a4d Compare April 27, 2026 16:08

vanessatran-ddi reviewed Apr 27, 2026

View reviewed changes

Comment thread libs/web-components/src/components/file-upload-input/FileUploadInput.svelte Outdated

willcodeforcoffee force-pushed the eric/file-upload-input-error-card branch from 7d63a4d to e4bfd74 Compare April 27, 2026 21:54

willcodeforcoffee requested a review from vanessatran-ddi April 27, 2026 21:58

vanessatran-ddi approved these changes Apr 27, 2026

View reviewed changes

willcodeforcoffee requested a review from vanessatran-ddi April 28, 2026 03:12

vanessatran-ddi approved these changes Apr 28, 2026

View reviewed changes

bdfranck approved these changes Apr 29, 2026

View reviewed changes

ArakTaiRoth reviewed Apr 30, 2026

View reviewed changes

fix(#3602): change FileUploadInput error state to match FileUploadCar…

aeaba12

…d format Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: willcodeforcoffee <3766866+willcodeforcoffee@users.noreply.github.com>

willcodeforcoffee force-pushed the eric/file-upload-input-error-card branch from e4bfd74 to aeaba12 Compare April 30, 2026 19:47

willcodeforcoffee requested a review from ArakTaiRoth April 30, 2026 19:48

ArakTaiRoth deleted the branch dev May 5, 2026 18:28

ArakTaiRoth closed this May 5, 2026

Conversation

willcodeforcoffee commented Apr 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Before (the change)

After (the change)

Make sure that you've checked the boxes below before you submit the PR

Steps needed to test

Uh oh!

This comment was marked as outdated.

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

willcodeforcoffee commented Apr 23, 2026

Uh oh!

Copilot AI commented Apr 23, 2026

Uh oh!

github-actions Bot commented Apr 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Built to branch gh-pages at 2026-04-30 19:50 UTC. Preview will be ready when the GitHub Pages deployment is complete.

Uh oh!

github-actions Bot commented Apr 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Preview links

Uh oh!

Uh oh!

vanessatran-ddi left a comment

Choose a reason for hiding this comment

Uh oh!

bdfranck left a comment

Choose a reason for hiding this comment

Uh oh!

willcodeforcoffee commented Apr 29, 2026

Uh oh!

ArakTaiRoth commented Apr 30, 2026

Uh oh!

ArakTaiRoth Apr 30, 2026

Choose a reason for hiding this comment

Uh oh!

willcodeforcoffee Apr 30, 2026

Choose a reason for hiding this comment

Uh oh!

willcodeforcoffee commented Apr 30, 2026

Uh oh!

Spark450 commented May 1, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

willcodeforcoffee commented Apr 17, 2026 •

edited

Loading

github-actions Bot commented Apr 27, 2026 •

edited

Loading

Built to branch `gh-pages` at 2026-04-30 19:50 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

github-actions Bot commented Apr 27, 2026 •

edited

Loading