Uploader component design

[nimishavijay]

As discussed in nextcloud/photos#1785 the uploader component needs to work across all screen sizes. After discussing with @jancborchardt and @szaimen, here is what it could look like:

• On desktop and large screens, just show the progress bar as it is.
• On mobile, it depends on the use case. For eg. in Talk, since there is ample horizontal space, it could just be the progress bar that appears below the associated element.
• For Photos and Files, we could use the circular progress bar seen for uploading in ios, or for indicating the number of characters while composing a tweet on Twitter (screenshots attached).
  • This would be used when there is not enough space for a linear progress bar. It could appear next to the associated element.
  • It can be in the same style as the linear progress bar (--color-primary-element color and --color-background-darker bg).
  • Tapping on this element would show an action menu with 2 entries, 1 line with the text info ("a few seconds remaining", etc), as well as the second option to "Cancel upload"

What do you think? @skjnldsv :)

[jancborchardt]

@nimishavijay FYI I did a small adjustment:

Tapping on this element would show an action menu with 2 entries, 1 line with the text info ("a few seconds remaining", etc), as well as the second option to "Cancel upload"

[skjnldsv]

Could we have mockups of what it would look like in the following state please?
Not just inspiration, but real design references to use for the UI :)

1. No upload ongoing with the add button visible ?
2. Upload ongoing
3. Something went wrong during the upload
4. Upload finished

[marcoambrosini]

So here's a first draft. I think that the progress part of it should be implemented in the NcProgress component and imported from there into this wrapper as it would be nice to have the circular progress for other application too.
The progress would wrapped in a NcButton component and all icons are 30px in diameter so that they can fit nicely in 44px tall rows, list items and so forth.

No upload ongoing with the add button visible ?

@skjnldsv what do you mean by this?

[skjnldsv]

No upload ongoing with the add button visible ?

@skjnldsv what do you mean by this?

A mockup where no upload is in progress and we can see the add button

[skjnldsv]

@marcoambrosini thanks for the mockups!
Can you maybe show them in action? Like with the UI around it? I find it harder to really grasp the expectations.
ideally something looking like the initial mockups in photos 🙏

[marcoambrosini]

Ok, sorry I thought that what was needed was already established but I see now that it's a wider problem that needs solution.
Our competitors use a small collapsible dialogs placed at the bottom of the screen and they work great. I'm going to work on something like that as opposed to this small indicator.

@skjnldsv I have a couple of questions: what kind of information about the upload do we have available in the front-end? For example, if I'm doing a batch upload, do I have the progress of every file in the batch? If not do we have at least a confirmation of each uploaded file?
Thanks for the info :)

[skjnldsv]

You will know:

• The queue size
• The overall progress
• The current queue status (initialized, uploading, assembling, finished, cancelled or failed)
• The queue list of uploads

And for each upload in the queue you can request those same stats but for the file only.

[marcoambrosini]

So @skjnldsv as a first step we decided to have the component mentioned above next to the add button, both in photos and files. We will iterate and improve over time but for now we're going to keep it simple.

Both error and success state should last for 3 seconds and fade out.

[skjnldsv]

Please note that the second schreenshot doesn't use this component, so we can take the first one as refrerence only

[jancborchardt]

@skjnldsv which of the points here are still relevant after merging nextcloud/server#39945 ? :)

[skjnldsv]

All of them, this was not scheduled for 28