feat: Select new file

[oliverroick]

Resolves #59

• Adds new component AudioResetForm
  • renders the reset button
  • handles the workflow: Select new file -> confirmation modal -> select file. The implementation is a bit awkward but it's the only way to fulfil the requirements from the ticket: I create a file input in memory, which isn't mounted to the DOM and fire the click event on that input to open the file-select dialog.
• Reset the results when a new file is selected
• Reset the clip when a new file is selected

[oliverroick]

@LanesGood I addressed the comments

[oliverroick]

This workflow technically doesn't have a UI to display the error.

For the initial file select, we do the following:

1. Display the AudioSelectForm
2. User selects file
3. AudioSelectForm validates the file, and a. displays an error in the form if invalid, or b. sets the file in the page state, which then renders the spectrogram

If you reset the file it never uses the AudioSelectForm, everything happens outside any React components until we set the file, which just replaces what we show in the spectrogram. There's no way to load the AudioSelectForm with the file and display the error.

What we can do:

• Once you click "Upload new file," display the upload form and go through the standard validation.
• Display the error before or after the "upload new file" button, which might be confusing because we're still showing the spectrogram of the original file, which might already be clipped and valid

[LanesGood]

@oliverroick I think the second option you've proposed makes sense, as long as there are indicators/divisions to help users understand that the error is for the new file.

As a UI proposal, would something like the below be a logical error state?

[oliverroick]

@LanesGood Added the error message