Server: Add an upload progress bar in "File drop (upload only)" shares

[GetBoz]

Feature request

When uploading a big file in a "File drop (upload only)" share, we have no idea of the remaining upload time.
It would be a great enhancement to add a progress bar +remaining upload time, like in other uploads.

[MorrisJobke]

cc @nextcloud/designers

[MorrisJobke]

cc @nextcloud/javascript maybe somebody from you want to check this out, but maybe first have an UI mockup ;)

[EmilyLove26]

I would also like to see this.

[MariusBluem]

I would also like to see this.

You may also like to code this 🚀🙈

[EmilyLove26]

Unfortunately, I know nothing about PHP.

[tcitworld]

Good thing this requires javascript skills then. :trollface:

[EmilyLove26]

Just goes to show I'm not the right guy for the job. I didn't even know. Unfortunately, I don't know much about javascript either. I simply commented my support for this ticket. Get it back in the spotlight.

[jancborchardt]

@lcalaresu maybe something for you, since you do the file upload for the Mail app with nice progress bars too? :)

[Espina2]

I can suggest this, https://github.com/jacoborus/nanobar

I will make the UI mockup. Anyway can post the exact specific page?
I can even do the javascript part, if I see any way to make a dev environment faster, like a docker image.

[lcalaresu]

@Espina2
Why not just use jquery-ui since it is already included in nextcloud server ?

[jancborchardt]

Yup, we shouldn't necessarily include more libraries cause it will lower performance.

@lcalaresu as said, feel free to explore. :)

[Espina2]

@icalaresu Go ahead, I didn't use Jquery to much those days, and I don't even know that JqueryUi has used here. Since @jancborchardt said to you I'm backing off.

[lcalaresu]

I could use the same simple progress bars that I am using on the mail app, what do you think:

• ongoing upload label is blue, with a progress bar,
• label and progress bar become red when an error occurred,
• when everything went well, label goes back to the "normal" colour, and the progress bar disappear.

However, files dropped are usually larger than email attachments, so remaining time or percentage status would definitely make sense, but which one is better?
I would say remaining time is better, but could be not very reliable sometimes... Percentage is simpler but more reliable.

• Fig.1: Only display percentages, at the right of the filename to save space
• Fig.2: Only display percentages, but under the progress bar
• Fig.3: Display remaining time (under the progress bar is the only option I think, if anyone has another idea)

What do you think ? cc @nextcloud/designers

[EmilyLove26]

Not a designer, but my vote is on fig 3, though I do like fig 1 as well. Is it possible to combine the 2?

[andreasjacobsen93]

I like Fig. 1 the best, clean and easy to read.

[jancborchardt]

@lcalaresu good stuff. Showing the remaining time is best since the bar already shows the percentage.

Some changes:

• While uploading, show the filename in normal text color instead of blue
• Show the filetype icon already when uploading
• In error states, show .icon-error left next to the error text, or instead of the filetype icon
• Left-align the time remaining text and error message, that makes it nicer to read
• Make the secondary text normal color and half-transparent, just like the secondary text elsewhere (File extensions, Mail app, Personal settings, etc)
• Use the same style for the bar as in the new quota bar of the Files app: grey bar for full width (no border), and 3px rounded corners
• Probably separate enhancement, but there should also be a cancel function on the right.

Does that work @lcalaresu? Thanks for your great contributions!

[lcalaresu]

@jancborchardt :

Use the same style for the bar as in the new quota bar of the Files app: grey bar for full width (no border), and 3px rounded corners

Yes, I used that one first, but I can barely see the grey part on my screen (that is why I added the borders)... Maybe I need to calibrate my screen :smile:

I think the cancel function should indeed be added later, coz I am not sure how to do it with the current librairies.

Here is the new version:

[jancborchardt]

Looking good! Only two things:

• The bar still needs 3px border-radius
• Both the bar and the text under it should start a bit more to the right, so they are left-aligned with the filename. The icon could be vertically centered (moved down) a bit for visual balance.

[lcalaresu]

I lost my harddrive a few days back... not sure I can contribute to that one quickly :sweat:
If it's urgent and someone wants to do it, go ahead!!

[k1ngf15h3r]

any news about this feature? really like the idea but I am not a developer so I can not assist in coding this. @lcalaresu is your harddrive in any way accessable? maybe testdisk could recover data

[CubicalMarks]

any news about this feature?

I second this. This feature would be tremendously useful.

[jancborchardt]

@lcalaresu did you not push to a branch? Or manage to recover the data? Your contribution here would be much appreciated. :)

[skjnldsv]

@jancborchardt

The bar still needs 3px border-radius
Both the bar and the text under it should start a bit more to the right, so they are left-aligned with the filename. The icon could be vertically centered (moved down) a bit for visual balance.

We should add a specific class for that and some guidelines in the dev docs!

[jancborchardt]

@skjnldsv yep, exactly! We can start from the quota bar style. :)

[skjnldsv]

@jancborchardt And support the 'progress' html5

[skjnldsv]

html5 progress support have been implemented by #6669

[sunjam]

In my .02 it would be helpful for the uploader to see not just per per file progress, but an overall estimation of time left for the upload. I’ve found users can get antsy when updating from their phone data plan, etc.

Uploading 12 of 100 files.
Estimated 15 minutes

[c0fe]

Having used in business the dropbox feature in Nextcloud many users found it confusing and not informative of what is going on. Certain files failed during upload with 0 information as to what happened.

