Repository: gradio-app/gradio

Issue:
[Gradio 4] Drag and drop is not working for `gr.Video` and `gr.Audio`
### Describe the bug

It's possible to click the area to upload a video, but drag & drop doesn't seem to work.

https://github.com/gradio-app/gradio/assets/25161192/a117d8f5-dadc-4970-882c-074a04d50625



### Have you searched existing issues?  🔎

- [X] I have searched and found no existing issues

### Reproduction

```py
import gradio as gr

gr.Interface(fn=lambda x: x, inputs="video", outputs="video").launch()
```

### Screenshot

_No response_

### Logs

_No response_

### System Info

```shell
gradio==4.0.2
```


### Severity

I can work around it


Discussion:
Drag and drop doesn't work for `gr.Audio` too.

Resolving patch:
diff --git a/demo/audio_component_events/run.py b/demo/audio_component_events/run.py
new file mode 100644
--- /dev/null
+++ b/demo/audio_component_events/run.py
@@ -0,0 +1,21 @@
+import gradio as gr
+
+with gr.Blocks() as demo:
+    with gr.Row():
+        with gr.Column():
+            input_video = gr.Audio(label="Input Audio", sources=["upload", "microphone"])
+        with gr.Column():
+            output_video = gr.Audio(label="Output Audio", sources=["upload", "microphone"])
+        with gr.Column():
+            num_change = gr.Number(label="# Change Events", value=0)
+            num_load = gr.Number(label="# Upload Events", value=0)
+            num_play = gr.Number(label="# Play Events", value=0)
+            num_pause = gr.Number(label="# Pause Events", value=0)
+        input_video.upload(lambda s, n: (s, n + 1), [input_video, num_load], [output_video, num_load])
+        input_video.change(lambda n: n + 1, num_change, num_change)
+        input_video.play(lambda n: n + 1, num_play, num_play)
+        input_video.pause(lambda n: n + 1, num_pause, num_pause)
+        input_video.change(lambda n: n + 1, num_change, num_change)
+
+if __name__ == "__main__":
+    demo.launch()
\ No newline at end of file
diff --git a/demo/video_component_events/run.py b/demo/video_component_events/run.py
new file mode 100644
--- /dev/null
+++ b/demo/video_component_events/run.py
@@ -0,0 +1,21 @@
+import gradio as gr
+
+with gr.Blocks() as demo:
+    with gr.Row():
+        with gr.Column():
+            input_video = gr.Video(label="Input Video")
+        with gr.Column():
+            output_video = gr.Video(label="Output Video")
+        with gr.Column():
+            num_change = gr.Number(label="# Change Events", value=0)
+            num_load = gr.Number(label="# Upload Events", value=0)
+            num_play = gr.Number(label="# Play Events", value=0)
+            num_pause = gr.Number(label="# Pause Events", value=0)
+        input_video.upload(lambda s, n: (s, n + 1), [input_video, num_load], [output_video, num_load])
+        input_video.change(lambda n: n + 1, num_change, num_change)
+        input_video.play(lambda n: n + 1, num_play, num_play)
+        input_video.pause(lambda n: n + 1, num_pause, num_pause)
+        input_video.change(lambda n: n + 1, num_change, num_change)
+
+if __name__ == "__main__":
+    demo.launch()
\ No newline at end of file
diff --git a/gradio/processing_utils.py b/gradio/processing_utils.py
--- a/gradio/processing_utils.py
+++ b/gradio/processing_utils.py
@@ -258,6 +258,7 @@ def move_resource_to_block_cache(url_or_file_path: str | Path, block: Component)
         temp_file_path = save_url_to_cache(
             url_or_file_path, cache_dir=block.GRADIO_CACHE
         )
+
         block.temp_files.add(temp_file_path)
     else:
         url_or_file_path = str(abspath(url_or_file_path))
@@ -265,9 +266,9 @@ def move_resource_to_block_cache(url_or_file_path: str | Path, block: Component)
             temp_file_path = save_file_to_cache(
                 url_or_file_path, cache_dir=block.GRADIO_CACHE
             )
-            block.temp_files.add(temp_file_path)
         else:
             temp_file_path = url_or_file_path
+        block.temp_files.add(temp_file_path)
 
     return temp_file_path
 


