Child Item

Display file upload progress in javascript api

I am using the Javascript API to upload my files in dropbox on my website. The files are getting uploaded properly, but I am unable to display the progress of the upload. I have to wait for a longer time on the page for bigger files till the File Uploaded text gets displayed.

Find more posts tagged with

Developers

Comments

Greg-DB

The Dropbox API v2 JavaScript SDK does not offer a way to check the progress on a transfer unfortunately, e.g., for filesUpload. I'll pass this along as a feature request to the team but I can't promise if or when that might be implemented.

If you're using "upload sessions" though, where you upload files in pieces, you can keep track of how much you've uploaded between each piece:

If you're not already using that, it may be a significant amount or work to switch to it and implement your progress tracking.

h_vohra

@Greg-DB Thank you for the response. Currently, I am using the filesUpload function. Can you please share link for a working example of fileUploadSession.

Greg-DB

We have an example of using upload sessions in the JavaScript SDK here: https://github.com/dropbox/dropbox-sdk-js/blob/b2353edeb221ec17b8e70a1d8fd4799e2f1f031d/examples/javascript/upload/index.html#L63

h_vohra

@Greg-DB Yes, I am using the same example, but there is no progress bar code in the example.

Greg-DB

Yes, that is just an example of using the upload sessions methods themselves. It doesn't have a progress bar implemented, so you'd need to implement it in your code and hook up your own progress bar. For example, between each filesUploadSessionStart/filesUploadSessionAppendV2/filesUploadSessionFinish call, you could update the state of your progress bar based on the current 'offset' value.