meganz/webclient is open and provides a good information on what is uploading.

[sunjam]

@c0fe. Agreed, I was thinking of that as probably a different issue, but it
would be great for the server admin to get an activity feed of which files
failed to upload off a file drop. Right now that info is only displayed to
the client in their web browser.

On Thu, Mar 1, 2018 at 6:25 AM c0fe [e-mail] wrote:

Having used in business the dropbox feature in Nextcloud many users found
it confusing and not informative of what is going on. Certain files failed
during upload with 0 information as to what happened.

meganz/webclient is open and provides a good information on what is
uploading.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/nextcloud/server/issues/4164#issuecomment-369607340,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABtFZjjATePgKKfs8WLoJdJgWTrCWQ9yks5taATSgaJpZM4MucWj
.

[c0fe]

@sunjam i have had files fail with the only feedback being an exclamation mark icon and that's all.

[skjnldsv]

Let's implement this for 14!

[c0fe]

@skjnldsv what are your thoughts on the uploader utilized by mega.nz?

[skjnldsv]

It seems very neat.
Maybe too much informations but we could do something close to that.

[c0fe]

@skjnldsv too much information? how so?

[skjnldsv]

No need for status as a text, icons are enough. ETA & spinner on the left & circular progress on the left can be merged into one item (single progress bar). No need for the Type, the extension and file name should be enough. :)

[sunjam]

@skjnldsv it would great if the admin could also receive that info you screenshot of which files succeeded and failed, especially errors of files that did not upload via filedrop. I went on a trip recently and created a file drop for photo sharing with random people A ton of photos failed to upload, but I cannot tell my friends which ones...

[skjnldsv]

It depends on what is he failure related to. If it's a connectivity issue, there's no way we can let the admin know automatically. Nonetheless, if the upload stops in the middle, it could probably be done. Maybe not a priority tough :)

[c0fe]

@skjnldsv maybe icons are enough for you or me but the thing is the average user needs text. It is helpful.

I do not think that the design mega.nz has is cluttered, it is informative and good.

[c0fe]

@skjnldsv if connectivity, it should log the fact that client x established connection, client x began upload file y, connection with client x dropped.

[sunjam]

Issue #2019 could also benefit filedrops so anonymous comments could be left.
Example: _Our soccer video failed to upload. Sorry._
Example: anonymous comment could copy pasta error output in their browser to admin or user.

[c0fe]

@sunjam not sure, most of the users i have seen won't be bothered to do this at all.

[sunjam]

@c0fe Help me out as you just mentioned desiring better reporting in issue #8586. Do not undermine the need for better reporting. We need it!

What if, at the completion of uploading (with errors) a button button popped up to say:

This could send a copy of the log to the respective user/admin that would otherwise be seen by the anonymous uploader in their browser.

[c0fe]

@sunjam in my experience users are very uninterested in taking extra steps to let the admin know if anything went wrong and if they do they really do not provide additional information other than "it didn't work" or "it isn't working".

Having mechanisms that alerts the admins is a better alternative in my opinion.

[c0fe]

@skjnldsv has this been started on or is there some internal talks about this? I am wondering if I should just start on this and then issue a pull request.

I was considering just implementing the webclient mega uses now. what are your thoughts?

[skjnldsv]

@c0fe I did not start this yet. Feel free to go for it if you want! :)

[MorrisJobke]

I still doubt, that sending the admin information here will help at all. There is nothing an admin can do (neither has the admin the files, nor does the admin know whom to ask). I would improve the user feedback and not send the admin useless information.

[c0fe]

@MorrisJobke I am a bit confused because I was talking about purely aesthetic sense of uploading not sending or grabbing any information.

Oh @MorrisJobke @skjnldsv is there an IRC channel I can ask any additional questions if I have any?

[MorrisJobke]

@MorrisJobke I am a bit confused because I was talking about purely aesthetic sense of uploading not sending or grabbing any information.

Okay :+1:

@nextcloud/designers can also give feedback on that once you have something available.

Oh @MorrisJobke @skjnldsv is there an IRC channel I can ask any additional questions if I have any?

Yes. #nextcloud-dev on freenode.

[MorrisJobke]

Most likely nothing for 14 -> moving to 15.

[MorrisJobke]

Maybe something for the polishing, but also fine if it doesn't make it.

[caugner]

@rullzer Since you added the Hacktoberfest label, could you shortly describe what needs to be done here? E.g. is this exclusively about the upload progress (see issue description) or does this also include reporting upload errors to the admin (see comments)?

[ChristophWurst]

or does this also include reporting upload errors to the admin (see comments)?

IMO this still doesn't make sense -> https://github.com/nextcloud/server/issues/4164#issuecomment-371258303.

[MorrisJobke]

@rullzer Since you added the Hacktoberfest label, could you shortly describe what needs to be done here? E.g. is this exclusively about the upload progress (see issue description) or does this also include reporting upload errors to the admin (see comments)?

Let's focus first on the progress bar. Feedback is still useful, but the admin can't do much. If there is a problem with the upload itself then it should be somehow shown to the user (if it makes sense - for example: quota reached).

[pm-pm]

Hello,
Could someone please explain what the status of this issue is?

I think it would be wonderful if this feature finally comes.

My friends are often not able to estimate how long an upload will take. That's why I can't use "upload only" feature without them being confused.

Please install this feature to convince new users of the advantages of Nextcloud. Otherwise "other" file services will be used again.

Thanks. :-)

[ChristophWurst]

Status: someone has to do it.