search

svenstaro / miniserve

🌟 For when you really just want to serve some files over HTTP right now!
MIT License
5.95k stars 289 forks source link

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

Open AlecDivito opened 3 months ago

AlecDivito commented 3 months ago

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.

https://github.com/svenstaro/miniserve/assets/12245650/89c7b480-dd55-4920-a411-71c413de4899

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.

https://github.com/svenstaro/miniserve/assets/12245650/f7ed021b-72a5-4052-9dbd-00f14f078db4

You review would be greatly appreciated. Thanks.

Atreyagaurav commented 1 month ago

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.