Create UI for File Upload, Part 4: Styling for Error: multiple file types

Purpose: To describe the UI changes when a user initiates a file upload for multiple files that do not all have the same file extension

Notes:

• This is the LAST UI story in the File Upload set of UI stories.
• See wireframes and videos attached.
• If discrepancies between the text in the wireframes and text in the Jira story, use the text that is in the Jira story

Scenario:

• Given the Data Import landing page:
• When a User begins to drag or select more than one file in the 3rd (right-most) pane of the data import landing page, and the files do not all have the same file extension,
• Then FOLIO should react as follows:
  • Display a modal as shown in the attached wireframe
  • If the user presses the "Cancel" button, they should return to the blank file upload area, with no new files uploaded (basically starting over)
  • If the user presses the "Choose other files to upload" button, they should return to a browse window with no files marked, so that they can start the browse process over, to select other files to upload
  • If the user again tries to upload files with different file extensions, the modal should display again

NOTE: for Data Import, we want to stop the user from uploading different file types at the same time. Other apps may not want to stop users from uploading multiple file types at the same time, so this should be an option that the app can require or not.