[FR] Multiple upload on dashboard

[sync-by-unito]

User Story

As a content creator, I want to be able to upload multiple images at once to dashboard so that I can save time and streamline the process of updating my page's gallery or asset

Expectation

User could multiple upload on dashboard

Additional information:

Dashboard figma

Acceptance Criteria:

1. Select Multiple Images: The user should be able to select multiple images from their device by holding down the 'Ctrl' (or 'Command' on Mac) key and clicking on the desired images, or by selecting a range of images in a folder.
2. Drag and Drop Functionality: The user should be able to drag and drop a selection of multiple images into a designated area on the dashboard.
3. Progress Indicators: Each image should have a progress bar or indicator showing the upload progress.
4. Error Handling: The system should handle errors gracefully, displaying relevant messages if an upload fails (e.g., due to size limitations or unsupported formats).
5. Confirmation of Upload: Once the upload is complete, a confirmation message should be displayed, and the images should appear in the appropriate section of the dashboard.
6. Limit on Number of Images: There should be a limit on the number of images that can be uploaded at once, to prevent server overload or performance issues.
7. Thumbnail Preview: After selection and before uploading, thumbnail previews of the selected images should be displayed for final confirmation.

User Journey: (For reference only, provided by ChatGPT.)

1. The content manager logs into the dashboard.
2. They navigate to the section where images can be uploaded.
3. They select multiple images from their computer or drag and drop them into the upload area.
4. The manager sees a preview of the images and confirms the upload.
5. The images are uploaded with progress indicators showing the upload status.
6. Once the upload is complete, a confirmation message is displayed, and the images are visible in the dashboard.

┆Issue is synchronized with this Asana task by Unito
┆Created By: Kenny Hung

[sync-by-unito]

➤ Kenny Hung commented:

