File Input Enhancement

[jdinh8124]

Type of Issue:

• Enhancement: New feature or request

Issue Creator Checklist

• This issue has been thoroughly documented below; a developer should be able to understand the issue by reading it.

Background

The File Input component was created using the USWDS implementation and JS.

Proposed Approach

As it is in our React component library, we based the file component off the USWDS implementation and the FIGMA. There are a few proposed UX/UI enhancements on top of the existing code that would create a better experience

• The USWDS drop indicator once we have files queued up isn’t really sufficient, it could display a better visual feedback
• We can only replace all files at once, and not one by one
• There is no remove files button
• Dropping a new file replaces all of the previous files. See if there's a way to continue to drop more files as we go along

Value

As is, the file input only works as a one time use file input, and it is not something that a use can continue to iterate upon such as going back to add additional files as needed.

Docs

Original Figma
USWDS Component