Upload files Table

[FledgeXu]

Goal

The goal of this PR is to completethe Upload files Table in #40.

Abstract

• Upload files Table
  • Table view with data
  • File upload progress
  • File status change
  • Metadata display (including hover card)
  • Edit icon (non-functional)
  • Delete icon (functional)

[rgaudin]

Starting to look nice!!

• UI glitch: Upload button on top of alert message (at least when there are two messages – see screenshot)
• Need a UI feedback on draggable-zone so we know it's the right place to drop it. We do have it in the DragToStart mode (background change). I like that the whole table allows droping files 👍
• Simplify Date display (shorter, remember most of this will happen within a week period)
• We need a user-confirmation on delete (both single and multiple-select)
• A feedback alert message on deletion: “File xxx has been removed” and “(2) files has been removed”
• Table sorting/ordering should be figured out now. It most likely will have significant impact on implementation so better do it now.
• Upload should be circular so it can have a fixed size and be relevant even when small. Please check if there's an existing usable component out there
• File types should be more user-friendly, as in the mockup. I think there are libs for that (human-filetypes)
• Status should not be textual: we have three possibilities:
  • check mark icon when uploaded (REMOTE -- and LOCAL until S3 File Upload #35)
  • red cross icon when it failed to upload. In that case hovering on the icon gives the reason (from the xhr response)
  • progressive spinner/progress during upload (as is now). Add file Upload Status Update #36 will make it smarter in that once uploaded (LOCAL) it will start an interval to check status update with infinite spinner until REMOTE
• Couldn't see the metadata hover card.
• In-template code should be minimal: retrieving data and passing it through filters or stuff like this. We want code to be maintained in the script section.

[FledgeXu]

Couldn't see the metadata hover card.

What's weird. This should work fine……
You just need to put mouse on metadata part and it should show up properly.

[rgaudin]

I've tried every single pixel in the row 😅

[FledgeXu]

I see. The file has to have metadata information and then you put mouse on the metadata part, the hover card will appear.

[rgaudin]

Allllllmost there 😉

[rgaudin]

Please fix comment and string. I think the dev compose needs the proper quota

[rgaudin]

🎉 👏