From f491e9091bda4abaaa4f217aa5b9f3a9c5c49500 Mon Sep 17 00:00:00 2001
From: Abhishek S Lal <abhishek@usebruno.com>
Date: Fri, 27 Mar 2026 20:15:34 +0530
Subject: [PATCH] refactor: update file name display in MultipartFormParams and
 ResponseExampleMultipartFormParams components (#7595)

- Replaced the static file name display with a SingleLineEditor for better readability and consistency.
- Removed unnecessary padding in StyledWrapper for a cleaner layout.
- Enhanced value interpolation logic to handle arrays in interpolate-vars.js for improved data processing.
---
 .../RequestPane/MultipartFormParams/StyledWrapper.js |  1 -
 .../RequestPane/MultipartFormParams/index.js         | 12 +++++++++---
 .../ResponseExampleMultipartFormParams/index.js      | 12 +++++++++---
 packages/bruno-cli/src/runner/interpolate-vars.js    |  2 +-
 .../src/ipc/network/interpolate-vars.js              |  2 +-
 5 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/packages/bruno-app/src/components/RequestPane/MultipartFormParams/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/MultipartFormParams/StyledWrapper.js
index e500eae7e..c26d8b180 100644
--- a/packages/bruno-app/src/components/RequestPane/MultipartFormParams/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/MultipartFormParams/StyledWrapper.js
@@ -24,7 +24,6 @@ const Wrapper = styled.div`
   }
 
   .file-value-cell {
-    padding: 4px 0;
 
     .file-name {
       font-size: 12px;
diff --git a/packages/bruno-app/src/components/RequestPane/MultipartFormParams/index.js b/packages/bruno-app/src/components/RequestPane/MultipartFormParams/index.js
index 4d887d00c..28d9b1a4b 100644
--- a/packages/bruno-app/src/components/RequestPane/MultipartFormParams/index.js
+++ b/packages/bruno-app/src/components/RequestPane/MultipartFormParams/index.js
@@ -147,9 +147,15 @@ const MultipartFormParams = ({ item, collection }) => {
                 <IconX size={16} />
               </button>
               <IconFile size={16} className="text-muted mr-1" />
-              <span className="file-name flex-1 truncate" title={Array.isArray(value) ? value.join(', ') : value}>
-                {fileName}
-              </span>
+              <div className="file-name flex-1 truncate" title={Array.isArray(value) ? value.join(', ') : value}>
+                <SingleLineEditor
+                  theme={storedTheme}
+                  value={fileName}
+                  readOnly={true}
+                  collection={collection}
+                  item={item}
+                />
+              </div>
             </div>
           );
         }
diff --git a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleMultipartFormParams/index.js b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleMultipartFormParams/index.js
index 647973319..ef327f9a2 100644
--- a/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleMultipartFormParams/index.js
+++ b/packages/bruno-app/src/components/ResponseExample/ResponseExampleRequestPane/ResponseExampleMultipartFormParams/index.js
@@ -188,9 +188,15 @@ const ResponseExampleMultipartFormParams = ({ item, collection, exampleUid, edit
           return (
             <div className="flex items-center file-value-cell">
               <IconFile size={16} className="text-muted mr-1" />
-              <span className="file-name flex-1 truncate" title={Array.isArray(value) ? value.join(', ') : value}>
-                {fileName}
-              </span>
+              <div className="file-name flex-1 truncate" title={Array.isArray(value) ? value.join(', ') : value}>
+                <SingleLineEditor
+                  theme={storedTheme}
+                  value={fileName}
+                  readOnly={true}
+                  collection={collection}
+                  item={item}
+                />
+              </div>
               <button
                 className="clear-file-btn ml-1"
                 onClick={() => handleClearFile(row)}
diff --git a/packages/bruno-cli/src/runner/interpolate-vars.js b/packages/bruno-cli/src/runner/interpolate-vars.js
index 32bc0d2e4..bacd22b73 100644
--- a/packages/bruno-cli/src/runner/interpolate-vars.js
+++ b/packages/bruno-cli/src/runner/interpolate-vars.js
@@ -101,7 +101,7 @@ const interpolateVars = (request, envVariables = {}, runtimeVariables = {}, proc
         try {
           request.data = request?.data?.map((d) => ({
             ...d,
-            value: _interpolate(d?.value)
+            value: Array.isArray(d?.value) ? d.value.map((v) => _interpolate(v)) : _interpolate(d?.value)
           }));
         } catch (err) {}
       }
diff --git a/packages/bruno-electron/src/ipc/network/interpolate-vars.js b/packages/bruno-electron/src/ipc/network/interpolate-vars.js
index d0ad03876..b95475e61 100644
--- a/packages/bruno-electron/src/ipc/network/interpolate-vars.js
+++ b/packages/bruno-electron/src/ipc/network/interpolate-vars.js
@@ -138,7 +138,7 @@ const interpolateVars = (request, envVariables = {}, runtimeVariables = {}, proc
         try {
           request.data = request?.data?.map((d) => ({
             ...d,
-            value: _interpolate(d?.value)
+            value: Array.isArray(d?.value) ? d.value.map((v) => _interpolate(v)) : _interpolate(d?.value)
           }));
         } catch (err) {}
       }