Add max_file_size parameter to launch() that limits the size of files that can be uploaded in the Gradio app (#7909)

* File size limits

* Implementation

* add changeset

* Fix tests

* python client support

* lint

* fix test

* lint

* add changeset

* Set at the blocks level

* add changeset

* type check

* format

* lint

* lint

* Delete files as soon as they're encountered

* fix tests

* type hint 🙄

* Fix tests

* Fix below limit test

* add changeset

* Fix tests

* Add client file

* revert loop code

* Add to guides

* Pass in via gradio component

* add changeset

* Update loading status

* Make errors closeable

* add changeset

* Add code

* Lint

* Changelog highlight

* Fix i18n in storybook

* Address comments

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

.changeset/tiny-cars-spend.md

@@ -0,0 +1,68 @@
+---
+"@gradio/app": minor
+"@gradio/audio": minor
+"@gradio/chatbot": minor
+"@gradio/checkbox": minor
+"@gradio/checkboxgroup": minor
+"@gradio/client": minor
+"@gradio/code": minor
+"@gradio/colorpicker": minor
+"@gradio/dataframe": minor
+"@gradio/dropdown": minor
+"@gradio/fallback": minor
+"@gradio/file": minor
+"@gradio/fileexplorer": minor
+"@gradio/gallery": minor
+"@gradio/highlightedtext": minor
+"@gradio/html": minor
+"@gradio/image": minor
+"@gradio/imageeditor": minor
+"@gradio/json": minor
+"@gradio/label": minor
+"@gradio/markdown": minor
+"@gradio/model3d": minor
+"@gradio/multimodaltextbox": minor
+"@gradio/number": minor
+"@gradio/plot": minor
+"@gradio/radio": minor
+"@gradio/simpledropdown": minor
+"@gradio/simpleimage": minor
+"@gradio/simpletextbox": minor
+"@gradio/slider": minor
+"@gradio/statustracker": minor
+"@gradio/storybook": minor
+"@gradio/textbox": minor
+"@gradio/tootils": minor
+"@gradio/upload": minor
+"@gradio/uploadbutton": minor
+"@gradio/utils": minor
+"@gradio/video": minor
+"gradio": minor
+"gradio_client": minor
+---
+
+
+#### Setting File Upload Limits
+
+We have added a `max_file_size` size parameter to `launch()` that limits to size of files uploaded to the server. This limit applies to each individual file. This parameter can be specified as a string or an integer (corresponding to the size in bytes).
+
+The following code snippet sets a max file size of 5 megabytes.
+
+```python
+import gradio as gr
+
+demo = gr.Interface(lambda x: x, "image", "image")
+
+demo.launch(max_file_size="5mb")
+# or
+demo.launch(max_file_size=5 * gr.FileSize.MB)
+```
+
+![max_file_size_upload](https://github.com/gradio-app/gradio/assets/41651716/7547330c-a082-4901-a291-3f150a197e45)
+
+
+#### Error states can now be cleared
+
+When a component encounters an error, the error state shown in the UI can now be cleared by clicking on the `x` icon in the top right of the component. This applies to all types of errors, whether it's raised in the UI or the server.
+
+![error_modal_calculator](https://github.com/gradio-app/gradio/assets/41651716/16cb071c-accd-45a6-9c18-0dea27d4bd98)

.config/playwright-setup.js

@@ -115,7 +115,12 @@ ${demos.map((d) => `from demo.${d}.run import demo as ${d}`).join("\n")}
 
 app = FastAPI()
 ${demos
-	.map((d) => `app = gr.mount_gradio_app(app, ${d}, path="/${d}")`)
+	.map(
+		(d) =>
+			`app = gr.mount_gradio_app(app, ${d}, path="/${d}", max_file_size=${
+				d == "upload_file_limit_test" ? "'15kb'" : "None"
+			})`
+	)
 	.join("\n")}
 
 config = uvicorn.Config(app, port=${port}, log_level="info")

client/js/src/client.ts

@@ -250,6 +250,9 @@ export function api_factory(
 			} catch (e) {
 				return { error: BROKEN_CONNECTION_MSG };
 			}
+			if (!response.ok) {
+				return { error: await response.text() };
+			}
 			const output: UploadResponse["files"] = await response.json();
 			uploadResponses.push(...output);
 		}

client/js/src/types.ts

@@ -21,6 +21,7 @@ export interface Config {
 	stylesheets: string[];
 	path: string;
 	protocol?: "sse_v2.1" | "sse_v2" | "sse_v1" | "sse" | "ws";
+	max_file_size?: number;
 }
 
 export interface Payload {

client/js/src/upload.ts

@@ -13,12 +13,24 @@ export async function upload(
 	file_data: FileData[],
 	root: string,
 	upload_id?: string,
+	max_file_size?: number,
 	upload_fn: typeof upload_files = upload_files
 ): Promise<(FileData | null)[] | null> {
 	let files = (Array.isArray(file_data) ? file_data : [file_data]).map(
 		(file_data) => file_data.blob!
 	);
 
+	const oversized_files = files.filter(
+		(f) => f.size > (max_file_size ?? Infinity)
+	);
+	if (oversized_files.length) {
+		throw new Error(
+			`File size exceeds the maximum allowed size of ${max_file_size} bytes: ${oversized_files
+				.map((f) => f.name)
+				.join(", ")}`
+		);
+	}
+
 	return await Promise.all(
 		await upload_fn(root, files, undefined, upload_id).then(
 			async (response: { files?: string[]; error?: string }) => {

client/python/gradio_client/client.py

@@ -4,6 +4,7 @@ from __future__ import annotations
 import concurrent.futures
 import hashlib
 import json
+import math
 import os
 import re
 import secrets
@@ -17,6 +18,7 @@ import warnings
 from concurrent.futures import Future
 from dataclasses import dataclass
 from datetime import datetime
+from functools import partial
 from pathlib import Path
 from threading import Lock
 from typing import Any, Callable, Literal
@@ -1169,7 +1171,7 @@ class Endpoint:
             if self.client.upload_files and self.input_component_types[i].value_is_file:
                 d = utils.traverse(
                     d,
-                    self._upload_file,
+                    partial(self._upload_file, data_index=i),
                     lambda f: utils.is_filepath(f)
                     or utils.is_file_obj_with_meta(f)
                     or utils.is_http_url_like(f),
@@ -1217,7 +1219,7 @@ class Endpoint:
         else:
             return data
 
-    def _upload_file(self, f: str | dict) -> dict[str, str]:
+    def _upload_file(self, f: str | dict, data_index: int) -> dict[str, str]:
         if isinstance(f, str):
             warnings.warn(
                 f'The Client is treating: "{f}" as a file path. In future versions, this behavior will not happen automatically. '
@@ -1228,6 +1230,22 @@ class Endpoint:
         else:
             file_path = f["path"]
         if not utils.is_http_url_like(file_path):
+            component_id = self.dependency["inputs"][data_index]
+            component_config = next(
+                (
+                    c
+                    for c in self.client.config["components"]
+                    if c["id"] == component_id
+                ),
+                {},
+            )
+            max_file_size = self.client.config.get("max_file_size", None)
+            max_file_size = math.inf if max_file_size is None else max_file_size
+            if os.path.getsize(file_path) > max_file_size:
+                raise ValueError(
+                    f"File {file_path} exceeds the maximum file size of {max_file_size} bytes "
+                    f"set in {component_config.get('label', '') + ''} component."
+                )
             with open(file_path, "rb") as f:
                 files = [("files", (Path(file_path).name, f))]
                 r = httpx.post(

client/python/test/conftest.py

@@ -446,3 +446,16 @@ def many_endpoint_demo():
             butn2.click(noop, msg2, msg2)
 
     return demo
+
+
+@pytest.fixture
+def max_file_size_demo():
+    with gr.Blocks() as demo:
+        file_1b = gr.File()
+        upload_status = gr.Textbox()
+
+        file_1b.upload(
+            lambda x: "Upload successful", file_1b, upload_status, api_name="upload_1b"
+        )
+
+    return demo

client/python/test/files/alphabet.txt

@@ -0,0 +1 @@
+abcdefghijklmnopqrstuvwxyz

client/python/test/test_client.py

@@ -36,9 +36,12 @@ HF_TOKEN = os.getenv("HF_TOKEN") or HfFolder.get_token()
 
 @contextmanager
 def connect(
-    demo: gr.Blocks, serialize: bool = True, output_dir: str = DEFAULT_TEMP_DIR
+    demo: gr.Blocks,
+    serialize: bool = True,
+    output_dir: str = DEFAULT_TEMP_DIR,
+    max_file_size=None,
 ):
-    _, local_url, _ = demo.launch(prevent_thread_lock=True)
+    _, local_url, _ = demo.launch(prevent_thread_lock=True, max_file_size=max_file_size)
     try:
         yield Client(local_url, serialize=serialize, output_dir=output_dir)
     finally:
@@ -85,6 +88,18 @@ class TestClientPredictions:
         with pytest.raises(ValueError, match="invalid state"):
             Client("gradio-tests/paused-space")
 
+    def test_raise_error_max_file_size(self, max_file_size_demo):
+        with connect(max_file_size_demo, max_file_size="15kb") as client:
+            with pytest.raises(ValueError, match="exceeds the maximum file size"):
+                client.predict(
+                    file(Path(__file__).parent / "files" / "cheetah1.jpg"),
+                    api_name="/upload_1b",
+                )
+            client.predict(
+                file(Path(__file__).parent / "files" / "alphabet.txt"),
+                api_name="/upload_1b",
+            )
+
     @pytest.mark.flaky
     def test_numerical_to_label_space(self):
         client = Client("gradio-tests/titanic-survival")

demo/image_mod_default_image/run.ipynb

@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: image_mod_default_image"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "os.mkdir('images')\n", "!wget -q -O images/cheetah1.jpg https://github.com/gradio-app/gradio/raw/main/demo/image_mod_default_image/images/cheetah1.jpg\n", "!wget -q -O images/lion.jpg https://github.com/gradio-app/gradio/raw/main/demo/image_mod_default_image/images/lion.jpg\n", "!wget -q -O images/logo.png https://github.com/gradio-app/gradio/raw/main/demo/image_mod_default_image/images/logo.png"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import os\n", "\n", "\n", "def image_mod(image):\n", "    return image.rotate(45)\n", "\n", "\n", "cheetah = os.path.join(os.path.abspath(''), \"images/cheetah1.jpg\")\n", "\n", "demo = gr.Interface(image_mod, gr.Image(type=\"pil\", value=cheetah), \"image\",\n", "    flagging_options=[\"blurry\", \"incorrect\", \"other\"], examples=[\n", "        os.path.join(os.path.abspath(''), \"images/lion.jpg\"),\n", "        os.path.join(os.path.abspath(''), \"images/logo.png\")\n", "        ])\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: image_mod_default_image"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "os.mkdir('images')\n", "!wget -q -O images/cheetah1.jpg https://github.com/gradio-app/gradio/raw/main/demo/image_mod_default_image/images/cheetah1.jpg\n", "!wget -q -O images/lion.jpg https://github.com/gradio-app/gradio/raw/main/demo/image_mod_default_image/images/lion.jpg\n", "!wget -q -O images/logo.png https://github.com/gradio-app/gradio/raw/main/demo/image_mod_default_image/images/logo.png"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import os\n", "\n", "\n", "def image_mod(image):\n", "    return image.rotate(45)\n", "\n", "\n", "cheetah = os.path.join(os.path.abspath(''), \"images/cheetah1.jpg\")\n", "\n", "demo = gr.Interface(image_mod, gr.Image(type=\"pil\", value=cheetah), \"image\",\n", "    flagging_options=[\"blurry\", \"incorrect\", \"other\"], examples=[\n", "        os.path.join(os.path.abspath(''), \"images/lion.jpg\"),\n", "        os.path.join(os.path.abspath(''), \"images/logo.png\")\n", "        ])\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch(max_file_size=\"70kb\")\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/image_mod_default_image/run.py

@@ -15,4 +15,4 @@ demo = gr.Interface(image_mod, gr.Image(type="pil", value=cheetah), "image",
         ])
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch(max_file_size="70kb")

demo/upload_file_limit_test/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: upload_file_limit_test"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "with gr.Blocks() as demo:\n", "    gr.Markdown(\"\"\"\n", "    # \u2b06\ufe0f\ud83d\udcc1 max_file_size test\n", "    The demo has a max file size of 15kb. The error modal should pop up when a file larger than that is uploaded.          \n", "    \"\"\")\n", "    with gr.Row():\n", "        with gr.Column():\n", "            gr.Image(label=\"Image\", interactive=True)\n", "            gr.Gallery(label=\"Gallery\", interactive=True)\n", "            gr.File(label=\"Single File\", interactive=True, file_count=\"single\")\n", "        with gr.Column():\n", "            gr.Model3D(label=\"Model 3D\", interactive=True,)\n", "            gr.MultimodalTextbox(label=\"Multimodal Textbox\", interactive=True)\n", "            gr.UploadButton(label=\"Upload Button\", interactive=True)\n", "        with gr.Column():\n", "            gr.Video(label=\"Video\", interactive=True)\n", "            gr.Audio(label=\"Audio\", interactive=True)\n", "            gr.File(label=\"Multiple Files\", interactive=True, file_count=\"multiple\")\n", "\n", "\n", "if __name__ == \"__main__\":\n", "    # The upload limit is set in playwright_setup.js\n", "    # since the e2e tests use mount_gradio_app\n", "    demo.launch(max_file_size=\"15kb\")"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/upload_file_limit_test/run.py

@@ -0,0 +1,26 @@
+import gradio as gr
+
+with gr.Blocks() as demo:
+    gr.Markdown("""
+    # ⬆️📁 max_file_size test
+    The demo has a max file size of 15kb. The error modal should pop up when a file larger than that is uploaded.          
+    """)
+    with gr.Row():
+        with gr.Column():
+            gr.Image(label="Image", interactive=True)
+            gr.Gallery(label="Gallery", interactive=True)
+            gr.File(label="Single File", interactive=True, file_count="single")
+        with gr.Column():
+            gr.Model3D(label="Model 3D", interactive=True,)
+            gr.MultimodalTextbox(label="Multimodal Textbox", interactive=True)
+            gr.UploadButton(label="Upload Button", interactive=True)
+        with gr.Column():
+            gr.Video(label="Video", interactive=True)
+            gr.Audio(label="Audio", interactive=True)
+            gr.File(label="Multiple Files", interactive=True, file_count="multiple")
+
+
+if __name__ == "__main__":
+    # The upload limit is set in playwright_setup.js
+    # since the e2e tests use mount_gradio_app
+    demo.launch(max_file_size="15kb")

gradio/__init__.py

@@ -96,7 +96,7 @@ from gradio.templates import (
     TextArea,
 )
 from gradio.themes import Base as Theme
-from gradio.utils import NO_RELOAD, get_package_version, set_static_paths
+from gradio.utils import NO_RELOAD, FileSize, get_package_version, set_static_paths
 from gradio.wasm_utils import IS_WASM
 
 if not IS_WASM:

gradio/blocks.py

@@ -1853,6 +1853,7 @@ Received outputs:
             "show_error": getattr(self, "show_error", False),
             "show_api": self.show_api,
             "is_colab": utils.colab_check(),
+            "max_file_size": getattr(self, "max_file_size", None),
             "stylesheets": self.stylesheets,
             "theme": self.theme.name,
             "protocol": "sse_v3",
@@ -2031,6 +2032,7 @@ Received outputs:
         share_server_address: str | None = None,
         share_server_protocol: Literal["http", "https"] | None = None,
         auth_dependency: Callable[[fastapi.Request], str | None] | None = None,
+        max_file_size: str | int | None = None,
         _frontend: bool = True,
     ) -> tuple[FastAPI, str, str]:
         """
@@ -2066,6 +2068,7 @@ Received outputs:
             share_server_address: Use this to specify a custom FRP server and port for sharing Gradio apps (only applies if share=True). If not provided, will use the default FRP server at https://gradio.live. See https://github.com/huggingface/frp for more information.
             share_server_protocol: Use this to specify the protocol to use for the share links. Defaults to "https", unless a custom share_server_address is provided, in which case it defaults to "http". If you are using a custom share_server_address and want to use https, you must set this to "https".
             auth_dependency: A function that takes a FastAPI request and returns a string user ID or None. If the function returns None for a specific request, that user is not authorized to access the app (they will see a 401 Unauthorized response). To be used with external authentication systems like OAuth. Cannot be used with `auth`.
+            max_file_size: The maximum file size in bytes that can be uploaded. Can be a string of the form "<value><unit>", where value is any positive integer and unit is one of "b", "kb", "mb", "gb", "tb". If None, no limit is set.
         Returns:
             app: FastAPI app object that is running the demo
             local_url: Locally accessible link to the demo
@@ -2128,6 +2131,7 @@ Received outputs:
             raise ValueError("`blocked_paths` must be a list of directories.")
 
         self.validate_queue_settings()
+        self.max_file_size = utils._parse_file_size(max_file_size)
 
         self.config = self.get_config_file()
         self.max_threads = max_threads

gradio/route_utils.py

@@ -454,6 +454,7 @@ class GradioMultiPartParser:
         max_fields: Union[int, float] = 1000,
         upload_id: str | None = None,
         upload_progress: FileUploadProgress | None = None,
+        max_file_size: int | float,
     ) -> None:
         self.headers = headers
         self.stream = stream
@@ -464,6 +465,7 @@ class GradioMultiPartParser:
         self.upload_progress = upload_progress
         self._current_files = 0
         self._current_fields = 0
+        self.max_file_size = max_file_size
         self._current_partial_header_name: bytes = b""
         self._current_partial_header_value: bytes = b""
         self._current_part = MultipartPart()
@@ -594,6 +596,12 @@ class GradioMultiPartParser:
                     assert part.file  # for type checkers  # noqa: S101
                     await part.file.write(data)
                     part.file.sha.update(data)  # type: ignore
+                    if os.stat(part.file.file.name).st_size > self.max_file_size:
+                        if self.upload_progress is not None:
+                            self.upload_progress.set_done(self.upload_id)  # type: ignore
+                        raise MultiPartException(
+                            f"File size exceeded maximum allowed size of {self.max_file_size} bytes."
+                        )
                 for part in self._file_parts_to_finish:
                     assert part.file  # for type checkers  # noqa: S101
                     await part.file.seek(0)
@@ -603,6 +611,7 @@ class GradioMultiPartParser:
             # Close all the files if there was an error.
             for file in self._files_to_close_on_error:
                 file.close()
+                Path(file.name).unlink()
             raise exc
 
         parser.finalize()

gradio/routes.py

@@ -5,6 +5,7 @@ from __future__ import annotations
 
 import asyncio
 import contextlib
+import math
 import sys
 
 if sys.version_info >= (3, 9):
@@ -1043,21 +1044,26 @@ class App(FastAPI):
             try:
                 if upload_id:
                     file_upload_statuses.track(upload_id)
+                max_file_size = app.get_blocks().max_file_size
+                max_file_size = max_file_size if max_file_size is not None else math.inf
                 multipart_parser = GradioMultiPartParser(
                     request.headers,
                     request.stream(),
                     max_files=1000,
                     max_fields=1000,
+                    max_file_size=max_file_size,
                     upload_id=upload_id if upload_id else None,
                     upload_progress=file_upload_statuses if upload_id else None,
                 )
                 form = await multipart_parser.parse()
             except MultiPartException as exc:
-                raise HTTPException(status_code=400, detail=exc.message) from exc
+                code = 413 if "maximum allowed size" in exc.message else 400
+                return PlainTextResponse(exc.message, status_code=code)
 
             output_files = []
             files_to_copy = []
             locations: list[str] = []
+
             for temp_file in form.getlist("files"):
                 if not isinstance(temp_file, GradioUploadFile):
                     raise TypeError("File is not an instance of GradioUploadFile")
@@ -1172,6 +1178,7 @@ def mount_gradio_app(
     blocked_paths: list[str] | None = None,
     favicon_path: str | None = None,
     show_error: bool = True,
+    max_file_size: str | int | None = None,
 ) -> fastapi.FastAPI:
     """Mount a gradio.Blocks to an existing FastAPI application.
 
@@ -1188,6 +1195,7 @@ def mount_gradio_app(
         blocked_paths: List of complete filepaths or parent directories that this gradio app is not allowed to serve (i.e. users of your app are not allowed to access). Must be absolute paths. Warning: takes precedence over `allowed_paths` and all other directories exposed by Gradio by default.
         favicon_path: If a path to a file (.png, .gif, or .ico) is provided, it will be used as the favicon for this gradio app's page.
         show_error: If True, any errors in the gradio app will be displayed in an alert modal and printed in the browser console log. Otherwise, errors will only be visible in the terminal session running the Gradio app.
+        max_file_size: The maximum file size in bytes that can be uploaded. Can be a string of the form "<value><unit>", where value is any positive integer and unit is one of "b", "kb", "mb", "gb", "tb". If None, no limit is set.
     Example:
         from fastapi import FastAPI
         import gradio as gr
@@ -1200,6 +1208,7 @@ def mount_gradio_app(
         # Then run `uvicorn run:app` from the terminal and navigate to http://localhost:8000/gradio.
     """
     blocks.dev_mode = False
+    blocks.max_file_size = utils._parse_file_size(max_file_size)
     blocks.config = blocks.get_config_file()
     blocks.validate_queue_settings()
     if auth is not None and auth_dependency is not None:

gradio/utils.py

@@ -1280,3 +1280,27 @@ def async_lambda(f: Callable) -> Callable:
         return f(*args, **kwargs)
 
     return function_wrapper
+
+
+class FileSize:
+    B = 1
+    KB = 1024 * B
+    MB = 1024 * KB
+    GB = 1024 * MB
+    TB = 1024 * GB
+
+
+def _parse_file_size(size: str | int | None) -> int | None:
+    if isinstance(size, int) or size is None:
+        return size
+
+    size = size.replace(" ", "")
+
+    last_digit_index = next(
+        (i for i, c in enumerate(size) if not c.isdigit()), len(size)
+    )
+    size_int, unit = int(size[:last_digit_index]), size[last_digit_index:].upper()
+    multiple = getattr(FileSize, unit, None)
+    if not multiple:
+        raise ValueError(f"Invalid file size unit: {unit}")
+    return multiple * size_int

guides/01_getting-started/03_sharing-your-app.md

@@ -451,4 +451,16 @@ Gradio DOES NOT ALLOW access to:
 
 - **Any other paths on the host machine**. Users should NOT be able to access other arbitrary paths on the host.
 
+Sharing your Gradio application will also allow users to upload files to your computer or server. You can set a maximum file size for uploads to prevent abuse and to preserve disk space. You can do this with the `max_file_size` parameter of `.launch`. For example, the following two code snippets limit file uploads to 5 megabytes per file.
+
+```python
+import gradio as gr
+
+demo = gr.Interface(lambda x: x, "image", "image")
+
+demo.launch(max_file_size="5mb")
+# or
+demo.launch(max_file_size=5 * gr.FileSize.MB)
+```
+
 Please make sure you are running the latest version of `gradio` for these security settings to apply.

js/app/src/Blocks.svelte

@@ -3,7 +3,7 @@
 	import { _ } from "svelte-i18n";
 	import { client } from "@gradio/client";
 
-	import type { LoadingStatusCollection } from "./stores";
+	import type { LoadingStatus, LoadingStatusCollection } from "./stores";
 
 	import type { ComponentMeta, Dependency, LayoutNode } from "./types";
 	import type { UpdateTransaction } from "./init";
@@ -430,6 +430,8 @@
 				trigger_share(title, description);
 			} else if (event === "error" || event === "warning") {
 				messages = [new_message(data, -1, event), ...messages];
+			} else if (event == "clear_status") {
+				update_status(id, "complete", data);
 			} else {
 				const deps = $targets[id]?.[event];
 
@@ -452,6 +454,21 @@
 
 	$: set_status($loading_status);
 
+	function update_status(
+		id: number,
+		status: "error" | "complete" | "pending",
+		data: LoadingStatus
+	): void {
+		data.status = status;
+		update_value([
+			{
+				id,
+				prop: "loading_status",
+				value: data
+			}
+		]);
+	}
+
 	function set_status(statuses: LoadingStatusCollection): void {
 		const updates = Object.entries(statuses).map(([id, loading_status]) => {
 			let dependency = dependencies[loading_status.fn_index];
@@ -518,6 +535,7 @@
 				on:destroy={({ detail }) => handle_destroy(detail)}
 				{version}
 				{autoscroll}
+				max_file_size={app.config.max_file_size}
 			/>
 		{/if}
 	</div>

js/app/src/MountComponents.svelte

@@ -8,6 +8,7 @@
 	export let theme_mode: any;
 	export let version: any;
 	export let autoscroll: boolean;
+	export let max_file_size: number | null = null;
 
 	const dispatch = createEventDispatcher<{ mount?: never }>();
 	onMount(() => {
@@ -15,4 +16,12 @@
 	});
 </script>
 
-<Render node={rootNode} {root} {target} {theme_mode} {version} {autoscroll} />
+<Render
+	node={rootNode}
+	{root}
+	{target}
+	{theme_mode}
+	{version}
+	{autoscroll}
+	{max_file_size}
+/>

js/app/src/Render.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Gradio } from "./gradio_helper";
+	import { Gradio, formatter } from "./gradio_helper";
 	import { onMount, createEventDispatcher, setContext } from "svelte";
 	import type { ComponentMeta, ThemeMode } from "./types";
 	import RenderComponent from "./RenderComponent.svelte";
@@ -12,6 +12,7 @@
 	export let theme_mode: ThemeMode;
 	export let version: string;
 	export let autoscroll: boolean;
+	export let max_file_size: number | null;
 
 	const dispatch = createEventDispatcher<{ mount: number; destroy: number }>();
 	let filtered_children: ComponentMeta[] = [];
@@ -74,7 +75,16 @@
 	{...node.props}
 	{theme_mode}
 	{root}
-	gradio={new Gradio(node.id, target, theme_mode, version, root, autoscroll)}
+	gradio={new Gradio(
+		node.id,
+		target,
+		theme_mode,
+		version,
+		root,
+		autoscroll,
+		max_file_size,
+		formatter
+	)}
 >
 	{#if node.children && node.children.length}
 		{#each node.children as _node (_node.id)}
@@ -87,6 +97,7 @@
 				{theme_mode}
 				on:destroy
 				on:mount
+				{max_file_size}
 			/>
 		{/each}
 	{/if}

js/app/src/gradio_helper.ts

@@ -1,41 +1,7 @@
 import { format } from "svelte-i18n";
 import { get } from "svelte/store";
+export { Gradio } from "@gradio/utils";
 
-const x = get(format);
+export const formatter = get(format);
 
-export type I18nFormatter = typeof x;
-export class Gradio<T extends Record<string, any> = Record<string, any>> {
-	#id: number;
-	theme: string;
-	version: string;
-	i18n: typeof x;
-	#el: HTMLElement;
-	root: string;
-	autoscroll: boolean;
-
-	constructor(
-		id: number,
-		el: HTMLElement,
-		theme: string,
-		version: string,
-		root: string,
-		autoscroll: boolean
-	) {
-		this.#id = id;
-		this.theme = theme;
-		this.version = version;
-		this.#el = el;
-		this.i18n = get(format);
-		this.root = root;
-		this.autoscroll = autoscroll;
-	}
-
-	dispatch<E extends keyof T>(event_name: E, data?: T[E]): void {
-		const e = new CustomEvent("gradio", {
-			bubbles: true,
-			detail: { data, id: this.#id, event: event_name }
-		});
-
-		this.#el.dispatchEvent(e);
-	}
-}
+export type I18nFormatter = typeof formatter;

js/app/test/upload_file_limit_test.spec.ts

@@ -0,0 +1,153 @@
+import { test, expect } from "@gradio/tootils";
+
+async function error_modal_showed(page) {
+	const toast = page.getByTestId("toast-body");
+	expect(toast).toContainText("error");
+	const close = page.getByTestId("toast-close");
+	await close.click();
+	await expect(page.getByTestId("toast-body")).toHaveCount(0);
+}
+
+async function get_file_selector(page, locator) {
+	//source https://stackoverflow.com/questions/74048369/setinputfiles-gives-error-on-antd-upload-component
+	let [file_chooser] = await Promise.all([
+		page.waitForEvent("filechooser"),
+		locator.click()
+	]);
+
+	return file_chooser;
+}
+
+test("gr.Image triggers the gr.Error model when an uploaded file exceeds max_file_size ", async ({
+	page
+}) => {
+	const file_chooser = await get_file_selector(
+		page,
+		page.getByRole("button", { name: "Drop Image Here - or - Click to Upload" })
+	);
+	await file_chooser.setFiles("./test/files/cheetah1.jpg");
+	await error_modal_showed(page);
+});
+
+test("gr.File(file_count='single') triggers the gr.Error modal when an uploaded file exceeds max_file_size ", async ({
+	page
+}) => {
+	const locator = page.getByText(
+		"Single File Drop File Here - or - Click to Upload"
+	);
+	const file_chooser = await get_file_selector(page, locator);
+	await file_chooser.setFiles("./test/files/cheetah1.jpg");
+	await error_modal_showed(page);
+});
+
+test("gr.File(file_count='multiple') triggers the gr.Error modal when an uploaded file exceeds max_file_size ", async ({
+	page
+}) => {
+	const locator = page.getByText(
+		"Multiple Files Drop File Here - or - Click to Upload"
+	);
+	const file_chooser = await get_file_selector(page, locator);
+	await file_chooser.setFiles([
+		"./test/files/cheetah1.jpg",
+		"./test/files/alphabet.txt"
+	]);
+	await error_modal_showed(page);
+});
+
+test("gr.Gallery() triggers the gr.Error modal when an uploaded file exceeds max_file_size ", async ({
+	page
+}) => {
+	const locator = page.getByText(
+		"Gallery Drop Image(s) Here - or - Click to Upload"
+	);
+	const file_chooser = await get_file_selector(page, locator);
+	await file_chooser.setFiles(["./test/files/cheetah1.jpg"]);
+	await error_modal_showed(page);
+});
+
+test("gr.Model3D() triggers the gr.Error modal when an uploaded file exceeds max_file_size ", async ({
+	page
+}) => {
+	const locator = page.getByText(
+		"Model 3D Drop File Here - or - Click to Upload"
+	);
+	const file_chooser = await get_file_selector(page, locator);
+	await file_chooser.setFiles(["./test/files/face.obj"]);
+	await error_modal_showed(page);
+});
+
+test("gr.MultimodalTextBox() triggers the gr.Error modal when an uploaded file exceeds max_file_size ", async ({
+	page
+}) => {
+	const locator = page.getByRole("button", { name: "+" });
+	const file_chooser = await get_file_selector(page, locator);
+	await file_chooser.setFiles(["./test/files/face.obj"]);
+	await error_modal_showed(page);
+});
+
+test("gr.UploadButton() triggers the gr.Error modal when an uploaded file exceeds max_file_size ", async ({
+	page
+}) => {
+	const locator = page.getByRole("button", {
+		name: "Upload Button",
+		exact: true
+	});
+	const file_chooser = await get_file_selector(page, locator);
+	await file_chooser.setFiles(["./test/files/face.obj"]);
+	await error_modal_showed(page);
+});
+
+test("gr.Video() triggers the gr.Error modal when an uploaded file exceeds max_file_size ", async ({
+	page
+}) => {
+	const locator = page.getByText(
+		"Video Drop Video Here - or - Click to Upload"
+	);
+	const file_chooser = await get_file_selector(page, locator);
+	await file_chooser.setFiles(["./test/files/world.mp4"]);
+	await error_modal_showed(page);
+});
+
+test("gr.Audio() triggers the gr.Error modal when an uploaded file exceeds max_file_size ", async ({
+	page
+}) => {
+	const locator = page.getByText(
+		"Audio Drop Audio Here - or - Click to Upload"
+	);
+	const file_chooser = await get_file_selector(page, locator);
+	await file_chooser.setFiles(["./test/files/world.mp4"]);
+	await error_modal_showed(page);
+});
+
+test("gr.File() will allow uploads below the max_file_size limit of 15kb", async ({
+	page
+}) => {
+	// test fails because the error modal does not show up
+	test.fail();
+
+	const locator = page.getByText(
+		"Single File Drop File Here - or - Click to Upload"
+	);
+	const file_chooser = await get_file_selector(page, locator);
+	await file_chooser.setFiles(["./test/files/gradio-logo.svg"]);
+	await expect(page.getByTestId("toast-body")).toHaveCount(1, {
+		timeout: 2000
+	});
+});
+
+test("gr.UploadButton() will allow uploads below the max_file_size limit of 15kb", async ({
+	page
+}) => {
+	// test fails because the error modal does not show up
+	test.fail();
+
+	const locator = page.getByRole("button", {
+		name: "Upload Button",
+		exact: true
+	});
+	const file_chooser = await get_file_selector(page, locator);
+	await file_chooser.setFiles(["./test/files/time.csv"]);
+	await expect(page.getByTestId("toast-body")).toHaveCount(1, {
+		timeout: 2000
+	});
+});

js/audio/Index.svelte

@@ -52,6 +52,7 @@
 		upload: never;
 		clear: never;
 		share: ShareData;
+		clear_status: LoadingStatus;
 	}>;
 
 	let old_value: null | FileData = null;
@@ -151,6 +152,7 @@
 			autoscroll={gradio.autoscroll}
 			i18n={gradio.i18n}
 			{...loading_status}
+			on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
 		/>
 
 		<StaticAudio
@@ -187,6 +189,7 @@
 			autoscroll={gradio.autoscroll}
 			i18n={gradio.i18n}
 			{...loading_status}
+			on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
 		/>
 		<InteractiveAudio
 			{label}
@@ -204,6 +207,7 @@
 			{active_source}
 			{pending}
 			{streaming}
+			max_file_size={gradio.max_file_size}
 			{handle_reset_value}
 			{editable}
 			bind:dragging

js/audio/interactive/InteractiveAudio.svelte

@@ -38,6 +38,7 @@
 	export let active_source: "microphone" | "upload";
 	export let handle_reset_value: () => void = () => {};
 	export let editable = true;
+	export let max_file_size: number | null = null;
 
 	// Needed for wasm support
 	const upload_fn = getContext<typeof upload_files>("upload_files");
@@ -97,9 +98,9 @@
 		let _audio_blob = new File(blobs, "audio.wav");
 		const val = await prepare_files([_audio_blob], event === "stream");
 		value = (
-			(await upload(val, root, undefined, upload_fn))?.filter(
-				Boolean
-			) as FileData[]
+			(
+				await upload(val, root, undefined, max_file_size ?? Infinity, upload_fn)
+			)?.filter(Boolean) as FileData[]
 		)[0];
 
 		dispatch(event, value);
@@ -255,6 +256,7 @@
 				bind:dragging
 				on:error={({ detail }) => dispatch("error", detail)}
 				{root}
+				{max_file_size}
 			>
 				<slot />
 			</Upload>

js/chatbot/Index.svelte

@@ -45,6 +45,7 @@
 		share: ShareData;
 		error: string;
 		like: LikeData;
+		clear_status: LoadingStatus;
 	}>;
 	export let avatar_images: [FileData | null, FileData | null] = [null, null];
 
@@ -102,6 +103,7 @@
 			show_progress={loading_status.show_progress === "hidden"
 				? "hidden"
 				: "minimal"}
+			on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
 		/>
 	{/if}
 	<div class="wrapper">

js/checkbox/Index.svelte

@@ -26,6 +26,7 @@
 		change: never;
 		select: SelectData;
 		input: never;
+		clear_status: LoadingStatus;
 	}>;
 	export let interactive: boolean;
 
@@ -48,6 +49,7 @@
 		autoscroll={gradio.autoscroll}
 		i18n={gradio.i18n}
 		{...loading_status}
+		on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
 	/>
 
 	{#if info}

js/checkboxgroup/Index.svelte

@@ -10,6 +10,7 @@
 		change: never;
 		select: SelectData;
 		input: never;
+		clear_status: LoadingStatus;
 	}>;
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
@@ -57,6 +58,7 @@
 		autoscroll={gradio.autoscroll}
 		i18n={gradio.i18n}
 		{...loading_status}
+		on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
 	/>
 	<BlockTitle {show_label} {info}>{label}</BlockTitle>
 

js/code/Index.svelte

@@ -23,6 +23,7 @@
 		input: never;
 		blur: never;
 		focus: never;
+		clear_status: LoadingStatus;
 	}>;
 	export let value = "";
 	export let value_is_output = false;
@@ -65,6 +66,7 @@
 		autoscroll={gradio.autoscroll}
 		i18n={gradio.i18n}
 		{...loading_status}
+		on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
 	/>
 
 	<BlockLabel Icon={CodeIcon} {show_label} {label} float={false} />

js/colorpicker/Index.svelte

@@ -31,6 +31,7 @@
 		submit: never;
 		blur: never;
 		focus: never;
+		clear_status: LoadingStatus;
 	}>;
 	export let interactive: boolean;
 </script>
@@ -40,6 +41,7 @@
 		autoscroll={gradio.autoscroll}
 		i18n={gradio.i18n}
 		{...loading_status}
+		on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
 	/>
 
 	<Colorpicker

js/dataframe/Index.svelte

@@ -38,6 +38,7 @@
 		change: never;
 		select: SelectData;
 		input: never;
+		clear_status: LoadingStatus;
 	}>;
 	export let latex_delimiters: {
 		left: string;
@@ -127,6 +128,7 @@
 		autoscroll={gradio.autoscroll}
 		i18n={gradio.i18n}
 		{...loading_status}
+		on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
 	/>
 	<Table
 		{root}

js/dropdown/Index.svelte

@@ -36,6 +36,7 @@
 		blur: never;
 		focus: never;
 		key_up: KeyUpData;
+		clear_status: LoadingStatus;
 	}>;
 	export let interactive: boolean;
 </script>
@@ -53,6 +54,7 @@
 		autoscroll={gradio.autoscroll}
 		i18n={gradio.i18n}
 		{...loading_status}
+		on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
 	/>
 
 	{#if multiselect}

js/fallback/Index.svelte

@@ -19,6 +19,7 @@
 		change: never;
 		select: SelectData;
 		input: never;
+		clear_status: LoadingStatus;
 	}>;
 </script>
 
@@ -28,6 +29,7 @@
 			autoscroll={gradio.autoscroll}
 			i18n={gradio.i18n}
 			{...loading_status}
+			on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
 		/>
 	{/if}
 

js/file/Index.svelte

@@ -39,6 +39,7 @@
 		upload: never;
 		clear: never;
 		select: SelectData;
+		clear_status: LoadingStatus;
 	}>;
 	export let file_count: string;
 	export let file_types: string[] = ["file"];
@@ -72,6 +73,7 @@
 		status={pending_upload
 			? "generating"
 			: loading_status?.status || "complete"}
+		on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
 	/>
 	{#if !interactive}
 		<File
@@ -93,6 +95,7 @@
 			selectable={_selectable}
 			{root}
 			{height}
+			max_file_size={gradio.max_file_size}
 			on:change={({ detail }) => {
 				value = detail;
 			}}
@@ -100,6 +103,11 @@
 			on:clear={() => gradio.dispatch("clear")}
 			on:select={({ detail }) => gradio.dispatch("select", detail)}
 			on:upload={() => gradio.dispatch("upload")}
+			on:error={({ detail }) => {
+				loading_status = loading_status || {};
+				loading_status.status = "error";
+				gradio.dispatch("error", detail);
+			}}
 			i18n={gradio.i18n}
 		>
 			<UploadText i18n={gradio.i18n} type="file" />

js/file/shared/FileUpload.svelte

@@ -18,6 +18,7 @@
 	export let root: string;
 	export let height: number | undefined = undefined;
 	export let i18n: I18nFormatter;
+	export let max_file_size: number | null = null;
 
 	async function handle_upload({
 		detail
@@ -62,8 +63,10 @@
 		on:load={handle_upload}
 		filetype={file_types}
 		{file_count}
+		{max_file_size}
 		{root}
 		bind:dragging
+		on:error
 	>
 		<slot />
 	</Upload>

js/fileexplorer/Index.svelte

@@ -31,6 +31,7 @@
 	export let min_width: number | undefined = undefined;
 	export let gradio: Gradio<{
 		change: never;
+		clear_status: LoadingStatus;
 	}>;
 	export let server: {
 		ls: (path: string[]) => Promise<FileNode[]>;
@@ -62,6 +63,7 @@
 		{...loading_status}
 		autoscroll={gradio.autoscroll}
 		i18n={gradio.i18n}
+		on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
 	/>
 	<BlockLabel
 		{show_label}

js/gallery/Index.svelte

@@ -41,6 +41,7 @@
 		share: ShareData;
 		error: string;
 		prop_change: Record<string, any>;
+		clear_status: LoadingStatus;
 	}>;
 
 	const dispatch = createEventDispatcher();
@@ -65,12 +66,14 @@
 		autoscroll={gradio.autoscroll}
 		i18n={gradio.i18n}
 		{...loading_status}
+		on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
 	/>
 	{#if interactive && no_value}
 		<BaseFileUpload
 			value={null}
 			{root}
 			{label}
+			max_file_size={gradio.max_file_size}
 			file_count={"multiple"}
 			file_types={["image"]}
 			i18n={gradio.i18n}
@@ -79,6 +82,11 @@
 				value = files.map((x) => ({ image: x, caption: null }));
 				gradio.dispatch("upload", value);
 			}}
+			on:error={({ detail }) => {
+				loading_status = loading_status || {};
+				loading_status.status = "error";
+				gradio.dispatch("error", detail);
+			}}
 		>
 			<UploadText i18n={gradio.i18n} type="gallery" />
 		</BaseFileUpload>

js/highlightedtext/HighlightedText.stories.svelte

@@ -13,14 +13,6 @@
 			{ token: "dogs", class_or_confidence: "-" },
 			{ token: "elephants", class_or_confidence: "+" }
 		]}
-		gradio={new Gradio(
-			0,
-			document.body,
-			"light",
-			"1.1.1",
-			"http://localhost:7860",
-			false
-		)}
 		{...args}
 	/>
 </Template>

js/highlightedtext/Index.svelte

@@ -16,6 +16,7 @@
 	export let gradio: Gradio<{
 		select: SelectData;
 		change: never;
+		clear_status: LoadingStatus;
 	}>;
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
@@ -69,6 +70,7 @@
 			autoscroll={gradio.autoscroll}
 			i18n={gradio.i18n}
 			{...loading_status}
+			on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
 		/>
 		{#if label}
 			<BlockLabel
@@ -109,6 +111,7 @@
 			autoscroll={gradio.autoscroll}
 			{...loading_status}
 			i18n={gradio.i18n}
+			on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
 		/>
 		{#if label}
 			<BlockLabel

js/html/Index.svelte

@@ -13,6 +13,7 @@
 	export let loading_status: LoadingStatus;
 	export let gradio: Gradio<{
 		change: never;
+		clear_status: LoadingStatus;
 	}>;
 
 	$: label, gradio.dispatch("change");
@@ -24,6 +25,7 @@
 		i18n={gradio.i18n}
 		{...loading_status}
 		variant="center"
+		on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
 	/>
 	<div class:pending={loading_status?.status === "pending"}>
 		<HTML

js/image/Index.svelte

@@ -60,6 +60,7 @@
 		clear: never;
 		select: SelectData;
 		share: ShareData;
+		clear_status: LoadingStatus;
 	}>;
 
 	$: {
@@ -125,6 +126,7 @@
 			autoscroll={gradio.autoscroll}
 			i18n={gradio.i18n}
 			{...loading_status}
+			on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
 		/>
 
 		<ImageUploader
@@ -152,6 +154,7 @@
 			{pending}
 			{streaming}
 			{mirror_webcam}
+			max_file_size={gradio.max_file_size}
 			i18n={gradio.i18n}
 		>
 			{#if active_source === "upload" || !active_source}

js/image/shared/ImageUploader.svelte

@@ -25,6 +25,7 @@
 	export let selectable = false;
 	export let root: string;
 	export let i18n: I18nFormatter;
+	export let max_file_size: number | null = null;
 
 	let upload: Upload;
 	let uploading = false;
@@ -114,6 +115,7 @@
 			on:load={handle_upload}
 			on:error
 			{root}
+			{max_file_size}
 			disable_click={!sources.includes("upload")}
 		>
 			{#if value === null}

js/imageeditor/Index.svelte

@@ -66,6 +66,7 @@
 		clear: never;
 		select: SelectData;
 		share: ShareData;
+		clear_status: LoadingStatus;
 	}>;
 
 	let editor_instance: InteractiveImageEditor;
@@ -136,6 +137,7 @@
 			autoscroll={gradio.autoscroll}
 			i18n={gradio.i18n}
 			{...loading_status}
+			on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
 		/>
 		<StaticImage
 			on:select={({ detail }) => gradio.dispatch("select", detail)}
@@ -169,6 +171,7 @@
 			autoscroll={gradio.autoscroll}
 			i18n={gradio.i18n}
 			{...loading_status}
+			on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
 		/>
 
 		<InteractiveImageEditor

js/json/Index.svelte

@@ -24,6 +24,7 @@
 	export let min_width: number | undefined = undefined;
 	export let gradio: Gradio<{
 		change: never;
+		clear_status: LoadingStatus;
 	}>;
 
 	$: {
@@ -58,6 +59,7 @@
 		autoscroll={gradio.autoscroll}
 		i18n={gradio.i18n}
 		{...loading_status}
+		on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
 	/>
 
 	<JSON {value} />

js/label/Index.svelte

@@ -13,6 +13,7 @@
 	export let gradio: Gradio<{
 		change: never;
 		select: SelectData;
+		clear_status: LoadingStatus;
 	}>;
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
@@ -48,6 +49,7 @@
 		autoscroll={gradio.autoscroll}
 		i18n={gradio.i18n}
 		{...loading_status}
+		on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
 	/>
 	{#if show_label}
 		<BlockLabel Icon={LabelIcon} {label} disable={container === false} />

js/markdown/Index.svelte

@@ -23,6 +23,7 @@
 	export let line_breaks = false;
 	export let gradio: Gradio<{
 		change: never;
+		clear_status: LoadingStatus;
 	}>;
 	export let latex_delimiters: {
 		left: string;
@@ -46,6 +47,7 @@
 		i18n={gradio.i18n}
 		{...loading_status}
 		variant="center"
+		on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
 	/>
 	<div class:pending={loading_status?.status === "pending"}>
 		<Markdown

js/model3D/Index.svelte

@@ -59,6 +59,7 @@
 			autoscroll={gradio.autoscroll}
 			i18n={gradio.i18n}
 			{...loading_status}
+			on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
 		/>
 
 		{#if value}
@@ -97,6 +98,7 @@
 			autoscroll={gradio.autoscroll}
 			i18n={gradio.i18n}
 			{...loading_status}
+			on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
 		/>
 
 		<Model3DUpload
@@ -118,7 +120,13 @@
 				value = detail;
 				gradio.dispatch("upload");
 			}}
+			on:error={({ detail }) => {
+				loading_status = loading_status || {};
+				loading_status.status = "error";
+				gradio.dispatch("error", detail);
+			}}
 			i18n={gradio.i18n}
+			max_file_size={gradio.max_file_size}
 		>
 			<UploadText i18n={gradio.i18n} type="file" />
 		</Model3DUpload>

js/model3D/shared/Model3DUpload.svelte

@@ -16,6 +16,7 @@
 	export let i18n: I18nFormatter;
 	export let zoom_speed = 1;
 	export let pan_speed = 1;
+	export let max_file_size: number | null = null;
 
 	// alpha, beta, radius
 	export let camera_position: [number | null, number | null, number | null] = [
@@ -87,8 +88,10 @@
 	<Upload
 		on:load={handle_upload}
 		{root}
+		{max_file_size}
 		filetype={[".stl", ".obj", ".gltf", ".glb", "model/obj", ".splat", ".ply"]}
 		bind:dragging
+		on:error
 	>
 		<slot />
 	</Upload>

js/multimodaltextbox/Index.svelte

@@ -20,6 +20,8 @@
 		select: SelectData;
 		input: never;
 		focus: never;
+		error: string;
+		clear_status: LoadingStatus;
 	}>;
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
@@ -63,6 +65,7 @@
 			autoscroll={gradio.autoscroll}
 			i18n={gradio.i18n}
 			{...loading_status}
+			on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
 		/>
 	{/if}
 
@@ -83,12 +86,16 @@
 		{autofocus}
 		{container}
 		{autoscroll}
+		max_file_size={gradio.max_file_size}
 		on:change={() => gradio.dispatch("change", value)}
 		on:input={() => gradio.dispatch("input")}
 		on:submit={() => gradio.dispatch("submit")}
 		on:blur={() => gradio.dispatch("blur")}
 		on:select={(e) => gradio.dispatch("select", e.detail)}
 		on:focus={() => gradio.dispatch("focus")}
+		on:error={({ detail }) => {
+			gradio.dispatch("error", detail);
+		}}
 		disabled={!interactive}
 	/>
 </Block>

js/multimodaltextbox/shared/MultimodalTextbox.svelte

@@ -34,6 +34,7 @@
 	export let autoscroll = true;
 	export let root: string;
 	export let file_types: string[] | null = null;
+	export let max_file_size: number | null = null;
 
 	let upload_component: Upload;
 	let hidden_upload: HTMLInputElement;
@@ -176,6 +177,7 @@
 
 	function handle_upload_click(): void {
 		if (hidden_upload) {
+			hidden_upload.value = "";
 			hidden_upload.click();
 		}
 	}
@@ -206,11 +208,13 @@
 			on:load={handle_upload}
 			filetype={accept_file_types}
 			{root}
+			{max_file_size}
 			bind:dragging
 			bind:uploading
 			show_progress={false}
 			disable_click={true}
 			bind:hidden_upload
+			on:error
 		>
 			{#if submit_btn !== null}
 				<button class:disabled class="submit-button" on:click={handle_submit}

js/number/Index.svelte

@@ -11,6 +11,7 @@
 		submit: never;
 		blur: never;
 		focus: never;
+		clear_status: LoadingStatus;
 	}>;
 	export let label = gradio.i18n("number.number");
 	export let info: string | undefined = undefined;
@@ -66,6 +67,7 @@
 		autoscroll={gradio.autoscroll}
 		i18n={gradio.i18n}
 		{...loading_status}
+		on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
 	/>
 	<label class="block" class:container>
 		<BlockTitle {show_label} {info}>{label}</BlockTitle>

js/plot/Index.svelte

@@ -30,6 +30,7 @@
 	export let bokeh_version: string | null;
 	export let gradio: Gradio<{
 		change: never;
+		clear_status: LoadingStatus;
 	}>;
 	export let show_actions_button = false;
 </script>
@@ -53,6 +54,7 @@
 		autoscroll={gradio.autoscroll}
 		i18n={gradio.i18n}
 		{...loading_status}
+		on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
 	/>
 	<Plot
 		{value}

js/radio/Index.svelte

@@ -15,6 +15,7 @@
 		change: never;
 		select: SelectData;
 		input: never;
+		clear_status: LoadingStatus;
 	}>;
 
 	export let label = gradio.i18n("radio.radio");
@@ -53,6 +54,7 @@
 		autoscroll={gradio.autoscroll}
 		i18n={gradio.i18n}
 		{...loading_status}
+		on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
 	/>
 
 	<BlockTitle {show_label} {info}>{label}</BlockTitle>

js/simpledropdown/Index.svelte

@@ -18,6 +18,7 @@
 	export let gradio: Gradio<{
 		change: string;
 		input: never;
+		clear_status: LoadingStatus;
 	}>;
 	export let interactive: boolean;
 
@@ -56,6 +57,7 @@
 			autoscroll={gradio.autoscroll}
 			i18n={gradio.i18n}
 			{...loading_status}
+			on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
 		/>
 	{/if}
 

js/simpleimage/Index.svelte

@@ -34,6 +34,7 @@
 		change: never;
 		upload: never;
 		clear: never;
+		clear_status: LoadingStatus;
 	}>;
 
 	$: value, gradio.dispatch("change");
@@ -58,6 +59,7 @@
 			autoscroll={gradio.autoscroll}
 			i18n={gradio.i18n}
 			{...loading_status}
+			on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
 		/>
 		<ImagePreview
 			{value}
@@ -84,6 +86,7 @@
 			autoscroll={gradio.autoscroll}
 			i18n={gradio.i18n}
 			{...loading_status}
+			on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
 		/>
 
 		<ImageUploader

js/simpletextbox/Index.svelte

@@ -12,6 +12,7 @@
 		change: never;
 		submit: never;
 		input: never;
+		clear_status: LoadingStatus;
 	}>;
 	export let label = "Textbox";
 	export let elem_id = "";
@@ -66,6 +67,7 @@
 			autoscroll={gradio.autoscroll}
 			i18n={gradio.i18n}
 			{...loading_status}
+			on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
 		/>
 	{/if}
 

js/slider/Index.svelte

@@ -13,6 +13,7 @@
 		change: never;
 		input: never;
 		release: number;
+		clear_status: LoadingStatus;
 	}>;
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
@@ -79,6 +80,7 @@
 		autoscroll={gradio.autoscroll}
 		i18n={gradio.i18n}
 		{...loading_status}
+		on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
 	/>
 
 	<div class="wrap">

js/statustracker/static/index.svelte

@@ -50,12 +50,18 @@
 	import Loader from "./Loader.svelte";
 	import type { LoadingStatus } from "./types";
 	import type { I18nFormatter } from "@gradio/utils";
+	import { createEventDispatcher } from "svelte";
+
+	import { IconButton } from "@gradio/atoms";
+	import { Clear } from "@gradio/icons";
+
+	const dispatch = createEventDispatcher();
 
 	export let i18n: I18nFormatter;
 	export let eta: number | null = null;
 	export let queue_position: number | null;
 	export let queue_size: number | null;
-	export let status: "complete" | "pending" | "error" | "generating";
+	export let status: "complete" | "pending" | "error" | "generating" | null;
 	export let scroll_to_output = false;
 	export let timer = true;
 	export let show_progress: "full" | "minimal" | "hidden" = "full";
@@ -271,6 +277,16 @@
 			<p class="loading">{loading_text}</p>
 		{/if}
 	{:else if status === "error"}
+		<div class="clear-status">
+			<IconButton
+				Icon={Clear}
+				label={i18n("common.clear")}
+				disabled={false}
+				on:click={() => {
+					dispatch("clear_status");
+				}}
+			/>
+		</div>
 		<span class="error">{i18n("common.error")}</span>
 		<slot name="error" />
 	{/if}
@@ -289,7 +305,6 @@
 		padding: 0 var(--size-6);
 		max-height: var(--size-screen-h);
 		overflow: hidden;
-		pointer-events: none;
 	}
 
 	.wrap.center {
@@ -422,4 +437,14 @@
 	.border {
 		border: 1px solid var(--border-color-primary);
 	}
+
+	.clear-status {
+		position: absolute;
+		display: flex;
+		top: var(--size-2);
+		right: var(--size-2);
+		justify-content: flex-end;
+		gap: var(--spacing-sm);
+		z-index: var(--layer-1);
+	}
 </style>

js/storybook/preview.ts

@@ -1,7 +1,7 @@
 import type { Preview } from "@storybook/svelte";
 import "./theme.css";
 import { setupi18n } from "../app/src/i18n";
-import { Gradio } from "../app/src/gradio_helper";
+import { Gradio, formatter } from "../app/src/gradio_helper";
 import "../theme/src/reset.css";
 import "../theme/src/global.css";
 
@@ -19,7 +19,9 @@ const preview: Preview = {
 			"light",
 			"1.1.1",
 			"localhost:9876",
-			false
+			false,
+			null,
+			formatter
 		)
 	},
 	argTypes: {

js/textbox/Index.svelte

@@ -19,6 +19,7 @@
 		select: SelectData;
 		input: never;
 		focus: never;
+		clear_status: LoadingStatus;
 	}>;
 	export let label = "Textbox";
 	export let info: string | undefined = undefined;
@@ -58,6 +59,7 @@
 			autoscroll={gradio.autoscroll}
 			i18n={gradio.i18n}
 			{...loading_status}
+			on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
 		/>
 	{/if}
 

js/tootils/src/render.ts

@@ -98,7 +98,8 @@ export async function render<
 				"light",
 				"2.0.0",
 				"http://localhost:8000",
-				false
+				false,
+				null
 			)
 		}
 	});

js/upload/src/Upload.svelte

@@ -18,6 +18,7 @@
 	export let uploading = false;
 	export let hidden_upload: HTMLInputElement | null = null;
 	export let show_progress = true;
+	export let max_file_size: number | null = null;
 
 	let upload_id: string;
 	let file_data: FileData[];
@@ -83,10 +84,22 @@
 		await tick();
 		upload_id = Math.random().toString(36).substring(2, 15);
 		uploading = true;
-		const _file_data = await upload(file_data, root, upload_id, upload_fn);
-		dispatch("load", file_count === "single" ? _file_data?.[0] : _file_data);
-		uploading = false;
-		return _file_data || [];
+		try {
+			const _file_data = await upload(
+				file_data,
+				root,
+				upload_id,
+				max_file_size ?? Infinity,
+				upload_fn
+			);
+			dispatch("load", file_count === "single" ? _file_data?.[0] : _file_data);
+			uploading = false;
+			return _file_data || [];
+		} catch (e) {
+			dispatch("error", (e as Error).message);
+			uploading = false;
+			return [];
+		}
 	}
 
 	export async function load_files(

js/upload/src/UploadProgress.svelte

@@ -1,6 +1,11 @@
 <script lang="ts">
 	import { FileData } from "@gradio/client";
-	import { onMount, createEventDispatcher, getContext } from "svelte";
+	import {
+		onMount,
+		createEventDispatcher,
+		getContext,
+		onDestroy
+	} from "svelte";
 
 	type FileDataWithProgress = FileData & { progress: number };
 
@@ -56,6 +61,9 @@
 			}
 		};
 	});
+	onDestroy(() => {
+		if (event_source != null || event_source != undefined) event_source.close();
+	});
 
 	function calculateTotalProgress(files: FileData[]): number {
 		let totalProgress = 0;

js/uploadbutton/Index.svelte

@@ -24,6 +24,7 @@
 		change: never;
 		upload: never;
 		click: never;
+		error: string;
 	}>;
 	export let interactive: boolean;
 
@@ -53,9 +54,13 @@
 	{disabled}
 	{variant}
 	{label}
+	max_file_size={gradio.max_file_size}
 	on:click={() => gradio.dispatch("click")}
 	on:change={({ detail }) => handle_event(detail, "change")}
 	on:upload={({ detail }) => handle_event(detail, "upload")}
+	on:error={({ detail }) => {
+		gradio.dispatch("error", detail);
+	}}
 >
 	{label ? gradio.i18n(label) : ""}
 </UploadButton>

js/uploadbutton/shared/UploadButton.svelte

@@ -22,6 +22,7 @@
 	export let min_width: number | undefined = undefined;
 	export let variant: "primary" | "secondary" | "stop" = "secondary";
 	export let disabled = false;
+	export let max_file_size: number | null = null;
 
 	const dispatch = createEventDispatcher();
 
@@ -50,6 +51,7 @@
 
 	async function load_files(files: FileList): Promise<void> {
 		let _files: File[] = Array.from(files);
+
 		if (!files.length) {
 			return;
 		}
@@ -59,9 +61,20 @@
 		let all_file_data = await prepare_files(_files);
 		await tick();
 
-		all_file_data = (
-			await upload(all_file_data, root, undefined, upload_fn)
-		)?.filter((x) => x !== null) as FileData[];
+		try {
+			all_file_data = (
+				await upload(
+					all_file_data,
+					root,
+					undefined,
+					max_file_size ?? Infinity,
+					upload_fn
+				)
+			)?.filter((x) => x !== null) as FileData[];
+		} catch (e) {
+			dispatch("error", (e as Error).message);
+			return;
+		}
 		value = file_count === "single" ? all_file_data?.[0] : all_file_data;
 		dispatch("change", value);
 		dispatch("upload", value);

js/utils/src/utils.ts

@@ -180,6 +180,7 @@ export class Gradio<T extends Record<string, any> = Record<string, any>> {
 	#el: HTMLElement;
 	root: string;
 	autoscroll: boolean;
+	max_file_size: number | null;
 
 	constructor(
 		id: number,
@@ -187,14 +188,17 @@ export class Gradio<T extends Record<string, any> = Record<string, any>> {
 		theme: string,
 		version: string,
 		root: string,
-		autoscroll: boolean
+		autoscroll: boolean,
+		max_file_size: number | null,
+		i18n: I18nFormatter = (x: string): string => x
 	) {
 		this.#id = id;
 		this.theme = theme;
 		this.version = version;
 		this.#el = el;
+		this.max_file_size = max_file_size;
 
-		this.i18n = (x: string): string => x;
+		this.i18n = i18n;
 		this.root = root;
 		this.autoscroll = autoscroll;
 	}

js/video/Index.svelte

@@ -48,6 +48,7 @@
 		share: ShareData;
 		error: string;
 		warning: string;
+		clear_status: LoadingStatus;
 	}>;
 	export let interactive: boolean;
 	export let mirror_webcam: boolean;
@@ -137,6 +138,7 @@
 			autoscroll={gradio.autoscroll}
 			i18n={gradio.i18n}
 			{...loading_status}
+			on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
 		/>
 
 		<StaticVideo
@@ -175,6 +177,7 @@
 			autoscroll={gradio.autoscroll}
 			i18n={gradio.i18n}
 			{...loading_status}
+			on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
 		/>
 
 		<Video
@@ -202,6 +205,7 @@
 			on:start_recording={() => gradio.dispatch("start_recording")}
 			on:stop_recording={() => gradio.dispatch("stop_recording")}
 			i18n={gradio.i18n}
+			max_file_size={gradio.max_file_size}
 		>
 			<UploadText i18n={gradio.i18n} type="video" />
 		</Video>

js/video/shared/InteractiveVideo.svelte

@@ -28,6 +28,7 @@
 	export let i18n: I18nFormatter;
 	export let active_source: "webcam" | "upload" = "webcam";
 	export let handle_reset_value: () => void = () => {};
+	export let max_file_size: number | null = null;
 
 	const dispatch = createEventDispatcher<{
 		change: FileData | null;
@@ -77,6 +78,7 @@
 					bind:dragging
 					filetype="video/x-m4v,video/*"
 					on:load={handle_load}
+					{max_file_size}
 					on:error={({ detail }) => dispatch("error", detail)}
 					{root}
 				>

test/test_blocks.py

@@ -1740,7 +1740,7 @@ def test_static_files_multiple_apps(gradio_temp_dir):
 
 
 def test_time_to_live_and_delete_callback_for_state(capsys, monkeypatch):
-    monkeypatch.setenv("GRADIO_IS_E2E_TEST", 1)
+    monkeypatch.setenv("GRADIO_IS_E2E_TEST", "1")
 
     def test_fn(x):
         return x + 1, x + 1

test/test_routes.py

@@ -1268,3 +1268,17 @@ def test_compare_passwords_securely():
 )
 def test_starts_with_protocol(string, expected):
     assert starts_with_protocol(string) == expected
+
+
+def test_max_file_size_used_in_upload_route(connect):
+    with gr.Blocks() as demo:
+        gr.Markdown("Max file size demo")
+
+    app, _, _ = demo.launch(prevent_thread_lock=True, max_file_size="1kb")
+    test_client = TestClient(app)
+    with open("test/test_files/cheetah1.jpg", "rb") as f:
+        r = test_client.post("/upload", files={"files": f})
+        assert r.status_code == 413
+    with open("test/test_files/alphabet.txt", "rb") as f:
+        r = test_client.post("/upload", files={"files": f})
+        assert r.status_code == 200

test/test_utils.py

@@ -13,6 +13,8 @@ from typing_extensions import Literal
 from gradio import EventData, Request
 from gradio.external_utils import format_ner_list
 from gradio.utils import (
+    FileSize,
+    _parse_file_size,
     abspath,
     append_unique_suffix,
     assert_configs_are_equivalent_besides_ids,
@@ -526,3 +528,9 @@ class TestFunctionParams:
 
     def test_lambda_with_kwargs(self):
         assert get_function_params(lambda x, **kwargs: x) == [("x", False, None)]
+
+
+def test_parse_file_size():
+    assert _parse_file_size("1kb") == 1 * FileSize.KB
+    assert _parse_file_size("1mb") == 1 * FileSize.MB
+    assert _parse_file_size("505 Mb") == 505 * FileSize.MB