[Bug]: Drag & Drop upload progress bar does not show for big files
⚠️ This issue respects the following points: ⚠️
- [X] This is a bug, not a question or a configuration/webserver/proxy issue.
- [X] This issue is not already reported on Github OR Nextcloud Community Forum (I've searched it).
- [X] Nextcloud Server is up to date. See Maintenance and Release Schedule for supported versions.
- [X] I agree to follow Nextcloud's Code of Conduct.
Bug description
Drag & Drop showed in the past a progress bar: https://github.com/nextcloud/server/issues/4164
I think the last time it worked was in NC28.
Steps to reproduce
Opened a demo account at https://try.nextcloud.com/ and dropped a file. No progress was visible. The file was uploaded successfully. I tested with recent Google Chrome. Didn't tested other browsers.
Expected behavior
Show progress
Nextcloud Server version
29
Operating system
None
PHP engine version
None
Web server
None
Database engine version
None
Is this bug present after an update or on a fresh install?
None
Are you using the Nextcloud Server Encryption module?
None
What user-backends are you using?
- [ ] Default user-backend (database)
- [ ] LDAP/ Active Directory
- [ ] SSO - SAML
- [ ] Other
Configuration report
No response
List of activated Apps
No response
Nextcloud Signing status
No response
Nextcloud Logs
No response
Additional info
No response
v29.0.7, Chrome.
v29.0.7, Chrome.
Did you really use Drag & Drop or did you use the + button? A friend of mine confirmed that if does not work in Chrome with Drag & Drop 😳
v29.0.7, Chrome.
Did you really use Drag & Drop or did you use the + button? A friend of mine confirmed that if does not work in Chrome with Drag & Drop 😳
I have the same behavior, no progress bar when using file drop while the progress bar is visible when using the "+" button. Tested with FIrefox, Edge, Chrome, all up to date on Windows 11.
Yes, Drag n Drop on v29.0.7. Try clear your browser cache?
@solracsf I just tried drag'n'drop in Win11 with Firefox 130 (Nextcloud 29.0.7). For some files the progress bar is shown. For others not at all. For example, progress bar is not shown for latest nextcloud zip file (using drag'n'drop): https://download.nextcloud.com/server/releases/latest.zip
Uploading using the + works as expected (progress bar is displayed).
Unfortunately, I wasn't able to find a file which works and which I could share (privacy).
Ok this seems to be (maybe) a files size issue because small (<20MiB) works fine, but not bigger files. Indeed, https://download.nextcloud.com/server/releases/latest.zip file fails to show the progress bar (file is still uploaded in the background).
I confirm that after updating to 29.0.7, such a problem appeared. When I upload large files, the progress bar is there until the very end of the file download, but when chunks start to be collected in the background, the progress bar disappears and there is no status about the successfully downloaded file, after some time the file appears in the interface. That is:
- the progress bar disappears
- There is no notification about the successfully downloaded file
This issue was confirmed in Nextcloud 30 as well. When files are dragged and uploaded from the web browser, the progress bar works normally for files under 20MB, but it does not display when uploading files larger than that. Since it works correctly in the client app, I believe this problem only occurs in the web browser.
Hi,
I have the same issue in the 29.0.7 / firefox-edge. Draggin the file does not make the bar show up. Using the + button works. Chunk size is 20MB.
Thx
I also have the issue in 30.0.0 /firefox-edge uploading large files with drag and drop does not show the ui at all! have not tried the + button but I assume it is the same
Let me just add that, sometimes, it just stucks at "Estimating Time Left" while uploads happens in the background.
This seems to be related with chunk upload.
This only happens when chunk upload is enabled (default max_chunk_size value in Files app config).
After disabling chunk upload (occ config:app:set files max_chunk_size --value 0) the progress bar is displayed correctly when dropping big files.
After disabling chunk upload (
occ config:app:set files max_chunk_size --value 0) the progress bar is displayed correctly when dropping big files.
Confirmed on 29.0.7 👍
After disabling chunk upload (
occ config:app:set files max_chunk_size --value 0) the progress bar is displayed correctly when dropping big files.Confirmed on 29.0.7 👍
Also confirmed on 29.0.7 here
Isn't it a problem disabling chunks ?
Hello! I will need your browser console log to investigate this issue. Open your console, reload your page and/or do the action leading to this issue and copy/paste the log in this thread.
How to access your browser console (Click to expand)
Chrome
- Press either CTRL + SHIFT + J to open the “console” tab of the Developer Tools.
- Alternative method:
- Press either CTRL + SHIFT + I or F12 to open the Developer Tools.
- Click the “console” tab.
Safari
- Press CMD + ALT + I to open the Web Inspector.
- See Chrome’s step 2. (Chrome and Safari have pretty much identical dev tools.)
Firefox
- Press CTRL + SHIFT + K to open the Web console (COMMAND + SHIFT + K on Macs).
- or, if Firebug is installed (recommended):
- Press F12 to open Firebug.
- Click on the “console” tab.
Opera
- Press CTRL + SHIFT + I to open Dragonfly.
- Click on the “console” tab.
@skjnldsv this is a capture while uploading a file with drag'n'drop.
Server: NC ~29.0.7~ 30.0.1 RC2 (sorry, tested actually on my testing instance) Client: Ubuntu 24.0.4 with Firefox 131.
Is this what you are looking for?
Details of browser console log
16:39:26.407 [DEBUG] files: Dropped
Object { app: "files", uid: "admin", level: 0, event: drop, folder: {…}, fileTree: File }
index.mjs:45:16
16:39:26.408 [DEBUG] files: Uploading files to /Upload
Object { app: "files", uid: "admin", level: 0, root: File, contents: (1) […] }
index.mjs:45:16
16:39:26.408 [DEBUG] files: Uploading file to /Upload/ubuntu-24.04-desktop-amd64.iso
Object { app: "files", uid: "admin", level: 0, file: File }
index.mjs:45:16
16:39:26.409 [DEBUG] @nextcloud/upload: Uploading ubuntu-24.04-desktop-amd64.iso to https://cloud.domain.de/remote.php/dav/files/admin/Upload/ubuntu-24.04-desktop-amd64.iso
Object { app: "@nextcloud/upload", uid: "admin", level: 0 }
index.mjs:45:16
16:39:26.409 [DEBUG] @nextcloud/upload: Initializing chunked upload
Object { app: "@nextcloud/upload", uid: "admin", level: 0, file: File, upload: {…} }
index.mjs:45:16
16:39:29.140 [DEBUG] files: VirtualList: resizeObserver updated
Object { app: "files", uid: "admin", level: 0 }
index.mjs:45:16
16:39:30.971 [DEBUG] text: [PollingBackend] Fetching steps
Object { app: "text", uid: "admin", level: 0 }
index-DkzhscpN.chunk.mjs:2:859
16:39:31.046 [DEBUG] text: synced
Object { app: "text", uid: "admin", level: 0, version: 0, steps: (1) […] }
index-DkzhscpN.chunk.mjs:2:859
16:39:36.094 [DEBUG] text: [PollingBackend] Fetching steps
Object { app: "text", uid: "admin", level: 0 }
index-DkzhscpN.chunk.mjs:2:859
16:39:36.177 [DEBUG] text: synced
Object { app: "text", uid: "admin", level: 0, version: 0, steps: (1) […] }
index-DkzhscpN.chunk.mjs:2:859
16:39:37.501 [DEBUG] text: sending steps
Object { app: "text", uid: "admin", level: 0, steps: [], awareness: "AWEB5Oiypw8RWXsidXNlciI6eyJuYW1lIjoiYWRtaW4iLCJjbGllbnRJZCI6NDEwOTE1MzM4MCwiY29sb3IiOiIjNDk5YWEyIiwibGFzdFVwZGF0ZSI6MTcyODY1NzMyNn19", version: 0 }
index-DkzhscpN.chunk.mjs:2:859
16:39:37.605 [DEBUG] text: synced
Object { app: "text", uid: "admin", level: 0, version: 0, steps: [] }
index-DkzhscpN.chunk.mjs:2:859
16:39:41.232 [DEBUG] text: [PollingBackend] Fetching steps
Object { app: "text", uid: "admin", level: 0 }
index-DkzhscpN.chunk.mjs:2:859
16:39:41.282 [DEBUG] text: synced
Object { app: "text", uid: "admin", level: 0, version: 0, steps: (1) […] }
index-DkzhscpN.chunk.mjs:2:859
16:39:46.322 [DEBUG] text: [PollingBackend] Fetching steps
Object { app: "text", uid: "admin", level: 0 }
index-DkzhscpN.chunk.mjs:2:859
16:39:46.407 [DEBUG] text: synced
Object { app: "text", uid: "admin", level: 0, version: 0, steps: (1) […] }
index-DkzhscpN.chunk.mjs:2:859
16:39:51.443 [DEBUG] text: [PollingBackend] Fetching steps
Object { app: "text", uid: "admin", level: 0 }
index-DkzhscpN.chunk.mjs:2:859
16:39:51.568 [DEBUG] text: synced
Object { app: "text", uid: "admin", level: 0, version: 0, steps: (1) […] }
index-DkzhscpN.chunk.mjs:2:859
16:39:52.503 [DEBUG] text: sending steps
Object { app: "text", uid: "admin", level: 0, steps: [], awareness: "AWEB5Oiypw8SWXsidXNlciI6eyJuYW1lIjoiYWRtaW4iLCJjbGllbnRJZCI6NDEwOTE1MzM4MCwiY29sb3IiOiIjNDk5YWEyIiwibGFzdFVwZGF0ZSI6MTcyODY1NzMyNn19", version: 0 }
index-DkzhscpN.chunk.mjs:2:859
16:39:55.443 [DEBUG] text: synced
Object { app: "text", uid: "admin", level: 0, version: 0, steps: [] }
index-DkzhscpN.chunk.mjs:2:859
16:39:56.624 [DEBUG] text: [PollingBackend] Fetching steps
Object { app: "text", uid: "admin", level: 0 }
index-DkzhscpN.chunk.mjs:2:859
16:39:56.674 [DEBUG] text: synced
Object { app: "text", uid: "admin", level: 0, version: 0, steps: (1) […] }
index-DkzhscpN.chunk.mjs:2:859
16:40:01.727 [DEBUG] text: [PollingBackend] Fetching steps
Object { app: "text", uid: "admin", level: 0 }
index-DkzhscpN.chunk.mjs:2:859
16:40:01.831 [DEBUG] text: synced
Object { app: "text", uid: "admin", level: 0, version: 0, steps: (1) […] }
index-DkzhscpN.chunk.mjs:2:859
16:40:06.876 [DEBUG] text: [PollingBackend] Fetching steps
Object { app: "text", uid: "admin", level: 0 }
index-DkzhscpN.chunk.mjs:2:859
16:40:06.959 [DEBUG] text: synced
Object { app: "text", uid: "admin", level: 0, version: 0, steps: (1) […] }
index-DkzhscpN.chunk.mjs:2:859
16:40:07.521 [DEBUG] text: sending steps
Object { app: "text", uid: "admin", level: 0, steps: [], awareness: "AWEB5Oiypw8TWXsidXNlciI6eyJuYW1lIjoiYWRtaW4iLCJjbGllbnRJZCI6NDEwOTE1MzM4MCwiY29sb3IiOiIjNDk5YWEyIiwibGFzdFVwZGF0ZSI6MTcyODY1NzMyNn19", version: 0 }
index-DkzhscpN.chunk.mjs:2:859
16:40:07.599 [DEBUG] text: synced
Object { app: "text", uid: "admin", level: 0, version: 0, steps: [] }
index-DkzhscpN.chunk.mjs:2:859
16:40:12.007 [DEBUG] text: [PollingBackend] Fetching steps
Object { app: "text", uid: "admin", level: 0 }
index-DkzhscpN.chunk.mjs:2:859
16:40:12.107 [DEBUG] text: synced
Object { app: "text", uid: "admin", level: 0, version: 0, steps: (1) […] }
index-DkzhscpN.chunk.mjs:2:859
16:40:17.125 [DEBUG] text: [PollingBackend] Fetching steps
Object { app: "text", uid: "admin", level: 0 }
index-DkzhscpN.chunk.mjs:2:859
16:40:20.195 [DEBUG] text: synced
Object { app: "text", uid: "admin", level: 0, version: 0, steps: (1) […] }
index-DkzhscpN.chunk.mjs:2:859
16:40:22.519 [DEBUG] text: sending steps
Object { app: "text", uid: "admin", level: 0, steps: [], awareness: "AWEB5Oiypw8UWXsidXNlciI6eyJuYW1lIjoiYWRtaW4iLCJjbGllbnRJZCI6NDEwOTE1MzM4MCwiY29sb3IiOiIjNDk5YWEyIiwibGFzdFVwZGF0ZSI6MTcyODY1NzMyNn19", version: 0 }
index-DkzhscpN.chunk.mjs:2:859
16:40:22.634 [DEBUG] text: synced
Object { app: "text", uid: "admin", level: 0, version: 0, steps: [] }
index-DkzhscpN.chunk.mjs:2:859
16:40:25.249 [DEBUG] text: [PollingBackend] Fetching steps
Object { app: "text", uid: "admin", level: 0 }
index-DkzhscpN.chunk.mjs:2:859
16:40:25.368 [DEBUG] text: synced
Object { app: "text", uid: "admin", level: 0, version: 0, steps: (1) […] }
index-DkzhscpN.chunk.mjs:2:859
16:40:30.398 [DEBUG] text: [PollingBackend] Fetching steps
Object { app: "text", uid: "admin", level: 0 }
index-DkzhscpN.chunk.mjs:2:859
16:40:31.509 [DEBUG] text: synced
Object { app: "text", uid: "admin", level: 0, version: 0, steps: (1) […] }
index-DkzhscpN.chunk.mjs:2:859
16:40:36.574 [DEBUG] text: [PollingBackend] Fetching steps
Object { app: "text", uid: "admin", level: 0 }
index-DkzhscpN.chunk.mjs:2:859
16:40:36.671 [DEBUG] text: synced
Object { app: "text", uid: "admin", level: 0, version: 0, steps: (1) […] }
index-DkzhscpN.chunk.mjs:2:859
16:40:37.518 [DEBUG] text: sending steps
Object { app: "text", uid: "admin", level: 0, steps: [], awareness: "AWEB5Oiypw8VWXsidXNlciI6eyJuYW1lIjoiYWRtaW4iLCJjbGllbnRJZCI6NDEwOTE1MzM4MCwiY29sb3IiOiIjNDk5YWEyIiwibGFzdFVwZGF0ZSI6MTcyODY1NzMyNn19", version: 0 }
index-DkzhscpN.chunk.mjs:2:859
16:40:37.594 [DEBUG] text: synced
Object { app: "text", uid: "admin", level: 0, version: 0, steps: [] }
index-DkzhscpN.chunk.mjs:2:859
16:40:41.729 [DEBUG] text: [PollingBackend] Fetching steps
Object { app: "text", uid: "admin", level: 0 }
index-DkzhscpN.chunk.mjs:2:859
16:40:41.816 [DEBUG] text: synced
Object { app: "text", uid: "admin", level: 0, version: 0, steps: (1) […] }
index-DkzhscpN.chunk.mjs:2:859
16:40:46.858 [DEBUG] text: [PollingBackend] Fetching steps
Object { app: "text", uid: "admin", level: 0 }
index-DkzhscpN.chunk.mjs:2:859
16:40:46.944 [DEBUG] text: synced
Object { app: "text", uid: "admin", level: 0, version: 0, steps: (1) […] }
index-DkzhscpN.chunk.mjs:2:859
16:40:51.969 [DEBUG] text: [PollingBackend] Fetching steps
Object { app: "text", uid: "admin", level: 0 }
index-DkzhscpN.chunk.mjs:2:859
16:40:52.079 [DEBUG] text: synced
Object { app: "text", uid: "admin", level: 0, version: 0, steps: (1) […] }
index-DkzhscpN.chunk.mjs:2:859
16:40:52.520 [DEBUG] text: sending steps
Object { app: "text", uid: "admin", level: 0, steps: [], awareness: "AWEB5Oiypw8WWXsidXNlciI6eyJuYW1lIjoiYWRtaW4iLCJjbGllbnRJZCI6NDEwOTE1MzM4MCwiY29sb3IiOiIjNDk5YWEyIiwibGFzdFVwZGF0ZSI6MTcyODY1NzMyNn19", version: 0 }
index-DkzhscpN.chunk.mjs:2:859
16:40:52.615 [DEBUG] text: synced
Object { app: "text", uid: "admin", level: 0, version: 0, steps: [] }
index-DkzhscpN.chunk.mjs:2:859
16:40:57.096 [DEBUG] text: [PollingBackend] Fetching steps
Object { app: "text", uid: "admin", level: 0 }
index-DkzhscpN.chunk.mjs:2:859
16:40:57.178 [DEBUG] text: synced
Object { app: "text", uid: "admin", level: 0, version: 0, steps: (1) […] }
index-DkzhscpN.chunk.mjs:2:859
16:41:02.223 [DEBUG] text: [PollingBackend] Fetching steps
Object { app: "text", uid: "admin", level: 0 }
index-DkzhscpN.chunk.mjs:2:859
16:41:02.329 [DEBUG] text: synced
Object { app: "text", uid: "admin", level: 0, version: 0, steps: (1) […] }
index-DkzhscpN.chunk.mjs:2:859
16:41:07.348 [DEBUG] text: [PollingBackend] Fetching steps
Object { app: "text", uid: "admin", level: 0 }
index-DkzhscpN.chunk.mjs:2:859
16:41:07.522 [DEBUG] text: sending steps
Object { app: "text", uid: "admin", level: 0, steps: [], awareness: "AWEB5Oiypw8XWXsidXNlciI6eyJuYW1lIjoiYWRtaW4iLCJjbGllbnRJZCI6NDEwOTE1MzM4MCwiY29sb3IiOiIjNDk5YWEyIiwibGFzdFVwZGF0ZSI6MTcyODY1NzMyNn19", version: 0 }
index-DkzhscpN.chunk.mjs:2:859
16:41:34.324 [DEBUG] text: status
Object { app: "text", uid: "admin", level: 0, status: "disconnected" }
index-DkzhscpN.chunk.mjs:2:859
16:41:34.324 [DEBUG] text: Websocket closed
Object { app: "text", uid: "admin", level: 0 }
index-DkzhscpN.chunk.mjs:2:859
16:41:34.424 [DEBUG] text: WebSocketPolyfill#constructor
Object { app: "text", uid: "admin", level: 0, url: "ws://localhost:1234/file:2912129", fileId: 2912129, initialSession: null }
index-DkzhscpN.chunk.mjs:2:859
16:41:34.425 [DEBUG] text: status
Object { app: "text", uid: "admin", level: 0, status: "connecting" }
index-DkzhscpN.chunk.mjs:2:859
16:41:34.425 [DEBUG] text: status
Object { app: "text", uid: "admin", level: 0, status: "connected" }
index-DkzhscpN.chunk.mjs:2:859
16:41:38.214 [DEBUG] text: synced
Object { app: "text", uid: "admin", level: 0, version: 0, steps: (1) […] }
index-DkzhscpN.chunk.mjs:2:859
16:41:39.713 [DEBUG] text: synced
Object { app: "text", uid: "admin", level: 0, version: 0, steps: [] }
index-DkzhscpN.chunk.mjs:2:859
16:41:39.734 [DEBUG] text: sending steps
Object { app: "text", uid: "admin", level: 0, steps: (1) […], awareness: "AWEB5Oiypw8ZWXsidXNlciI6eyJuYW1lIjoiYWRtaW4iLCJjbGllbnRJZCI6NDEwOTE1MzM4MCwiY29sb3IiOiIjNDk5YWEyIiwibGFzdFVwZGF0ZSI6MTcyODY1NzMyNn19", version: 0 }
index-DkzhscpN.chunk.mjs:2:859
16:41:39.811 [DEBUG] text: synced
Object { app: "text", uid: "admin", level: 0, version: 0, steps: [] }
index-DkzhscpN.chunk.mjs:2:859
16:41:43.249 [DEBUG] text: [PollingBackend] Fetching steps
Object { app: "text", uid: "admin", level: 0 }
index-DkzhscpN.chunk.mjs:2:859
16:41:43.356 [DEBUG] text: synced
Object { app: "text", uid: "admin", level: 0, version: 0, steps: (1) […] }
index-DkzhscpN.chunk.mjs:2:859
16:41:47.065 [DEBUG] @nextcloud/upload: Successfully uploaded ubuntu-24.04-desktop-amd64.iso
Object { app: "@nextcloud/upload", uid: "admin", level: 0, file: File, upload: {…} }
index.mjs:45:16
16:41:47.067 [DEBUG] files: Cancelled previous ongoing fetch
Object { app: "files", uid: "admin", level: 0 }
index.mjs:45:16
16:41:47.081 [DEBUG] files: Files uploaded successfully
Object { app: "files", uid: "admin", level: 0 }
index.mjs:45:16
16:41:47.089 [DEBUG] files: Scrolling to last upload in current folder
Object { app: "files", uid: "admin", level: 0, lastUpload: {…} }
index.mjs:45:16
16:41:47.197 [DEBUG] files: Fetched contents
Object { app: "files", uid: "admin", level: 0, dir: "/Upload", folder: {…}, contents: (4) […] }
index.mjs:45:16
16:41:47.198 [DEBUG] files: Directory contents changed
Object { app: "files", uid: "admin", level: 0, view: {…}, folder: {…}, contents: (4) […] }
index.mjs:45:16
16:41:47.204 [DEBUG] @nextcloud/upload: Destination set
Object { app: "@nextcloud/upload", uid: "admin", level: 0, folder: {…} }
index.mjs:45:16
Hey,
Using latest server's master branch:
With chunk upload enabled (default value for files max_chunk_size app config):
and after setting max_chunk_size to 0:
The only difference there is:
[DEBUG] @nextcloud/upload: Initializing chunked upload
[DEBUG] @nextcloud/upload: Initializing regular upload
With chunk upload enabled, the progress bar does not show up. With chunk upload disabled, the progress is displayed.
Both uploads were triggered by drag'n'drop.
After disabling chunk upload (
occ config:app:set files max_chunk_size --value 0) the progress bar is displayed correctly when dropping big files.Confirmed on 29.0.7 👍
Also confirmed on 29.0.7 here
Isn't it a problem disabling chunks ?
Confirmed also works on Nextcloud 30.0.1
The problem is currently that we have two different upload strategies. So the simplest way, also for maintenance, is to unify them. Meaning I am currently working on migrating the drag and drop upload to the same backend as the file upload using the menu.
Preparations are here: https://github.com/nextcloud-libraries/nextcloud-upload/pull/1463
Afterwards a PR on server will be created.
Thanks for handling this. Looking forward to have the fix.
I've got this problem too (v. 30.0.2). As this issue exists for more than 2 years I may not hope that there will be a fix soon – right?
After disabling chunk upload (
occ config:app:set files max_chunk_size --value 0) the progress bar is displayed correctly when dropping big files.Confirmed on 29.0.7 👍
Also confirmed on 29.0.7 here Isn't it a problem disabling chunks ?
Confirmed also works on Nextcloud 30.0.1
nope, If I do so no files can be uploaded anymore. (nc 30.0.2)
As this issue exists for more than 2 years
What do you mean? The issue was reported 6 weeks ago.
Oh yes, sorry. Made a mistake – was totally wrong of course.
Why is this closed? I don't understand. What do I have to do to fix the issue?
What do I have to do to fix the issue?
Wait for the next maintenance releases :)
Actually no, still broken
@susnux on master we still have the following issues:
1. uploading big files on drag&drop does not show the upload progress
https://github.com/user-attachments/assets/6da30da5-805f-43af-b2b7-99f8091c48ed
2. selecting a conflicting file and clicking cancel does NOT reset the uploader progress bar
https://github.com/user-attachments/assets/5ade3302-c126-4111-beec-d7161f73553b
on master we still have the following issues
I know the server fix PR is not yet merged / in review state 🙈 (moving drag-and-drop to same library function as input-upload)
Fixed by
- https://github.com/nextcloud/server/pull/49764
- https://github.com/nextcloud/server/pull/49769