Show progress for uploads in `gr.UploadButton`

[pseudotensor]

• [x] I have searched to see if a similar issue already exists.

Is your feature request related to a problem? Please describe.

In uploading documents, say 300MB, it might take 52 seconds just for upload stage, and the gradio UI element for gr.File() shows no progress for this stage of pure upload.

To a user it looks like nothing happened, so they want to try again or just abandon the application due to mistrust.

Describe the solution you'd like

With gradio being more heavily used for documents, audio, video, seems upload progress should be added.

Additional context

Progress in other elements is reasonable.

[abidlabs]

Thanks @pseudotensor can you clarify? The gr.File component does indeed show a progress bar to indicate upload progress:

[pseudotensor]

Sorry, I meant gr.UploadButton instead of gr.File. I can make basic example.

[abidlabs]

Ah sure no need. We'll need to think about the UI for gr.UploadButton

[abidlabs]

cc @dawoodkhan82 @hannahblair for ideas

[pseudotensor]

Just use the upload button demo: https://www.gradio.app/docs/uploadbutton#demos

Then upload some large object (if local to gradio, choose large enough to mimic real network). E.g. locally I can upload 31GB core file, and never see any information for long time while gradio is at 100% CPU usage.

Secondarily, unsure why upload uses so much CPU.

You'll see in app UI that nothing happens for very long time.

Eventually after about 3 minutes, I see only final result.

For real network case, for normal users with normal internet speeds, this is issue even for 10MB file.

[abidlabs]

Agreed, we should have a better UI for this

[pseudotensor]

FYI I was confused because the UI shows "File" still, but it's really the button. Naively I wonder why progress in gr.File isn't same here, but I'm sure there is a reason.

It would also be good to show not just progress as in which file is being managed,but % progress for each file, since if one larger file just showing the file being uploaded feels like not enough. Could be more useful.

[Solomin0]

I have been able to address this by adding a progress bar within my status textbox. Not super complicated and will only work for easily segment able files but would an approach like this work until a full implementation @pseudotensor

[pseudotensor]

@Solomin0 I think in your case it is not the upload that you are showing progress for, but the "upload" into the system by pages etc. This issue is talking about the original upload of the file itself into the app, like what is in your "Select files for upload" already.

[M1TR]

Thanks @pseudotensor can you clarify? The gr.File component does indeed show a progress bar to indicate upload progress:

I'm sorry but I don't see this progress bar when using gr.File. I'm on version 4.25.0

[M1TR]

@pseudotensor Hello, was this issue resolved? Can you please share if you were able to achieve the progress bar for the upload duration?