diff --git a/.changeset/common-bees-prove.md b/.changeset/common-bees-prove.md
new file mode 100644
index 0000000000..45d7c3e35e
--- /dev/null
+++ b/.changeset/common-bees-prove.md
@@ -0,0 +1,6 @@
+---
+"@gradio/uploadbutton": minor
+"gradio": minor
+---
+
+feat:UploadButton tests
diff --git a/demo/upload_button_component_events/run.ipynb b/demo/upload_button_component_events/run.ipynb
new file mode 100644
index 0000000000..dcb30e4abe
--- /dev/null
+++ b/demo/upload_button_component_events/run.ipynb
@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: upload_button_component_events"]}, {"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", "    \n", "    with gr.Row():\n", "        with gr.Column():\n", "            upload_btn = gr.UploadButton(label=\"Upload Single File\", file_count=\"single\")\n", "        with gr.Column():\n", "            output_file_1 = gr.File(label=\"Upload Single File Output\", file_count=\"single\")\n", "            num_load_btn_1 = gr.Number(label=\"# Load Upload Single File\", value=0)\n", "            output_click_1 = gr.Number(label=\"# Click Upload Single File Output\", value=0)\n", "            upload_btn.upload(lambda s,n: (s, n + 1), [upload_btn, num_load_btn_1], [output_file_1, num_load_btn_1])\n", "            upload_btn.click(lambda n: (n + 1), output_click_1, [output_click_1])\n", "    with gr.Row():\n", "        with gr.Column():\n", "            upload_btn_multiple = gr.UploadButton(label=\"Upload Multiple Files\", file_count=\"multiple\")\n", "        with gr.Column():\n", "            output_file_2 = gr.File(label=\"Upload Multiple Files Output\", file_count=\"multiple\")\n", "            num_load_btn_2 = gr.Number(label=\"# Load Upload Multiple Files\", value=0)\n", "            output_click_2 = gr.Number(label=\"# Click Upload Multiple Files Output\", value=0)\n", "            upload_btn_multiple.upload(lambda s,n: (s, n + 1), [upload_btn_multiple, num_load_btn_2], [output_file_2, num_load_btn_2])\n", "            upload_btn_multiple.click(lambda n: (n + 1), output_click_2, [output_click_2])\n", "\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
\ No newline at end of file
diff --git a/demo/upload_button_component_events/run.py b/demo/upload_button_component_events/run.py
new file mode 100644
index 0000000000..063a2e5c23
--- /dev/null
+++ b/demo/upload_button_component_events/run.py
@@ -0,0 +1,26 @@
+import gradio as gr
+
+with gr.Blocks() as demo:
+    
+    with gr.Row():
+        with gr.Column():
+            upload_btn = gr.UploadButton(label="Upload Single File", file_count="single")
+        with gr.Column():
+            output_file_1 = gr.File(label="Upload Single File Output", file_count="single")
+            num_load_btn_1 = gr.Number(label="# Load Upload Single File", value=0)
+            output_click_1 = gr.Number(label="# Click Upload Single File Output", value=0)
+            upload_btn.upload(lambda s,n: (s, n + 1), [upload_btn, num_load_btn_1], [output_file_1, num_load_btn_1])
+            upload_btn.click(lambda n: (n + 1), output_click_1, [output_click_1])
+    with gr.Row():
+        with gr.Column():
+            upload_btn_multiple = gr.UploadButton(label="Upload Multiple Files", file_count="multiple")
+        with gr.Column():
+            output_file_2 = gr.File(label="Upload Multiple Files Output", file_count="multiple")
+            num_load_btn_2 = gr.Number(label="# Load Upload Multiple Files", value=0)
+            output_click_2 = gr.Number(label="# Click Upload Multiple Files Output", value=0)
+            upload_btn_multiple.upload(lambda s,n: (s, n + 1), [upload_btn_multiple, num_load_btn_2], [output_file_2, num_load_btn_2])
+            upload_btn_multiple.click(lambda n: (n + 1), output_click_2, [output_click_2])
+
+
+if __name__ == "__main__":
+    demo.launch()
\ No newline at end of file
diff --git a/js/app/test/upload_button_component_events.spec.ts b/js/app/test/upload_button_component_events.spec.ts
new file mode 100644
index 0000000000..f0ffbd3842
--- /dev/null
+++ b/js/app/test/upload_button_component_events.spec.ts
@@ -0,0 +1,50 @@
+import { test, expect } from "@gradio/tootils";
+
+test("UploadButton properly dispatches load event and click event for the single file case.", async ({
+	page
+}) => {
+	await page.getByRole("button", { name: "Upload Single File" }).click();
+	const uploader = await page.getByTestId("Upload Single File-upload-button");
+	await Promise.all([
+		uploader.setInputFiles(["./test/files/face.obj"]),
+		page.waitForResponse("**/upload?*?*")
+	]);
+
+	await expect(page.getByLabel("# Load Upload Single File")).toHaveValue("1");
+	await expect(
+		page.getByLabel("# Click Upload Single File Output")
+	).toHaveValue("1");
+
+	const downloadPromise = page.waitForEvent("download");
+	await page.getByRole("link").nth(0).click();
+	const download = await downloadPromise;
+	await expect(download.suggestedFilename()).toBe("face.obj");
+});
+
+test("UploadButton properly dispatches load event and click event for the multiple file case.", async ({
+	page
+}) => {
+	await page.getByRole("button", { name: "Upload Multiple Files" }).click();
+	const uploader = await page.getByTestId(
+		"Upload Multiple Files-upload-button"
+	);
+	await Promise.all([
+		uploader.setInputFiles([
+			"./test/files/face.obj",
+			"./test/files/cheetah1.jpg"
+		]),
+		page.waitForResponse("**/upload?*?*")
+	]);
+
+	await expect(page.getByLabel("# Load Upload Multiple Files")).toHaveValue(
+		"1"
+	);
+	await expect(
+		page.getByLabel("# Click Upload Multiple Files Output")
+	).toHaveValue("1");
+
+	const downloadPromise = page.waitForEvent("download");
+	await page.getByRole("link").nth(1).click();
+	const download = await downloadPromise;
+	await expect(download.suggestedFilename()).toBe("cheetah1.jpg");
+});
diff --git a/js/uploadbutton/Index.svelte b/js/uploadbutton/Index.svelte
index f6d993ae4d..412b05522e 100644
--- a/js/uploadbutton/Index.svelte
+++ b/js/uploadbutton/Index.svelte
@@ -30,7 +30,7 @@
 
 	async function handle_event(
 		detail: null | FileData | FileData[],
-		event: "change" | "upload"
+		event: "change" | "upload" | "click"
 	): Promise<void> {
 		value = detail;
 		gradio.dispatch(event);
diff --git a/js/uploadbutton/shared/UploadButton.svelte b/js/uploadbutton/shared/UploadButton.svelte
index 764056b384..2b092e580f 100644
--- a/js/uploadbutton/shared/UploadButton.svelte
+++ b/js/uploadbutton/shared/UploadButton.svelte
@@ -35,6 +35,7 @@
 	}
 
 	function openFileUpload(): void {
+		dispatch("click");
 		hidden_upload.click();
 	}