fix: allow file selection in multipart form without entering a key first (#7640)

packages/bruno-app/src/components/RequestPane/MultipartFormParams/StyledWrapper.js

@@ -15,7 +15,7 @@ const Wrapper = styled.div`
     transition: color 0.15s ease;
 
     &:hover {
-      color: ${(props) => props.theme.colors.text.link};
+      color: ${(props) => props.theme.text};
     }
   }
 

packages/bruno-app/src/components/RequestPane/MultipartFormParams/index.js

@@ -65,12 +65,21 @@ const MultipartFormParams = ({ item, collection }) => {
         const currentParams = item.draft
           ? get(item, 'draft.request.body.multipartForm')
           : get(item, 'request.body.multipartForm');
-        const updatedParams = (currentParams || []).map((p) => {
-          if (p.uid === row.uid) {
-            return { ...p, type: 'file', value: processedPaths };
-          }
-          return p;
-        });
+        const existsInParams = (currentParams || []).some((p) => p.uid === row.uid);
+        let updatedParams;
+        if (existsInParams) {
+          updatedParams = currentParams.map((p) => {
+            if (p.uid === row.uid) {
+              return { ...p, type: 'file', value: processedPaths };
+            }
+            return p;
+          });
+        } else {
+          updatedParams = [
+            ...(currentParams || []),
+            { uid: row.uid, name: row.name || '', enabled: true, type: 'file', value: processedPaths, contentType: '' }
+          ];
+        }
         handleParamsChange(updatedParams);
       })
       .catch((error) => {
@@ -139,13 +148,6 @@ const MultipartFormParams = ({ item, collection }) => {
         if (fileName) {
           return (
             <div className="flex items-center file-value-cell">
-              <button
-                className="clear-file-btn ml-1"
-                onClick={() => handleClearFile(row)}
-                title="Remove file"
-              >
-                <IconX size={16} />
-              </button>
               <IconFile size={16} className="text-muted mr-1" />
               <div className="file-name flex-1 truncate" title={Array.isArray(value) ? value.join(', ') : value}>
                 <SingleLineEditor
@@ -156,6 +158,13 @@ const MultipartFormParams = ({ item, collection }) => {
                   item={item}
                 />
               </div>
+              <button
+                className="clear-file-btn ml-1"
+                onClick={() => handleClearFile(row)}
+                title="Remove file"
+              >
+                <IconX size={16} />
+              </button>
             </div>
           );
         }

packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleMultipartFormParams/StyledWrapper.js

@@ -71,7 +71,29 @@ const Wrapper = styled.div`
 
   .upload-btn,
   .clear-file-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px;
+    color: ${(props) => props.theme.colors.text.muted};
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: color 0.15s ease;
     flex-shrink: 0;
+
+    &:hover {
+      color: ${(props) => props.theme.text};
+    }
+  }
+
+  .clear-file-btn:hover {
+    color: ${(props) => props.theme.colors.text.danger};
+  }
+
+  .file-value-cell {
+    width: 100%;
   }
 
   .value-cell {