Create UI for File Upload, Part 3: Action & Styling for "In Process" file uploads

Purpose: To describe the Browse button action and UI changes when file(s) begin to upload

Notes:

• This story extends work done in the UIDATIMP-33 and UIDATIMP-35 stories
• This story covers the behavior needed by the Data Import app. If the File Upload component becomes a general component, other developers may choose to allow different behavior
• See wireframes and videos attached. Styling in File Upload Clarifications is the final, approved styling
• If discrepancies between the text in the wireframes and text in the Jira story, use the text that is in the Jira story

Scenario 1

• Given the Data Import landing page:
• When a User clicks the "Browse" button
• Then FOLIO should open a new window, allowing the user to browse and select one or more files to upload
• Once one or more files have been selected, the window should close. Unlike the drag-and-drop scenario (UIDATIMP-35), no other UI change is needed once a User selects a file.
  * Selected and uploaded 15 files at once, got the scroll bar, all looks good. Upload looks to be speedy. I'll play with some larger files later.

Scenario 2 : one styling issue (file name overhang) that will be handled in UIDATIMP-38, so this scenario is OK

• Given the File Upload portion of the Data Import landing page:
• When a User Drops file(s) or Selects browsed file(s)
• Then FOLIO should begin uploading the file(s), and the File Upload area's UI should change as follows:
  • A card should be created for each file being uploaded , with the following data elements:
    • Icon (make this an optional element in the context of the central component) but OK will be handled in UIDATIMP-74
    • File name (with extension) but OK - will be handled in UIDATIMP-38
    • Progress bar for each file, starts as white, shades to blue to indicate upload progress; if we already have styling for a progress bar, use that styling
      **If multiple files are being uploaded, stack the blocks in the File Upload area, with the first file at the bottom and the last file at the top so fast that it's hard to judge, and I don't think it really matters too much

Scenario 3 several styling issues (file name overhang instead of wrapping, end-of-list component) that will be handled in UIDATIMP-38, so this scenario is OK

• Given the File Upload portion of the Data Import landing page:
• When a User "drops" the file(s) or selects browsed file(s),
• Then the User should be taken to the "Choose Job Profile" screen"
  • Standard header with Data Import app Icon and Name
  • Three pane layout, with second and third panes blank for now
  • First pane layout
    • Cards for in process uploading and upload completed files, oldest card at the bottom, newest card at the top.
    • Note: In process card format looks OK, except for file name going outside the box instead of wrapping to the next line. See attached File Name Overhangs.PNG for an example. Will be handled in UIDATIMP-38.
    • Note: The "completed" formatting is being handled in UIDATIMP-38.
    • Note: End of list icon and text below the last card being handled in UIDATIMP-38.
    • Vertical scroll bar for the pane when the list of cards exceeds the screen size

Notes

• Card format for Completed cards should follow the styling in UIDATIMP-38, including the delete confirmation modal and toast
• The component should allow for these "In Process and Completed" cards to appear on different screens in FOLIO, depending on what an individual app needs. Developers in other apps may choose to remain on the File Upload area or advance the User to another page. Data Import will advance the User to this page.
• This first pane styling may be refined when the second and third panes for this screen are finalized
  • Depending on the card width, content can either be inline or in rows (icon and file name, then progress bar underneath). Cards should be responsive to resizing
  • There will be a separate story for the problem scenario when a user tries to upload multiple files with different file extensions (UIDATIMP-46)
  • Handle error in case of issues with file upload.