WSTEAM1-994 - Adds custom file upload html and state handling

[HarveyPeachey]

Resolves JIRA WSTEAM1-994

Overall changes

Adds a custom file upload display, which allows management of adding and removing multiple files adding previews for images and icons for other file types.

Code changes

• Adds a custom file uploader button that invokes the hidden file input
• Changes state storage for files, to store them as an array of Files, instead of the input value
• Adjusts submission logic for files for state storage change
• Adds an ID for field labels, so aria-describedby can target labels
• Adds SVG icons for Upload, Delete
• Adds SVG icons as dataURI strings for Video, Audio and Documents
• Adds adds state and logic for removal of files
• Adds state and file reader logic for displaying thumbnails for images
• Adds styling for file component
• Adds unit tests

Testing

1. cd into ws-nextjs-app
2. Run yarn
3. Run yarn dev
4. Visit http://localhost:7081/somali/send/u130092370?renderer_env=test

Helpful Links

Add Links to useful resources related to this PR if applicable.

Coding Standards

Repository use guidelines

[HarveyPeachey]

This test is a little brittle, as it's not testing anything in the UI, due to state management being handled in the the context, only the arguments within the handleChange function are being tested here

[HarveyPeachey]

Same as previous brittle comment

[amoore108]

Looks really great. Huge piece of a work here, so great job tackling this 👏

Is it worth adding a Storybook story for this component too? Think its maybe the only input type that doesn't have a story.

[HarveyPeachey]

Looks really great. Huge piece of a work here, so great job tackling this 👏

Is it worth adding a Storybook story for this component too? Think its maybe the only input type that doesn't have a story.

Thank ya, I've added a story and the data for the somali page I've been testing on