Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Added HTML and Javascript progress bar when uploading files #1431

Open
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

AlecDivito
Copy link

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.

@Atreyagaurav
Copy link
Contributor

Atreyagaurav commented Jul 14, 2024

This actually looks excellent. UI wise, it's good. I tested it out and saw that it looks good in PC, but on phone it gets full width and slightly obscured on the bottom side (have to scroll even for single entry).

One significant problem I saw was that, you have added the capacity to cancel the upload here, which is great specially since you can cancel all or file wise basis. But it seems to just cancel the file in middle, and not remove that file from the server. So I think if we're to add the option to cancel, then we need to remove those partial files.

So, I think a way to save the files with .part extension and then move upon completion, or another request to the server that upload was cancelled so it removed the file should come along with the feature.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants