Add more robust validation, similar to `FileField`, for `VaFileInputMultiple`

[JoshingYou1]

Bug Report

• [X] I’ve searched for any related issues and avoided creating a duplicate issue.

What happened

What I expected to happen

Reproducing

• Formation version: 1.0.1
• Device: Macbook
• Browser: Google Chrome

Steps to reproduce:

1. Create a VaFileInputMultiple component.
2. Add the following code to the component's attributes: accept=".pdf, .doc, .docx, .jpg, .jpeg, .rtf, .png"
3. Change the file extension of a .gif file to .doc and upload it. It should let allow you to upload it with no validation errors, which is not the desired outcome.

Urgency

How urgent is this request? Please select the appropriate option below and/or provide details

• [X] This bug is blocking work currently in progress
• [ ] This bug is affecting work currently in progress but we have a workaround
• [ ] This bug is blocking work planned within the next few sprints
• [ ] This bug is not blocking any work
• [ ] Other

Details

FileField Behavior VaFileInputMultiple Behavior

[caw310]

Hey team! Please add your planning poker estimate with Zenhub @Andrew565 @ataker @harshil1793 @it-harrison @jamigibbs @micahchiang @powellkerry @rsmithadhoc

[jamigibbs]

Hi @JoshingYou1. What is the FileField component? This is not something that is currently in the VA design system. Can you link to it?

[JoshingYou1]

Hi @JoshingYou1. What is the FileField component? This is not something that is currently in the VA design system. Can you link to it?

Maybe component is the wrong word? Here's the link: https://github.com/department-of-veterans-affairs/vets-website/blob/main/src/platform/forms-system/src/js/fields/FileField.jsx

[micahchiang]

@JoshingYou1 - Teams do have the ability to pass custom validation functions to VaFileInputMultiple through the use of the onVaMultipleChange prop. Here are the docs which show an example of this.

[JoshingYou1]

@JoshingYou1 - Teams do have the ability to pass custom validation functions to VaFileInputMultiple through the use of the onVaMultipleChange prop. Here are the docs which show an example of this.

Yes, I've read through the docs. Is there a straight-forward way to integrate what is in FileField into the onVaMultipleChange prop though?

[micahchiang]

The prop accepts a callback and exposes an event that contains file information. What you could probably do is either use these file validators directly in whatever call back you pass in, or adapt them to your specific needs and then pass them in.

FileField is pretty tightly coupled to react-json-schema, so integrating what's in that file directly probably won't work. The validators I linked to are more agnostic.

If you're looking to use multiple file input in a form that uses react-json-schema, the forms team does provide a va file input field with the necessary bindings, though I'm not sure if adapting va file input multiple is on their roadmap.