From 9447c21a37c892018f988042ea284d7774ec697f Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 15 Dec 2025 13:52:37 +0000
Subject: [PATCH 1/3] Initial plan


From 4453730e9bcf31b3f9821f83ec6881d303564e35 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 15 Dec 2025 14:10:39 +0000
Subject: [PATCH 2/3] Add cancel event support to InputFile component

Co-authored-by: javiercn <6995051+javiercn@users.noreply.github.com>
---
 src/Components/Web.JS/src/InputFile.ts        |  6 +++++
 .../test/E2ETest/Tests/InputFileTest.cs       | 25 +++++++++++++++++++
 .../FormsTest/InputFileComponent.razor        |  1 +
 3 files changed, 32 insertions(+)

diff --git a/src/Components/Web.JS/src/InputFile.ts b/src/Components/Web.JS/src/InputFile.ts
index 982e224f4628..198e47c552e0 100644
--- a/src/Components/Web.JS/src/InputFile.ts
+++ b/src/Components/Web.JS/src/InputFile.ts
@@ -52,6 +52,12 @@ function init(callbackWrapper: any, elem: InputElement): void {
 
     callbackWrapper.invokeMethodAsync('NotifyChange', fileList);
   });
+
+  elem.addEventListener('cancel', function(): void {
+    // Notify with an empty list when the file dialog is cancelled.
+    elem._blazorFilesById = {};
+    callbackWrapper.invokeMethodAsync('NotifyChange', []);
+  });
 }
 
 async function toImageFile(elem: InputElement, fileId: number, format: string, maxWidth: number, maxHeight: number): Promise<BrowserFile> {
diff --git a/src/Components/test/E2ETest/Tests/InputFileTest.cs b/src/Components/test/E2ETest/Tests/InputFileTest.cs
index bfeb682482fa..a83dcb56b217 100644
--- a/src/Components/test/E2ETest/Tests/InputFileTest.cs
+++ b/src/Components/test/E2ETest/Tests/InputFileTest.cs
@@ -196,6 +196,31 @@ public void ThrowsWhenOversizedFileIsSelected()
         Browser.Equal("Supplied file with size 32 bytes exceeds the maximum of 10 bytes.", () => exceptionMessage.Text);
     }
 
+    [Fact]
+    public void CanClearFilesByInvokingCancelEvent()
+    {
+        // Upload a file first
+        var file = TempFile.Create(_tempDirectory, "txt", "This is a test file.");
+        var inputFile = Browser.Exists(By.Id("input-file"));
+        inputFile.SendKeys(file.Path);
+
+        // Verify the file was uploaded
+        var fileContainer = Browser.Exists(By.Id($"file-{file.Name}"));
+
+        // Get the file count element
+        var fileCount = Browser.Exists(By.Id("file-count"));
+        Browser.Equal("1", () => fileCount.Text);
+
+        // Trigger the cancel event via JavaScript to simulate canceling the file dialog
+        Browser.ExecuteJavaScript(@"
+            const inputElement = document.getElementById('input-file');
+            inputElement.dispatchEvent(new Event('cancel'));
+        ");
+
+        // Wait a moment for the event to be processed and verify the file list was cleared
+        Browser.Equal("0", () => Browser.Exists(By.Id("file-count")).Text);
+    }
+
     public void Dispose()
     {
         Directory.Delete(_tempDirectory, recursive: true);
diff --git a/src/Components/test/testassets/BasicTestApp/FormsTest/InputFileComponent.razor b/src/Components/test/testassets/BasicTestApp/FormsTest/InputFileComponent.razor
index c05d1f053254..b919ad6c53ac 100644
--- a/src/Components/test/testassets/BasicTestApp/FormsTest/InputFileComponent.razor
+++ b/src/Components/test/testassets/BasicTestApp/FormsTest/InputFileComponent.razor
@@ -16,6 +16,7 @@ Max allowed files:
 <InputFile OnChange="LoadFiles" id="input-file" multiple />
 <br />
 
+<span id="file-count">@loadedFiles.Count</span>
 <span id="exception-message">@exceptionMessage</span>
 
 @if (isLoading)

From 38d2d19c4bc813237a214f48e11e7683b8a69299 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 15 Dec 2025 14:17:41 +0000
Subject: [PATCH 3/3] Add browser compatibility comment for cancel event

Co-authored-by: javiercn <6995051+javiercn@users.noreply.github.com>
---
 src/Components/Web.JS/src/InputFile.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/Components/Web.JS/src/InputFile.ts b/src/Components/Web.JS/src/InputFile.ts
index 198e47c552e0..c6377430f562 100644
--- a/src/Components/Web.JS/src/InputFile.ts
+++ b/src/Components/Web.JS/src/InputFile.ts
@@ -53,6 +53,9 @@ function init(callbackWrapper: any, elem: InputElement): void {
     callbackWrapper.invokeMethodAsync('NotifyChange', fileList);
   });
 
+  // The 'cancel' event is fired when the user cancels the file picker dialog.
+  // This event is part of the HTML5 standard and is supported in modern browsers.
+  // For browsers that don't support this event, it will be silently ignored.
   elem.addEventListener('cancel', function(): void {
     // Notify with an empty list when the file dialog is cancelled.
     elem._blazorFilesById = {};