Support multipart/form-data content-type (#1485)

* Initial UI refactor - move raw and key-value body to components and tabs

* Delete package-lock.json

* deps

* Add multipart/form-data as a content type

* fix: add default contentType value

* Allow http body param request body with multipart/form-data

* Add form data to vuex

* move raw body components to 'Raw Request Body' tab

* Add files addition logic

* Set Dockerfile to run nuxt in dev mode

* Set Dockerfile to run nuxt in dev mode

* Draft version of file upload

* refactor: clean up

* Add file chip to denote file input

* Remove console.log

* refactor(ui): matching styles

* refactor(ui): matching styles

* fix(ui): mobile responsiveness

* fix(ui): mobile responsiveness

* refactor: minor cleanup

* Remove file from any form of persistence

* Add warning that form data files will not be saved to local storage

* Add remove file functionality

* Prevent file from being saved to collections

* Remove console.log

* fix active toggle on multipart/form-data + cleanup

* auto import components

Co-authored-by: nelsontky <nelson@ccb.wtf>

store/mutations.js

@@ -107,6 +107,18 @@ export default {
     request.bodyParams[index].value = value
   },
 
+  // While this mutation is same as the setValueBodyParams above, it is excluded
+  // from vuex-persist. We will commit this mutation while adding a file
+  // param as there is no way to serialize File objects and thus we cannot
+  // persist file objects in localStorage
+  setFilesBodyParams({ request }, { index, value }) {
+    request.bodyParams[index].value = value
+  },
+
+  removeFile({ request }, { index, fileIndex }) {
+    request.bodyParams[index].value.splice(fileIndex, 1)
+  },
+
   setActiveBodyParams({ request }, { index, value }) {
     if (!request.bodyParams[index].hasOwnProperty("active")) {
       Vue.set(request.bodyParams[index], "active", value)

store/postwoman.js

@@ -264,7 +264,15 @@ export const mutations = {
   },
 
   saveRequestAs({ collections }, payload) {
-    const { request, collectionIndex, folderName, requestIndex } = payload
+    let { request, collectionIndex, folderName, requestIndex } = payload
+
+    // Filter out all file inputs
+    request = {
+      ...request,
+      bodyParams: request.bodyParams.map((param) =>
+        param?.value?.[0] instanceof File ? { ...param, value: "" } : param
+      ),
+    }
 
     const specifiedCollection = collectionIndex !== undefined
     const specifiedFolder = folderName !== undefined