-
-
Notifications
You must be signed in to change notification settings - Fork 342
feat: Added HTML and Javascript progress bar when uploading files #1431
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
Conversation
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 |
@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? |
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.
I believe I did this intentionally on mobile. I'll review my design to address this.
This is me not knowing the code base well enough haha.
Not a bad idea, I'll give it a go. @Atreyagaurav Thank you for the review :) |
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. :) |
Addressed some of the comments:
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.mp4Anyways, here's a demo, @svenstaro when you have the time please let me know what you think. |
There was a problem hiding this 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.
…omments to upload code; add tests
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:
Overall, thanks for reviewing, after taking another look at my code I did notice some bugs and I've tried to remove them. |
There was a problem hiding this 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.
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! |
Super nice. It was almost a year in the making but we got it done! Merging. |
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.