Fire File change event when updated programmatically (#4811)

* Change

* Add code

* remove comments

* Add changelog

* remove test

* Fix typo

CHANGELOG.md

@@ -23,7 +23,7 @@ No changes to highlight.
 
 ## Bug Fixes:
 
-No changes to highlight.
+- Fix bug where `gr.File` change event was not triggered when the value was changed by another event by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 4811](https://github.com/gradio-app/gradio/pull/4811)
 
 ## Other Changes:
 

js/app/src/components/File/File.svelte

@@ -1,3 +1,5 @@
+<svelte:options accessors={true} />
+
 <script lang="ts">
 	import { createEventDispatcher, getContext } from "svelte";
 	import { File as FileComponent, FileUpload } from "@gradio/file";
@@ -59,6 +61,7 @@
 				)
 			) {
 				pending_upload = false;
+				dispatch("change");
 			} else if (mode === "dynamic") {
 				let files = (Array.isArray(_value) ? _value : [_value]).map(
 					(file_data) => file_data.blob!

js/app/src/components/File/File.test.ts

@@ -1,5 +1,6 @@
-import { test, describe, expect, afterEach, vi } from "vitest";
+import { test, describe, expect, afterEach, vi, assert } from "vitest";
 import { cleanup, render } from "@gradio/tootils";
+import { spy } from "tinyspy";
 
 import File from "./File.svelte";
 import type { LoadingStatus } from "../StatusTracker/types";
@@ -21,7 +22,7 @@ describe("File", () => {
 		vi.restoreAllMocks();
 	});
 
-	test("Uploads with blob", async () => {
+	test("gr.File uploads with blob", async () => {
 		vi.mock("@gradio/client", async () => {
 			return {
 				upload_files: vi.fn((f) => new Promise((res) => res({})))
@@ -30,7 +31,7 @@ describe("File", () => {
 
 		const api = await import("@gradio/client");
 
-		render(File, {
+		await render(File, {
 			loading_status,
 			label: "file",
 			// @ts-ignore
@@ -45,10 +46,10 @@ describe("File", () => {
 		expect(api.upload_files).toHaveBeenCalled();
 	});
 
-	test("Does not upload without blob", () => {
-		const spy = vi.fn(upload_files);
+	test("gr.File does not upload without blob", async () => {
+		const mockUpload = vi.fn(upload_files);
 
-		render(File, {
+		const { component } = await render(File, {
 			loading_status,
 			label: "file",
 			value: { name: "freddy.json", data: "{'name': 'freddy'}" },
@@ -59,6 +60,17 @@ describe("File", () => {
 			root_url: null
 		});
 
-		expect(spy).not.toHaveBeenCalled();
+		expect(mockUpload).not.toHaveBeenCalled();
+
+		const mock = spy();
+		component.$on("change", mock);
+
+		component.value = {
+			name: "freddy_2.json",
+			data: "{'name': 'freddy'}",
+			is_file: true
+		};
+
+		assert.equal(mock.callCount, 1);
 	});
 });