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>{}
       )