Test patch:
diff --git a/js/app/test/audio_component_events.spec.ts b/js/app/test/audio_component_events.spec.ts
new file mode 100644
--- /dev/null
+++ b/js/app/test/audio_component_events.spec.ts
@@ -0,0 +1,59 @@
+import { test, expect, drag_and_drop_file } from "@gradio/tootils";
+
+test("Audio click-to-upload uploads audio successfuly.", async ({ page }) => {
+	await page
+		.getByRole("button", { name: "Drop Audio Here - or - Click to Upload" })
+		.click();
+	const uploader = await page.locator("input[type=file]");
+	await Promise.all([
+		uploader.setInputFiles(["../../test/test_files/audio_sample.wav"]),
+		page.waitForResponse("**/upload")
+	]);
+
+	await expect(page.getByLabel("# Change Events")).toHaveValue("1");
+	await expect(page.getByLabel("# Upload Events")).toHaveValue("1");
+
+	await page.getByLabel("Clear").click();
+	await expect(page.getByLabel("# Change Events")).toHaveValue("2");
+	await page
+		.getByRole("button", { name: "Drop Audio Here - or - Click to Upload" })
+		.click();
+
+	await Promise.all([
+		uploader.setInputFiles(["../../test/test_files/audio_sample.wav"]),
+		page.waitForResponse("**/upload")
+	]);
+
+	await expect(page.getByLabel("# Change Events")).toHaveValue("3");
+	await expect(page.getByLabel("# Upload Events")).toHaveValue("2");
+});
+
+test("Audio drag-and-drop uploads a file to the server correctly.", async ({
+	page
+}) => {
+	await Promise.all([
+		drag_and_drop_file(
+			page,
+			"input[type=file]",
+			"../../test/test_files/audio_sample.wav",
+			"audio_sample.wav",
+			"audio/wav"
+		),
+		page.waitForResponse("**/upload")
+	]);
+	await expect(page.getByLabel("# Change Events")).toHaveValue("1");
+	await expect(page.getByLabel("# Upload Events")).toHaveValue("1");
+});
+
+test("Audio drag-and-drop displays a warning when the file is of the wrong mime type.", async ({
+	page
+}) => {
+	await drag_and_drop_file(
+		page,
+		"input[type=file]",
+		"../../test/test_files/audio_sample.wav",
+		"audio_sample.wav"
+	);
+	const toast = page.getByTestId("toast-body");
+	expect(toast).toContainText("warning");
+});
diff --git a/js/app/test/files/file_test.ogg b/js/app/test/files/file_test.ogg
new file mode 100644
Binary files /dev/null and b/js/app/test/files/file_test.ogg differ
diff --git a/js/app/test/video_component_events.spec.ts b/js/app/test/video_component_events.spec.ts
new file mode 100644
--- /dev/null
+++ b/js/app/test/video_component_events.spec.ts
@@ -0,0 +1,69 @@
+import { test, expect, drag_and_drop_file } from "@gradio/tootils";
+
+test("Video click-to-upload uploads video successfuly. Clear, play, and pause buttons dispatch events correctly.", async ({
+	page
+}) => {
+	await page
+		.getByRole("button", { name: "Drop Video Here - or - Click to Upload" })
+		.click();
+	const uploader = await page.locator("input[type=file]");
+	await Promise.all([
+		uploader.setInputFiles(["./test/files/file_test.ogg"]),
+		page.waitForResponse("**/upload")
+	]);
+
+	await expect(page.getByLabel("# Change Events")).toHaveValue("1");
+	await expect(page.getByLabel("# Upload Events")).toHaveValue("1");
+
+	await page.getByLabel("play-pause-replay-button").nth(0).click();
+	await page.getByLabel("play-pause-replay-button").nth(0).click();
+	await expect(page.getByLabel("# Play Events")).toHaveValue("1");
+	await expect(page.getByLabel("# Pause Events")).toHaveValue("1");
+
+	await page.getByLabel("Clear").click();
+	await expect(page.getByLabel("# Change Events")).toHaveValue("2");
+	await page
+		.getByRole("button", { name: "Drop Video Here - or - Click to Upload" })
+		.click();
+
+	await Promise.all([
+		uploader.setInputFiles(["./test/files/file_test.ogg"]),
+		page.waitForResponse("**/upload")
+	]);
+
+	await expect(page.getByLabel("# Change Events")).toHaveValue("3");
+	await expect(page.getByLabel("# Upload Events")).toHaveValue("2");
+
+	await page.getByLabel("play-pause-replay-button").first().click();
+	await page.getByLabel("play-pause-replay-button").first().click();
+	await expect(page.getByLabel("# Play Events")).toHaveValue("2");
+	await expect(page.getByLabel("# Pause Events")).toHaveValue("2");
+});
+
+test("Video drag-and-drop uploads a file to the server correctly.", async ({
+	page
+}) => {
+	await drag_and_drop_file(
+		page,
+		"input[type=file]",
+		"./test/files/file_test.ogg",
+		"file_test.ogg",
+		"video/*"
+	);
+	await page.waitForResponse("**/upload");
+	await expect(page.getByLabel("# Change Events")).toHaveValue("1");
+	await expect(page.getByLabel("# Upload Events")).toHaveValue("1");
+});
+
+test("Video drag-and-drop displays a warning when the file is of the wrong mime type.", async ({
+	page
+}) => {
+	await drag_and_drop_file(
+		page,
+		"input[type=file]",
+		"./test/files/file_test.ogg",
+		"file_test.ogg"
+	);
+	const toast = page.getByTestId("toast-body");
+	expect(toast).toContainText("warning");
+});