Skip to content

Conversation

AlecDivito
Copy link
Contributor

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.

@svenstaro
Copy link
Owner

@AlecDivito Hey, sorry for letting this sit for so long! I actually thing this is great. I'd like to give it a proper review but first what do you think about the feedback by @Atreyagaurav?

@AlecDivito
Copy link
Contributor Author

I think the comments are great, I've just been busy, but, I'd be happy to address the comments! By all means wait until the changes are in.

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).

I believe I did this intentionally on mobile. I'll review my design to address this.

So I think if we're to add the option to cancel, then we need to remove those partial files.

This is me not knowing the code base well enough haha.

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.

Not a bad idea, I'll give it a go.

@Atreyagaurav Thank you for the review :)

@svenstaro
Copy link
Owner

Please add a bunch of tests for this. I know it's probably going to be annoying but with anything that does partial file deletion and creation, I require this to be fairly well-tested. :)

@ssokolow ssokolow mentioned this pull request Feb 9, 2025
@AlecDivito
Copy link
Contributor Author

Addressed some of the comments:

  1. Mobile view now only takes up about 80px at the bottom of the screen. However the user can toggle the uploader so it takes up the full hight.
  2. Uploading uses a temporary file. Users can optionally send a SHA256 hash which if included in the /upload request header, will be used to check to see if the correct file was uploaded. If incorrect the file is deleted.

I had trouble finding where exactly I could get request cancellations for actix, it actually seems this is one of the web servers in Rust that doesn't easily provide that data. Therefore, I'm relying on SHA256 hashs to determine if a request was cancelled and thus, if a file should be deleted.

I would rather stay away from adding a new endpoint to clean up aborted downloads as that would increase the scope of this feature to a level I'm not comfortable with implementing.

I also didn't want to break existing functionality of the upload endpoint, so if the SHA256 isn't included in the request, I don't check for it. I believe this was the pre-existing functionality so it should be ok...

output.mp4

Anyways, here's a demo, @svenstaro when you have the time please let me know what you think.

Copy link
Owner

@svenstaro svenstaro left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I also didn't want to break existing functionality of the upload endpoint, so if the SHA256 isn't included in the request, I don't check for it. I believe this was the pre-existing functionality so it should be ok...

I think that's a good idea. People using curl shouldn't have to go through hoops to accomplish this.

All in all, I reviewed this and I think it's stellar work. There's some questions and a few minor things but I think the overall structure is solid.

@AlecDivito
Copy link
Contributor Author

Sorry for the wait, I'm busy during the week.

I've addressed the majority of the comments and added quite a bit of documentation so hopefully it will be easier to understand the entire upload flow now. Here's a description of some of the changes from the last push:

  1. Added comments to javascript and upload file functions
  2. Added ability to set SHA512 as well
  3. Added in extra tests
  4. Updated logic for getting SHA value from headers and be more strict on their validation
  5. Remove list sorting from javascript (it never worked 🥲)
  6. Updated concurrency in javascript so that promises take from a shared queue of upload tasks

Overall, thanks for reviewing, after taking another look at my code I did notice some bugs and I've tried to remove them.

@AlecDivito AlecDivito requested a review from svenstaro February 24, 2025 01:04
Copy link
Owner

@svenstaro svenstaro left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Super cool, we're very close now. Some comments to address and some clippy to fix.

@svenstaro svenstaro mentioned this pull request Feb 28, 2025
@AlecDivito
Copy link
Contributor Author

I addressed your comments and fixed the clippy issues. I hope this is good enough to merge! 🎉🎉🎉

Let me know if you have any other comments!

@svenstaro
Copy link
Owner

Super nice. It was almost a year in the making but we got it done! Merging.

@svenstaro svenstaro merged commit c26b74c into svenstaro:master Mar 3, 2025
17 checks passed
svenstaro added a commit that referenced this pull request Mar 3, 2025
@AlecDivito AlecDivito deleted the upload-progress-bar branch March 3, 2025 21:49
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.

3 participants