os-js/OS.js

Add file upload progress indicator

valp124 opened this issue · 18 comments

valp124 commented

When uploading large files from File Manager, it's always a nail-biter waiting for the magic to happen. It would be super useful to see the progress of the upload, or at least have some kind of indicator that it's still in progress. The browser automatically takes care of that for the downloads, wish it were the case for uploads, as well...

Thanks a bunch!

andersevenrud commented

I'll look into that. The current upload mechanic used is via fetch which does not support progress events, sadly. However XMLHttpRequest does, which should be fairly easy to add support for and should not impact performance.

Note to self:

  • Add abstraction for XMLMHttpRequest that is identical to the fetch one
  • Add progress event callback to upload VFS api function options
  • Add support for optional text in progress dialog
  • Update the upload api dialog with new option and add translation texts
  • 👍1
andersevenrud commented

This has been implemented 😊

You have to update the following packages:

  • osjs/client
  • osjs/dialogs
  • osjs/filemanager-application
valp124 commented

You're awesome, man!! This looks great, but with one caveat 😜

image

It stays at 0% until the file is uploaded, and then disappears. No incremental progress. (Maybe I'm doing something wrong...)

andersevenrud commented

Initial thoughts are:

  1. One of the packages did not get updated
  2. npm run build was not executed
  3. cache ?
andersevenrud commented

Hold on... I think might have forgotten something here on my end 😊

valp124 commented

I was gonna say, check on all three items ;)

andersevenrud commented

Sorry about that... I forgot to add a detection of which progress to use. What you saw was the response (2 bytes) 😂 Update @osjs/client and it should display correctly.

andersevenrud commented

Also, I just realized that the upload is a modal -- that's not really good UX. I'll take care of that one.

andersevenrud commented

I'll take care of that one.

@osjs/filemanager-application has been updated wit this.

valp124 commented

Awesome, the progress is working! 😁

andersevenrud commented

Sweet!

If you want any changes or improvements to this, please file an issue here: https://github.com/os-js/osjs-filemanager-application

valp124 commented

This is awesome, man!! Thank you so much!

I have a suggestion for the file manager, but it's something different. I forget if I had mentioned it. It'd be great to be able to expand the left panel in the case below:

image

I can submit an issue if I haven't yet 😊

andersevenrud commented

I just pinged you in an issue you made about the UI gitch there.

As for resizing, hold and drag your cursor between the panes (the gray space). You should get a cursor indication when you're at the correct spot.

valp124 commented

Yep, resizing the pane works, but the file names remain cut. And yes, I can see the issue I have submitted. Memory, my man, doesn't work the same way as before at my age 🤓

  • 😄1
andersevenrud commented

My memory is starting to degrade as well... but so far only the less important stuff is getting garbage collected. Let's hope it stays like that 😂 Well, then we can continue the discussion there. I left a quick Q for you there.

valp124 commented

Hey, wanted to report back from the trenches. Spotted a slight error. If you close the progress window while the file is being uploaded, the action is understood correctly, and the upload is cancelled, but there is an error popup:

image

The full error text is:

TypeError: Cannot read property 'destroy' of null
    at n.value (https://webgs.slb.com:8443/vendors~osjs.js:72:41249)
    at https://webgs.slb.com:8443/apps/FileManager/main.js:1:44431

Not a big deal, just sayin 😉

andersevenrud commented

oopsie daisy! I've published a new version of @osjs/dialogs that should fix this problem 😊

valp124 commented

You're awesome, man. You really are!

  • 😄1