fix: form-data requests on proxy failing

packages/hoppscotch-app/package.json

@@ -117,6 +117,7 @@
     "@types/paho-mqtt": "^1.0.6",
     "@types/postman-collection": "^3.5.7",
     "@types/splitpanes": "^2.2.1",
+    "@types/uuid": "^8.3.4",
     "@types/yargs-parser": "^21.0.0",
     "@typescript-eslint/eslint-plugin": "^5.19.0",
     "@typescript-eslint/parser": "^5.19.0",

packages/hoppscotch-app/src/components.d.ts

@@ -98,10 +98,14 @@ declare module '@vue/runtime-core' {
     HttpTestResultReport: typeof import('./components/http/TestResultReport.vue')['default']
     HttpTests: typeof import('./components/http/Tests.vue')['default']
     HttpURLEncodedParams: typeof import('./components/http/URLEncodedParams.vue')['default']
+    IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
+    IconLucideCheckCircle: typeof import('~icons/lucide/check-circle')['default']
     IconLucideChevronRight: typeof import('~icons/lucide/chevron-right')['default']
     IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
     IconLucideInfo: typeof import('~icons/lucide/info')['default']
+    IconLucideLayers: typeof import('~icons/lucide/layers')['default']
     IconLucideLoader: typeof import('~icons/lucide/loader')['default']
+    IconLucideMinus: typeof import('~icons/lucide/minus')['default']
     IconLucideSearch: typeof import('~icons/lucide/search')['default']
     IconLucideUser: typeof import('~icons/lucide/user')['default']
     IconLucideUsers: typeof import('~icons/lucide/users')['default']

packages/hoppscotch-app/src/helpers/strategies/AxiosStrategy.ts

@@ -74,7 +74,11 @@ const axiosWithProxy: NetworkStrategy = (req) =>
 
     // If the request has FormData, the proxy needs a key
     TE.bind("multipartKey", ({ processedReq }) =>
-      TE.of(processedReq.data instanceof FormData ? v4() : null)
+      TE.of(
+        processedReq.data instanceof FormData
+          ? `proxyRequestData-${v4()}`
+          : null
+      )
     ),
 
     // Build headers to send
@@ -82,7 +86,7 @@ const axiosWithProxy: NetworkStrategy = (req) =>
       TE.of(
         processedReq.data instanceof FormData
           ? <ProxyHeaders>{
-              "multipart-part-key": `proxyRequestData-${multipartKey}`,
+              "multipart-part-key": multipartKey,
             }
           : <ProxyHeaders>{}
       )

pnpm-lock.yaml

@@ -83,6 +83,7 @@ importers:
       '@types/paho-mqtt': ^1.0.6
       '@types/postman-collection': ^3.5.7
       '@types/splitpanes': ^2.2.1
+      '@types/uuid': ^8.3.4
       '@types/yargs-parser': ^21.0.0
       '@typescript-eslint/eslint-plugin': ^5.19.0
       '@typescript-eslint/parser': ^5.19.0
@@ -264,6 +265,7 @@ importers:
       '@types/paho-mqtt': 1.0.6
       '@types/postman-collection': 3.5.7
       '@types/splitpanes': 2.2.1
+      '@types/uuid': 8.3.4
       '@types/yargs-parser': 21.0.0
       '@typescript-eslint/eslint-plugin': 5.30.6_hu4fhyobdl4qfb4p4ewioh73ay
       '@typescript-eslint/parser': 5.30.6_oma37ntcsyoxqn5sr4l7ekf4na
@@ -4166,6 +4168,10 @@ packages:
     resolution: {integrity: sha512-N1rW+njavs70y2cApeIw1vLMYXRwfBy+7trgavGuuTfOd7j1Yh7QTRc/yqsPl6ncokt72ZXuxEU0PiCp9bSwNQ==}
     dev: true
 
+  /@types/uuid/8.3.4:
+    resolution: {integrity: sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==}
+    dev: true
+
   /@types/web-bluetooth/0.0.14:
     resolution: {integrity: sha512-5d2RhCard1nQUC3aHcq/gHzWYO6K0WJmAbjO7mQJgCQKtZpgXxv1rOM6O/dBDhDYYVutk1sciOgNSe+5YyfM8A==}
     dev: false