Scott Yan (cc @this task will arrange into 1120 sprint.

[sync-by-unito]

➤ Ethan Wu commented:

Kenny Hung this task has a dependency:

need to have a parser plugin available and ready to use. progress can be found in this thread: https://dt42-numbers.slack.com/archives/C05UCBW1CE4/p1700559552449399?thread_ts=1700557383.053539&cid=C05UCBW1CE4 ( https://dt42-numbers.slack.com/archives/C05UCBW1CE4/p1700559552449399?thread_ts=1700557383.053539&cid=C05UCBW1CE4 )

also for this feature the current priority is the following:

1. single upload with parser
2. multi-upload with parser

full miro flow can be found here: https://miro.com/app/board/o9J_knEiIYo=/?moveToWidget=3458764570585216308&cot=14 ( https://miro.com/app/board/o9J_knEiIYo=/?moveToWidget=3458764570585216308&cot=14 )

https://miro.com/app/board/o9J_knEiIYo=/?moveToWidget=3458764570585216308&cot=14 ( https://miro.com/app/board/o9J_knEiIYo=/?moveToWidget=3458764570585216308&cot=14 )

[sync-by-unito]

➤ Kenny Hung commented:

Ethan Wu

Thanks for updating the progress. Just confirm, the multiple uploads be implemented in this sprint or just parser plugin?

[sync-by-unito]

➤ Ethan Wu commented:

Kenny Hung everything depends on the parser.

currently the priority is the following

• hotfix
• single upload with parser
• multi-upload with parser

the aim is to finish hotfix today and have single upload done by tomorrow. but again it all depends on the parser.

[sync-by-unito]

➤ Ethan Wu commented:

maybe we can have multi-upload done next week if parser is done / single upload is implemented successfully

[sync-by-unito]

➤ Ethan Wu commented:

Kenny Hung i can have hotfix for dashboard ready my the afternoon.

[sync-by-unito]

➤ Ethan Wu commented:

Kenny HungSherry ChungTammy Yang

Select Multiple Images: The user should be able to select multiple images from their device by holding down the 'Ctrl' (or 'Command' on Mac) key and clicking on the desired images, or by selecting a range of images in a folder.

=> this can be handled by bubble multi-uploader component

Drag and Drop Functionality: The user should be able to drag and drop a selection of multiple images into a designated area on the dashboard.

=> this can be handled by bubble's multi-uploader component

Progress Indicators: Each image should have a progress bar or indicator showing the upload progress.

=> this can be handled by bubble's multi-uploader component

Error Handling: The system should handle errors gracefully, displaying relevant messages if an upload fails (e.g., due to size limitations or unsupported formats).

=> will need to know the following to provide proper error message:

• file size limitation
• unsupported file formats

Confirmation of Upload: Once the upload is complete, a confirmation message should be displayed, and the images should appear in the appropriate section of the dashboard.

=> will implement. need to confirm understanding:

• Drafts Folder will be created => will contain all images that are 'pending', 'failed'. If successful entry will be removed from draft folder
• When file is registered will appear in created tab

Limit on Number of Images: There should be a limit on the number of images that can be uploaded at once, to prevent server overload or performance issues.

=> will need to know what the limit on the number of images uploaded at once is.

Thumbnail Preview: After selection and before uploading, thumbnail previews of the selected images should be displayed for final confirmation.

=> can include this as part of the popup confirmation.

[sync-by-unito]

➤ Sherry Chung commented:

Ethan Wu for above message. Is there any item need ti discuss and confirm first before you start the implementation?

(Sorry I know you've written down all the detail information. To prevent I missed something, let me know which need be clarified first)

[sync-by-unito]

➤ Ethan Wu commented:

Sherry Chung no problem. I can summarize

1. what is the file size limitation and what are the unsupported file formats? (this is for the error messaging)
2. what is the limit on the number of images uploaded at once?
3. thumbnail preview: is it ok to have the thumbnail preview as part of the popup confirmation?

[sync-by-unito]

➤ Sherry Chung commented:

Ethan Wu

1a. file size limitation

→ follow the account's subscription plan for each file size

1b. supported file formats

→ follow the same formats we used for single file upload (unless you encountered any problem with it, then we could discuss)

2. limit for no. of images can upload at once

→ Maybe we can just set the limit by ourselves? Please suggest the limitation during your dev progress, considering the performance should not be altered a lot.

3. I think it's better that user can see the thumbnail, so that he can know which is uploaded, which is not. Raise the discussion again if you encountered problem during implementation.

cc Tammy YangScott Yan

[sync-by-unito]

➤ Sherry Chung commented:

Ethan Wu another suggestion for #2. Maybe you can start with 20 for the file numbers limitation first. I think it’s a general numbers

[sync-by-unito]

➤ Ethan Wu commented:

i just checked. bubble multi-uploader upper limit is 20 files so it can't go above that. will set it to 20 to start

[sync-by-unito]

➤ Ethan Wu commented:

Post Demo Meeting Summary:

1. Change Upload Captures text to "Review Upload" => multiupload review view
2. Remove Back Arrow in Upload Captures Page
3. Add tool tip for "x" icon in multiupload review view
4. Add flavor text to "Review Upload" Page => Inform users that their assets will be auto-parsed
5. Add flavor text to "Draft" folder (grid and list view)
6. Add tool tip for "x" icon in Draft Folder => for failed assets

[sync-by-unito]

➤ Ethan Wu commented:

Screenshot summary

1. Hide Instruction Text when uploading on Multiuploader => this solution is more of a workaround. Bubble's Multiuploader component doesn't have too many customization options as a result it isn't currently possible to detect when assets are in loading state (single Fileuploader has this function). to workaround we use css to hide the text. Have already reached out to the Bubble Support team to see if there is a better way to work with their component.
2. Review Upload page w/tool tip. Can see "Review Upload" text + flavor text + tool tip
3. Draft (Grid) with flavor text
4. Draft (list) with flavor text
5. Draft (list) with sample failed asset to demo tool tip
6. Draft (grid) with sample failed asset to demo tool tip
7. Additional screenshot of Review Upload page w/tool tip

[sync-by-unito]

➤ Ethan Wu commented:

demo claap of multi-uploader: https://app.claap.io/numbers-protocol/capture-dashboard-multi-uploader-c-O35CsUM4Uy-mgHmt577AD8s ( https://app.claap.io/numbers-protocol/capture-dashboard-multi-uploader-c-O35CsUM4Uy-mgHmt577AD8s )

[sync-by-unito]

➤ Kenny Hung commented:

Ethan Wu (cc Tammy YangSherry Chung)

Just confirm, does this release include let user edit individual images detail information before multiple asset registering?

[sync-by-unito]

➤ Ethan Wu commented:

No it doesn't include it