feat: add individual content types for formadata (#4550)

Co-authored-by: jamesgeorge007 <25279263+jamesgeorge007@users.noreply.github.com>

packages/hoppscotch-common/src/components/http/BodyParameters.vue

@@ -7,6 +7,17 @@
         {{ t("request.body") }}
       </label>
       <div class="flex">
+        <div class="flex items-center gap-2">
+          <HoppSmartCheckbox
+            :on="body.showIndividualContentType"
+            @change="
+              () => {
+                body.showIndividualContentType = !body.showIndividualContentType
+              }
+            "
+            >{{ t(`request.show_content_type`) }}</HoppSmartCheckbox
+          >
+        </div>
         <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           to="https://docs.hoppscotch.io/documentation/getting-started/rest/uploading-data"
@@ -73,6 +84,7 @@
                 value: entry.value,
                 active: entry.active,
                 isFile: entry.isFile,
+                contentType: entry.contentType,
               })
             "
           />
@@ -97,6 +109,26 @@
                   value: $event,
                   active: entry.active,
                   isFile: entry.isFile,
+                  contentType: entry.contentType,
+                })
+              "
+            />
+          </span>
+          <span v-if="body.showIndividualContentType" class="flex flex-1">
+            <SmartEnvInput
+              v-model="entry.contentType"
+              :placeholder="
+                entry.contentType ? entry.contentType : `Auto (Content Type)`
+              "
+              :auto-complete-env="true"
+              :envs="envs"
+              @change="
+                updateBodyParam(index, {
+                  key: entry.key,
+                  value: entry.value,
+                  active: entry.active,
+                  isFile: entry.isFile,
+                  contentType: $event,
                 })
               "
             />
@@ -139,6 +171,7 @@
                     ? !entry.active
                     : false,
                   isFile: entry.isFile,
+                  contentType: entry.contentType,
                 })
               "
             />
@@ -231,6 +264,7 @@ const workingParams = ref<WorkingFormDataKeyValue[]>([
       value: "",
       active: true,
       isFile: false,
+      contentType: undefined,
     },
   },
 ])

packages/hoppscotch-common/src/helpers/functional/formData.ts

@@ -1,12 +1,27 @@
 type FormDataEntry = {
   key: string
+  contentType?: string
   value: string | Blob
 }
 
 export const toFormData = (values: FormDataEntry[]) => {
   const formData = new FormData()
 
-  values.forEach(({ key, value }) => formData.append(key, value))
+  values.forEach(({ key, value, contentType }) => {
+    if (contentType) {
+      formData.append(
+        key,
+        new Blob([value], {
+          type: contentType,
+        }),
+        key
+      )
+
+      return
+    }
+
+    formData.append(key, value)
+  })
 
   return formData
 }

packages/hoppscotch-common/src/helpers/new-codegen/har.ts

@@ -72,13 +72,24 @@ const buildHarPostParams = (
           <Har.Param>{
             name: entry.key,
             fileName: entry.key, // TODO: Blob doesn't contain file info, anyway to bring file name here ?
-            contentType: file.type,
+            contentType: entry.contentType ? entry.contentType : file?.type,
           }
       )
     }
+
+    if (entry.contentType) {
+      return {
+        name: entry.key,
+        value: entry.value,
+        fileName: entry.key,
+        contentType: entry.contentType,
+      }
+    }
+
     return {
       name: entry.key,
       value: entry.value,
+      contentType: entry.contentType,
     }
   })
 }

packages/hoppscotch-common/src/helpers/utils/EffectiveURL.ts

@@ -427,6 +427,7 @@ export const resolvesEnvsInBody = (
             value: entry.isFile
               ? entry.value
               : parseTemplateString(entry.value, env.variables, false, true),
+            contentType: entry.contentType,
           }
       ),
     }
@@ -512,11 +513,13 @@ function getFinalBodyFromRequest(
           ? x.value.map((v) => ({
               key: parseTemplateString(x.key, envVariables),
               value: v as string | Blob,
+              contentType: x.contentType,
             }))
           : [
               {
                 key: parseTemplateString(x.key, envVariables),
                 value: parseTemplateString(x.value, envVariables),
+                contentType: x.contentType,
               },
             ]
       ),