• Type: Technical Task
    • Status: Closed
    • Priority: Minor
    • Resolution: Completed
    • Affects Version/s: None
    • Fix Version/s: None
    • Component/s: Documents & Media
    • Labels:
    • 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. 


      Figma Mockups


      Design Documentation

      Empty state image

      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. 

      Drop Target Events

      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


      Drop Target Loading

      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.





            • Votes:
              0 Vote for this issue
              0 Start watching this issue


              • Created:
                Days since last comment:
                10 weeks, 3 days ago


                Version Package