fix(request): multipart payload not working while using proxy

packages/hoppscotch-app/helpers/strategies/AxiosStrategy.js

@@ -1,4 +1,5 @@
 import axios from "axios"
+import { v4 } from "uuid"
 import { decodeB64StringToArrayBuffer } from "../utils/b64"
 import { settingsStore } from "~/newstore/settings"
 import { JsonFormattedError } from "~/helpers/utils/JsonFormattedError"
@@ -14,13 +15,25 @@ export const cancelRunningAxiosRequest = () => {
 
 const axiosWithProxy = async (req) => {
   try {
+    let proxyReqPayload = {
+      ...req,
+      wantsBinary: true,
+    }
+    const headers = {}
+    if (req.data instanceof FormData) {
+      const key = `proxyRequestData-${v4()}` // generate UniqueKey
+      headers["multipart-part-key"] = key
+
+      const formData = proxyReqPayload.data
+      proxyReqPayload.data = "" // discard formData
+      formData.append(key, JSON.stringify(proxyReqPayload)) // append axiosRequest to form
+      proxyReqPayload = formData
+    }
     const { data } = await axios.post(
       settingsStore.value.PROXY_URL || "https://proxy.hoppscotch.io",
+      proxyReqPayload,
       {
-        ...req,
-        wantsBinary: true,
-      },
-      {
+        headers,
         cancelToken: cancelSource.token,
       }
     )

packages/hoppscotch-app/package.json

@@ -38,6 +38,7 @@
     "acorn": "^8.5.0",
     "acorn-walk": "^8.2.0",
     "axios": "^0.22.0",
+    "uuid": "8.3.2",
     "codemirror": "^5.63.1",
     "codemirror-theme-github": "^1.0.0",
     "core-js": "^3.18.2",
@@ -119,4 +120,4 @@
     "vue-jest": "^3.0.7",
     "worker-loader": "^3.0.8"
   }
-}
+}