File input (single / multi) - Question & Answers

[tbaker1026]

Questions / Answers

• This is a forum to ask questions and provide feedback for file input.

• Add your role and the team you are on when asking a question

• Click on the right hand side to subscribe to notifications to keep up to date on the conversation

[rhasselle-oddball]

Status update

forms-system fileInputUI/fileInputSchema pattern

PR: department-of-veterans-affairs/vets-website#37649
Includes most functionality from FileField. Working on getting this merged this week.

• handle encryption / password on file upload
• additional input accepted

TODO:

• fix failing tests
• regression testing on existing forms

forms-system fileInputMultipleUI/fileInputMultipleSchema pattern

• dependent on PR: File input fixes vets-website#37649
• draft PR in progress: add file input multiple as a pattern to the forms-system vets-website#38081

TODO:

• test functionality so far
• test for gaps
• complete functionality
• document supported features / expectations
• test as replacement in existing forms (10207)

forms-system API improvements

Concerns about 5 minute timeout when unauthenticated raised
PR for this: department-of-veterans-affairs/vets-website#37882

TODO:

• test and request feedback from interested parties

[candilemoine]

Product Manager for the Accredited Rep Facing team working on Accredited Representative Portal (ARP), a portal for accredited representatives to help veterans.

We've implemented Simple Forms App into ARP so that reps can submit claims for veterans. Currently, it is used for 686c and will soon have 526ez. Though 686c may not require as many documents, 526ez will have significant use of the multi-file upload. We're competing with third-party tools such as VetraSpec and VetPro. Right now, in order to match SEP, QuickSubmit, and other tools, this is what we are hoping for multi-file upload for supporting evidence:

• can upload more than one file at once
• can handle large file size around 100MB

[tbaker1026]

Also opened this Content Intake ticket to request guidance / content on best practices preparing the file to uploaded.

[Mottie]

We need to also check that PDF page size does not exceed 78" x 101".

In the appeals folder in vets-website, I modified a FileField component to display an error message returned from our backend code which makes an API call to lighthouse to validate PDFs (/uploads/validate_document endpoint). This endpoint makes the following checks:

• Document is a valid PDF (Note: Content-Type header value must be "application/pdf")
• Document does not have a user password (an owner password is acceptable)
• File size does not exceed 100 MB
• Page size does not exceed 78" x 101"

[it-harrison]

single and multi are complete. in order to test/deploy we still need to:

• cut new release of component-library (in progress)
• resolve CI test failures after release added to vets-website
• documentation
• ux review

[tbaker1026]

What's New
📢 We’ve updated the Ask Users for … Files pattern in the VA Design System and Forms Library

• Single & Multi-File Input Support options are now available in the forms library. Updated implementation guidance is available in the Code Usage section.

Forms library validation

• Mime-type and file extension verification (e.g., prevents my-pdf.png)
• UTF encoding validation for proper file handling

PDF Security Handling

• Automatic detection of encrypted PDFs
• User prompts for password entry when encryption is detected
• Required password authentication before backend processing and form submission

Error Handling

• When validation fails, clear error messages are automatically displayed to users.

File submission

• The pattern handles the submission to the endpoint and returns a response if there is an error.

Implementation Status

• We're currently testing the multi-file input functionality in the form upload tool and form 20-10207. Your team can begin implementing these new patterns from the forms library right away.
• For questions or implementation support, please refer to the updated documentation or reach out to the forms team. #platform-design-system channel.