feat: Added HTML and Javascript progress bar when uploading files #1431
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Overview
After running this application, i noticed that the upload functionality is pretty bad when it comes to user experience. When searching the Github issues I found #1369 which seemed to link to a branch that adds basic support for a progress bar upload feature. I thought it would be fun to try and implement it because I enjoy how simple this tool is and would like the functionality for myself.
This PR adds the ability to view uploads as they progress.
Issues
While implementing the solution, I found sometimes Actix could return very very early after a file upload is sent (for example, when a request required authentication). When this happened, the browser fails to register the response the server sends back unless the entire web request is consumed. I do believe that this may block this PR from being merged :(
Implementation
Here is a video showing the upload implementation. My computer is a bit fast so it's a bit hard to see it actually working.
Recording.2024-06-06.185514.mp4
I've been able to create a simple example, showing it for slower uploads. Note that I had to edit my code to use
setInterval
so some of the text doesn't work as expected.Recording.2024-06-06.190555.mp4
You review would be greatly appreciated. Thanks.