Create UI for File Upload, Part 1: Invoking the File Upload component

Purpose: To create a component within the Data Import landing page that will allow a user to 1) drag and drop or 2) browse and select one or more files to begin one or more import jobs.

As a staff person
I want to be able to upload files to the FOLIO Data Import app easily
So that I can begin the process of creating and updating existing FOLIO records in Source record storage, Inventory, MARCcat, and Acquisitions.

Notes:

• This component will be built in the Data Import app first, but should be as flexible as possible, to allow for a future dev team to turn it into a general app useable by any FOLIO app
• See wireframes and videos attached. This story holds all the related wireframes and videos. Subsequent stories will just hold the wireframes and videos necessary for that particular story.
  • 0-LandingPage File Upload Pane.PNG shows the 3rd pane of the Data Import Landing Page, as created in UIDATIMP-30
  • 1-Drop-interaction-prototype1.mp4 shows the overall action of how the component should behave in the Data Import app
  • 2-Upload files component.png through 7-Edit page with uploaded files.png show the general file upload component as specified for STCOM-333. The action Data Import component will vary slightly from this, as specified in the actual Data Import File Upload stories
  • 8-File Upload Prototype Action.mp4 shows the general file upload prototype action, as can be found here: https://pr.to/UNQZIR/
• If questions about styling details, please consult with Stephanie, cc: abreaux

Scenarios

1. Scenario 1
   • Given the Data Import app's Landing page
   • The third pane should be the drop zone for uploaded files and should invoke the new File Upload component whenever any files are dragged and dropped into the pane or browsed/selected from the button in the pane.
2. Scenario 2
   • Given the Data Import landing page:
   • When viewing the 3rd (right-most) pane
   • Then the User should see the UI for the initial portion of the File Upload component in the large shaded area:
     • Text: Drag and drop to start a new data import job
     • Button with text or choose files, allowing the User to browse to a location to retrieve a file
     • Include 15 px of padding around the shaded area, as per 3-Actual drop area - add 15px padding.png

Notes

• The component should allow for different actions to happen when the User selects the file and the file upload begins, so that developers in other apps can choose to remain on the drag and drop area or advance the User to another page. Data Import will advance the User to another page, which will be detailed in another story

Question for developers: If multiple files selected, should we require the uploaded files to all have the same file extension? We do not want them uploading different types of files and trying to start multiple different import jobs. If we do include this requirement, then we will need a scenario and wireframe for an error message/warning if they try to upload a mixed assortment of files.To be discussed. (Same question on UIDATIMP-35)

• Notes
  • The component should allow other developers to change the "Drag and drop..." text
  • The component should allow other developers to change the "or choose files" text of the button