Type: Technical Task
Affects Version/s: None
Fix Version/s: None
Component/s: Documents & Media
Sprint:LIMA | #15 | Mar03-Mar24, LIMA | #16 | Mar24-Apr14, LIMA | #17 | Apr14-May05
This spike will be the design solution for the LPS-110153 ticket and use case of this component.
The old uploader had a drop zone and an empty state, all inside a modal.
This new design will have a new empty state image inside the drop zone that represents the drag & drop feature.
For the image selector which accepts only image files, it will be represented by the image icon.
For the other general cases that accept multiple files such as documents, zips and images it will be represented by a document icon.
Mouse Hover: the background of the drop target will change the background style but the border style will be the same.
Mouse Click: Clicking in any place of the drop zone will activate the system finder.
DragEnter: when the user drags a file inside the drop zone the background and border styles will change.
DragEnd: releasing the file will end the interaction and the Drop Target will change state to the loading state
This state will have a text for the "loading" state, a progress bar and a cancel button.
Multiple upload in this case is not allowed so the only action will be to cancel the current upload and start a new one OR wait until it finishes to upload a new one.
Image Preview: once the upload and loading is completed, the modal will change to the image preview.