From f8afc6044ed85921909d7de83fff093311c1a547 Mon Sep 17 00:00:00 2001
From: Abhimanyu Yadav <122007096+Abhi1992002@users.noreply.github.com>
Date: Tue, 9 Dec 2025 21:24:17 +0530
Subject: [PATCH] fix(frontend): prevent file upload buttons from triggering
 form submission (#11576)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!-- Clearly explain the need for these changes: -->

In the File Widget, the upload button was incorrectly behaving like a
submit button. When users clicked it, the rjsf library immediately
triggered form validation and displayed validation errors, even though
the user was only trying to upload a file.

This happened because HTML buttons inside a form default to
`type="submit"`, which triggers form submission on click. By explicitly
setting `type="button"` on all file-related buttons, we prevent them
from submitting the form while still allowing them to trigger the file
input dialog.

### Changes 🏗️

<!-- Concisely describe all of the changes made in this pull request:
-->

- Added `type="button"` attribute to the clear button in the compact
variant
- Added `type="button"` attribute to the upload button in the compact
variant
- Added `type="button"` attribute to the "Browse File" button in the
default variant

This ensures that clicking any of these buttons only triggers the
intended file selection/upload action without causing unwanted form
validation or submission.

### Checklist 📋

#### For code changes:

- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
- [x] Tested clicking the upload button in a form with File Widget -
form should not submit or show validation errors
- [x] Tested clicking the clear button - should clear the file without
triggering form validation
- [x] Tested clicking the "Browse File" button - should open file dialog
without triggering form validation
- [x] Verified file upload functionality still works correctly after
selecting a file
---
 .../frontend/src/components/atoms/FileInput/FileInput.tsx      | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/autogpt_platform/frontend/src/components/atoms/FileInput/FileInput.tsx b/autogpt_platform/frontend/src/components/atoms/FileInput/FileInput.tsx
index 8f855ad47d..d43063b411 100644
--- a/autogpt_platform/frontend/src/components/atoms/FileInput/FileInput.tsx
+++ b/autogpt_platform/frontend/src/components/atoms/FileInput/FileInput.tsx
@@ -266,6 +266,7 @@ export function FileInput(props: Props) {
                 size="small"
                 className="h-7 w-7 min-w-0 flex-shrink-0 border-zinc-300 p-0 text-gray-500 hover:text-red-600 dark:text-gray-400 dark:hover:text-red-500"
                 onClick={handleClear}
+                type="button"
               >
                 <Cross2Icon className="h-3.5 w-3.5" />
               </Button>
@@ -278,6 +279,7 @@ export function FileInput(props: Props) {
                 onClick={() => inputRef.current?.click()}
                 className="flex-1 border-zinc-300 text-xs"
                 disabled={isUploading}
+                type="button"
               >
                 <UploadIcon className="mr-1.5 h-3.5 w-3.5" />
                 {`Upload ${displayName}`}
@@ -367,6 +369,7 @@ export function FileInput(props: Props) {
             <Button
               onClick={() => inputRef.current?.click()}
               className="min-w-40"
+              type="button"
             >
               Browse File
             </Button>