[CST] Figure out what post-upload state should look like in the Files tab

[skylerschain]

Value Statement

As a Veteran I want to be able to upload evidence and have it be clear what I'm uploading So that I can be assured the right files are getting submitted to the claim

---

Engineering Notes

This ticket relates to https://github.com/department-of-veterans-affairs/vets-website/pull/27749.

(2/2/24) @pmclaren19 spoke with the platform design team and there is a multiple prop in the works for the V3 VAFileInput but it is still being worked on. We expect it to be release in 2 - 4 weeks and then we can update this ticket design.

New Feature

We're reformatting our Files tab and updating the File Uploader component to the new V3 version.

Design

As part of this, we need to mock up what the post-upload state should look like. In the version @pmclaren19 created initially, there are two different confirmation elements showing the user which file they uploaded. This feels unnecessary. Design will work on figuring out a more elegant solution.

Current implementation

Open questions

• Is still necessary to ask what type of document it is? (Assuming yes)
• Is it still necessary to ask for PDF passwords? (Assuming yes)
• Does VADS have guidance on how to incorporate the the above elements into the recommended file upload pattern?

Current Assumptions

• The design system component that ultimately gets updated and approved is comparable in complexity to the current design approach
• Skyler and Jacob will open up a conversation with the Platform team about updating the sitewide component to share feedback, influence requirements, and finally get a timeline estimate for when it will be available.

Tasks

• [ ] Confirm that the password and doc type requirements are still necessary.
• [ ] Reach out to VADS to see if they have guidance for this.
• [ ] If they do, use that. If not, create our own solution that adheres the V3 file upload pattern.
• [ ] Mock up the confirmation page as well. Consider making the language change proposed in https://github.com/department-of-veterans-affairs/va.gov-team/issues/74611

Definition of Done

• [ ] Meets acceptance criteria
• [ ] Passed E2E testing (90% coverage)
• [ ] Passed unit testing (90% coverage)
• [ ] Passed integration testing (if applicable)
• [ ] Code reviewed (internal)
• [ ] Submitted to staging
• [ ] Team approved production verification process
• [ ] Product performs functional QA and verifies acceptance criteria was met
• [ ] Engineering identifies staging users required to test and shares account and credentials with product

Acceptance Criteria

• [ ] Revised version of file upload confirmation added to the Evidence Request spec.
• [ ] V3 VAFileInput allows for multiple files to be uploaded
• [ ] Users are able to see the files they've selected for upload and distinguish each file from one another
• [ ] Users are able to upload pdfs that are encrypted
• [ ] If a user adds a file and then changes their mind, they'll be able to remove that file without having to refresh the page
• [ ] Users are able to upload multiple files
• [ ] Users are able to clearly specify the file types they are intending to upload

[skylerschain]

@pmclaren19's Slack thread for reference: https://dsva.slack.com/archives/C01DBGX4P45/p1709219006502679?thread_ts=1709154979.517099&cid=C01DBGX4P45

[jacobworrell]

@skylerschain @pmclaren19 do we still need this ticket or is the assumption that the v3 component will eventually include this functionality?

[pmclaren19]

This still needs to be worked on once platform has made their changes as we will still need to make design changes and eng changes to determine how we want the file upload to look.

[PLATFORM DESIGN BUG] - Unable to upload multiple files at the same time https://github.com/department-of-veterans-affairs/vets-design-system-documentation/issues/2549 has been split into 3 tickets...

• va-icon-button - https://github.com/department-of-veterans-affairs/vets-design-system-documentation/issues/2641 (needed for file input)
• update file input - https://github.com/department-of-veterans-affairs/vets-design-system-documentation/issues/2642 (needs to happen before multiple file input) multiple file input - https://github.com/department-of-veterans-affairs/vets-design-system-documentation/issues/2643
• unable to delete a file once its been added https://github.com/department-of-veterans-affairs/vets-design-system-documentation/issues/2511

[PLATFORM DESIGN BUG] - Unable to delete a file once its been added https://github.com/department-of-veterans-affairs/vets-design-system-documentation/issues/2511 this work has been added into this ticket...

• USWDS - Feature: File Input on Cancel resets input

[PLATFORM DESIGN BUG] - There isnt a card design that matches and works well with this component https://github.com/department-of-veterans-affairs/vets-design-system-documentation/issues/1578 this work has been added to this ticket...

• Staging Review: (DS) Converted File Input Component

[jacobworrell]

@pmclaren19 @skylerschain is this something we need to work on now?

[pmclaren19]

@jacobworrell @skylerschain now that va-file-input-multiple exists I dont think we need this ticket anymore and it is replaced with https://github.com/department-of-veterans-affairs/va.gov-team/issues/87835. LMK your thoughts!