Merge branch 'main' into 6925-gradio-cc-build-component-not-installed

.changeset/sad-horses-find.md

@@ -0,0 +1,6 @@
+---
+"@gradio/upload": patch
+"gradio": patch
+---
+
+fix:Fix File drag and drop for specific file_types

.github/actions/install-all-deps/action.yml

@@ -32,7 +32,7 @@ runs:
       run: |
         python -m pip install --upgrade virtualenv
         python -m virtualenv venv
-    - uses: actions/cache@v3
+    - uses: actions/cache@v4
       id: cache
       with:
         path: |

.github/actions/install-frontend-deps/action.yml

@@ -18,7 +18,7 @@ inputs:
 runs:
   using: "composite"
   steps:
-    - uses: actions/cache@v3
+    - uses: actions/cache@v4
       id: frontend-cache
       with:
         path: |

.github/workflows/backend.yml

@@ -55,6 +55,7 @@ jobs:
         python-version: ["3.8"]
         exclude:
           - os: ${{ github.event_name == 'pull_request' && contains( github.event.pull_request.labels.*.name, 'windows-tests') && 'dummy' || 'windows-latest' }}
+          - test-type: ${{ github.event_name == 'pull_request' && contains( github.event.pull_request.labels.*.name, 'flaky-tests') && 'dummy' || 'flaky' }}
     runs-on: ${{ matrix.os }}
     continue-on-error: true
     steps:
@@ -78,7 +79,7 @@ jobs:
         path: |
           client/python/venv/*
         key: python-client-${{ runner.os }}-pip-${{ hashFiles('client/python/requirements.txt') }}-${{ hashFiles('client/python/test/requirements.txt') }}
-    - uses: actions/cache@v3
+    - uses: actions/cache@v4
       id: frontend-cache
       with:
         path: |
@@ -149,6 +150,7 @@ jobs:
         python-version: ["3.8"]
         exclude:
           - os: ${{ github.event_name == 'pull_request' && contains( github.event.pull_request.labels.*.name, 'windows-tests') && 'dummy' || 'windows-latest' }}
+          - test-type: ${{ github.event_name == 'pull_request' && contains( github.event.pull_request.labels.*.name, 'flaky-tests') && 'dummy' || 'flaky' }}
     runs-on: ${{ matrix.os }}
     continue-on-error: true
     steps:
@@ -166,13 +168,13 @@ jobs:
       run: |
         python -m pip install --upgrade virtualenv
         python -m virtualenv venv
-    - uses: actions/cache@v3
+    - uses: actions/cache@v4
       id: cache
       with:
         path: |
           venv/*
         key: gradio-lib-${{ runner.os }}-pip-${{ hashFiles('client/python/requirements.txt') }}-${{ hashFiles('requirements.txt') }}-${{ hashFiles('test/requirements.txt') }}
-    - uses: actions/cache@v3
+    - uses: actions/cache@v4
       id: frontend-cache
       with:
         path: |

.github/workflows/publish-npm.yml

@@ -47,6 +47,12 @@ jobs:
         env:
           PR_NUMBER: ${{ steps.changesets.outputs.pullRequestNumber }}
           GITHUB_TOKEN: ${{ secrets.GRADIO_PAT }} 
+      - name: add label to run flaky tests
+        if: ${{ steps.changesets.outputs.pullRequestNumber != '' && steps.changesets.outputs.pullRequestNumber != 'undefined' }}
+        run: gh pr edit "$PR_NUMBER" --add-label "flaky-tests" 
+        env:
+          PR_NUMBER: ${{ steps.changesets.outputs.pullRequestNumber }}
+          GITHUB_TOKEN: ${{ secrets.GRADIO_PAT }} 
       - name: add label to run backend tests on Windows
         if: ${{ steps.changesets.outputs.pullRequestNumber != '' && steps.changesets.outputs.pullRequestNumber != 'undefined' }}
         run: gh pr edit "$PR_NUMBER" --add-label "windows-tests" 

demo/file_component_events/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: file_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", "            file_component = gr.File(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", "            file_component.upload(lambda s,n: (s, n + 1), [file_component, num_load_btn_1], [output_file_1, num_load_btn_1])\n", "    with gr.Row():\n", "        with gr.Column():\n", "            file_component_multiple = gr.File(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", "            file_component_multiple.upload(lambda s,n: (s, n + 1), [file_component_multiple, num_load_btn_2], [output_file_2, num_load_btn_2])\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/file_component_events/run.py

@@ -0,0 +1,21 @@
+import gradio as gr
+
+with gr.Blocks() as demo:
+
+    with gr.Row():
+        with gr.Column():
+            file_component = gr.File(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)
+            file_component.upload(lambda s,n: (s, n + 1), [file_component, num_load_btn_1], [output_file_1, num_load_btn_1])
+    with gr.Row():
+        with gr.Column():
+            file_component_multiple = gr.File(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)
+            file_component_multiple.upload(lambda s,n: (s, n + 1), [file_component_multiple, num_load_btn_2], [output_file_2, num_load_btn_2])
+
+if __name__ == "__main__":
+    demo.launch()

js/app/test/file_component_events.spec.ts

@@ -0,0 +1,53 @@
+import { test, expect, drag_and_drop_file } from "@gradio/tootils";
+
+test("File component properly dispatches load event for the single file case.", async ({
+	page
+}) => {
+	await page
+		.getByRole("button", { name: "Drop File Here - or - Click to Upload" })
+		.first()
+		.click();
+	const uploader = await page.getByTestId("file-upload").first();
+	await uploader.setInputFiles(["./test/files/cheetah1.jpg"]);
+
+	await expect(page.getByLabel("# Load Upload Single File")).toHaveValue("1");
+
+	const downloadPromise = page.waitForEvent("download");
+	await page.getByRole("link").nth(0).click();
+	const download = await downloadPromise;
+	await expect(download.suggestedFilename()).toBe("cheetah1.jpg");
+});
+
+test("File component properly dispatches load event for the multiple file case.", async ({
+	page
+}) => {
+	await page
+		.getByRole("button", { name: "Drop File Here - or - Click to Upload" })
+		.last()
+		.click();
+	const uploader = await page.getByTestId("file-upload").last();
+	await uploader.setInputFiles([
+		"./test/files/face.obj",
+		"./test/files/cheetah1.jpg"
+	]);
+
+	await expect(page.getByLabel("# Load Upload Multiple Files")).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");
+});
+
+test("File component drag-and-drop uploads a file to the server correctly.", async ({
+	page
+}) => {
+	await drag_and_drop_file(
+		page,
+		"input[type=file]",
+		"./test/files/alphabet.txt",
+		"alphabet.txt"
+	);
+});

js/app/test/files/alphabet.txt

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

js/upload/src/Upload.svelte

@@ -129,11 +129,16 @@
 	async function loadFilesFromDrop(e: DragEvent): Promise<void> {
 		dragging = false;
 		if (!e.dataTransfer?.files) return;
-
-		const files_to_load = Array.from(e.dataTransfer.files).filter((f) => {
-			const file_extension =
-				f.type !== "" ? f.type : "." + f.name.split(".").pop();
-			if (file_extension && is_valid_mimetype(filetype, file_extension)) {
+		const files_to_load = Array.from(e.dataTransfer.files).filter((file) => {
+			const file_extension = "." + file.name.split(".").pop();
+			if (file.type && is_valid_mimetype(filetype, file.type)) {
+				return true;
+			}
+			if (
+				file_extension && Array.isArray(filetype)
+					? filetype.includes(file_extension)
+					: file_extension === filetype
+			) {
 				return true;
 			}
 			dispatch("error", `Invalid file type only ${filetype} allowed.`);
@@ -182,6 +187,7 @@
 		<slot />
 		<input
 			aria-label="file upload"
+			data-testid="file-upload"
 			type="file"
 			bind:this={hidden_upload}
 			on:change={load_files_from_upload}