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 ;)

[AetherCollective]

I would also like to see this.

[MariusBluem]

I would also like to see this.

You may also like to code this 🚀🙈

[AetherCollective]

Unfortunately, I know nothing about PHP.

[tcitworld]

Good thing this requires javascript skills then.

[AetherCollective]

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

[AetherCollective]

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 😄

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 😓
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

[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 -> #4164 (comment).

[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).

[ChristophWurst]

Status: someone has to do it.

[ModestTG]

Was this issue ever resolved? I see that #20244 was merged, and this issue was closed, but then this issue was then added to the NextCloud 19 Milestone, but we're on version 21? I have tried this in NextCloud 21 and I'm not seeing any progress bar. Just wanted to know if this issue was in fact resolved and potentially buried in the settings somewhere or if this is still potentially being worked on. Thanks in advance!

[mMuck]

@ModestTG Sure, there is a great progress bar for "File drop (upload only)" shares

Try by yourself - the 60 seconds test: https://try.nextcloud.com (I think NC 21.0.4.1) -> Select "Instant trial" and click the button. A new instance is created. After you logged in automatically, click the Files App. Share one of the given folders and change the share to a "upload only" share (share context menu). Open the created share token in another browser window/tab. You won't see the folder content but you can upload files now. Pick a sufficient(!) large file. I used some 30 MB setup file from my downloads folder and watch 😉. I got this:

[mgutt]

@ModestTG Sure, there is a great progress bar for "File drop (upload only)" shares

Try by yourself - the 60 seconds test: https://try.nextcloud.com

Funny. Did that. Drag & Drop of a 100MB.bin and it showed... nothing. After several seconds the file appeared without any progress bar or similar. It seems this feature is broken again 😒