Introducing Gradio Clients


New to Gradio? Start here: Getting Started

See the Release History


import gradio as gr def upload_file(files): file_paths = [ for file in files] return file_paths with gr.Blocks() as demo: file_output = gr.File() upload_button = gr.UploadButton("Click to Upload an Image or Video File", file_types=["image", "video"], file_count="multiple") upload_button.upload(upload_file, upload_button, file_output) demo.launch()


Used to create an upload button, when clicked allows a user to upload files that satisfy the specified file type or generic files (if file_type not set).


As input component: Passes the file as a str or bytes object, or a list of str or list of bytes objects, depending on type and file_count.

Your function should accept one of these types:
def predict(
	value: bytes | str | list[bytes] | list[str] | None

As output component: Expects a str filepath or URL, or a list[str] of filepaths/URLs.

Your function should return one of these types:
def predict(ยทยทยท) -> str | list[str] | None
	return value




Class Interface String Shortcut Initialization



Uses default values


from pathlib import Path import gradio as gr def upload_file(filepath): name = Path(filepath).name return [gr.UploadButton(visible=False), gr.DownloadButton(label=f"Download {name}", value=filepath, visible=True)] def download_file(): return [gr.UploadButton(visible=True), gr.DownloadButton(visible=False)] with gr.Blocks() as demo: gr.Markdown("First upload a file and and then you'll be able download it (but only once!)") with gr.Row(): u = gr.UploadButton("Upload a file", file_count="single") d = gr.DownloadButton("Download the file", visible=False) u.upload(upload_file, u, [u, d]), None, [u, d]) if __name__ == "__main__": demo.launch()

Event Listeners


Event listeners allow you to respond to user interactions with the UI components you've defined in a Gradio Blocks app. When a user interacts with an element, such as changing a slider value or uploading an image, a function is called.

Supported Event Listeners

The UploadButton component supports the following event listeners. Each event listener takes the same parameters, which are listed in the Event Parameters table below.

Listener Description, ยทยทยท)

Triggered when the UploadButton is clicked.

UploadButton.upload(fn, ยทยทยท)

This listener is triggered when the user uploads a file into the UploadButton.

Event Parameters