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>

Dockerfile

@@ -22,4 +22,4 @@ RUN npm run generate
 ENV HOST 0.0.0.0
 EXPOSE 3000
 
-CMD ["npm", "run", "start"]
+CMD ["npm", "run", "dev"]

components/http/http-body-parameters.vue

@@ -39,9 +39,12 @@
       </li>
       <li>
         <input
+          v-if="!requestBodyParamIsFile(index)"
           :placeholder="`value ${index + 1}`"
           :value="param.value"
           @change="
+            // if input is form data, set value to be an array containing the value
+            // only
             $store.commit('setValueBodyParams', {
               index,
               value: $event.target.value,
@@ -49,6 +52,17 @@
           "
           @keyup.prevent="setRouteQueryState"
         />
+        <div v-else class="file-chips-container">
+          <div class="file-chips-wrapper">
+            <deletable-chip
+              v-for="(file, i) in Array.from(bodyParams[index].value)"
+              :key="`body-param-${index}-file-${i}`"
+              @chip-delete="chipDelete(index, i)"
+            >
+              {{ file.name }}
+            </deletable-chip>
+          </div>
+        </div>
       </li>
       <div>
         <li>
@@ -80,6 +94,22 @@
           </button>
         </li>
       </div>
+      <div v-if="contentType === 'multipart/form-data'">
+        <li>
+          <label for="attachment" class="p-0">
+            <button class="w-full icon" @click="$refs.attachment[index].click()">
+              <i class="material-icons">attach_file</i>
+            </button>
+          </label>
+          <input
+            ref="attachment"
+            name="attachment"
+            type="file"
+            @change="setRequestAttachment($event, index)"
+            multiple
+          />
+        </li>
+      </div>
       <div>
         <li>
           <button
@@ -103,6 +133,21 @@
   </div>
 </template>
 
+<style scoped lang="scss">
+.file-chips-container {
+  @apply flex;
+  @apply flex-1;
+  @apply whitespace-no-wrap;
+  @apply overflow-auto;
+  @apply bg-bgDarkColor;
+
+  .file-chips-wrapper {
+    @apply flex;
+    @apply w-0;
+  }
+}
+</style>
+
 <script>
 export default {
   props: {
@@ -121,6 +166,29 @@ export default {
     addRequestBodyParam() {
       this.$emit("add-request-body-param")
     },
+    setRequestAttachment(event, index) {
+      const { files } = event.target
+      this.$store.commit("setFilesBodyParams", {
+        index,
+        value: Array.from(files),
+      })
+    },
+    requestBodyParamIsFile(index) {
+      const bodyParamValue = this.bodyParams?.[index]?.value
+      const isFile = bodyParamValue?.[0] instanceof File
+      return isFile
+    },
+    chipDelete(paramIndex, fileIndex) {
+      this.$store.commit("removeFile", {
+        index: paramIndex,
+        fileIndex,
+      })
+    },
+  },
+  computed: {
+    contentType() {
+      return this.$store.state.request.contentType
+    },
   },
 }
 </script>

components/http/http-raw-body.vue

@@ -0,0 +1,114 @@
+<template>
+  <div>
+    <ul>
+      <li>
+        <div class="row-wrapper">
+          <label for="rawBody">{{ $t("raw_request_body") }}</label>
+          <div>
+            <button
+              class="icon"
+              ref="prettifyRequest"
+              @click="prettifyRequestBody"
+              v-tooltip="$t('prettify_body')"
+              v-if="rawInput && contentType.endsWith('json')"
+            >
+              <i class="material-icons">photo_filter</i>
+            </button>
+            <label for="payload" class="p-0">
+              <button class="icon" @click="$refs.payload.click()" v-tooltip="$t('import_json')">
+                <i class="material-icons">post_add</i>
+              </button>
+            </label>
+            <input ref="payload" name="payload" type="file" @change="uploadPayload" />
+            <button
+              class="icon"
+              @click="clearContent('rawParams', $event)"
+              v-tooltip.bottom="$t('clear')"
+            >
+              <i class="material-icons">clear_all</i>
+            </button>
+          </div>
+        </div>
+        <ace-editor
+          v-model="rawParamsBody"
+          :lang="rawInputEditorLang"
+          :options="{
+            maxLines: '16',
+            minLines: '8',
+            fontSize: '16px',
+            autoScrollEditorIntoView: true,
+            showPrintMargin: false,
+            useWorker: false,
+          }"
+        />
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import { getEditorLangForMimeType } from "~/helpers/editorutils"
+
+export default {
+  props: {
+    rawParams: { type: String, default: "{}" },
+    contentType: { type: String, default: "" },
+    rawInput: { type: Boolean, default: false },
+  },
+  data() {
+    return {
+      doneButton: '<i class="material-icons">done</i>',
+    }
+  },
+  computed: {
+    rawParamsBody: {
+      get() {
+        return this.rawParams
+      },
+      set(value) {
+        this.$emit("update-raw-body", value)
+      },
+    },
+    rawInputEditorLang() {
+      return getEditorLangForMimeType(this.contentType)
+    },
+  },
+  methods: {
+    clearContent(bodyParams, $event) {
+      this.$emit("clear-content", bodyParams, $event)
+    },
+    uploadPayload() {
+      this.$emit("update-raw-input", true)
+      const file = this.$refs.payload.files[0]
+      if (file !== undefined && file !== null) {
+        const reader = new FileReader()
+        reader.onload = ({ target }) => {
+          this.$emit("update-raw-body", target.result)
+        }
+        reader.readAsText(file)
+        this.$toast.info(this.$t("file_imported"), {
+          icon: "attach_file",
+        })
+      } else {
+        this.$toast.error(this.$t("choose_file"), {
+          icon: "attach_file",
+        })
+      }
+      this.$refs.payload.value = ""
+    },
+    prettifyRequestBody() {
+      try {
+        const jsonObj = JSON.parse(this.rawParamsBody)
+        this.rawParamsBody = JSON.stringify(jsonObj, null, 2)
+        let oldIcon = this.$refs.prettifyRequest.innerHTML
+        this.$refs.prettifyRequest.innerHTML = this.doneButton
+        setTimeout(() => (this.$refs.prettifyRequest.innerHTML = oldIcon), 1000)
+      } catch (e) {
+        this.$toast.error(`${this.$t("json_prettify_invalid_body")}`, {
+          icon: "error",
+        })
+      }
+    },
+  },
+}
+</script>

components/ui/deletable-chip.vue

@@ -0,0 +1,32 @@
+<template>
+  <span class="chip">
+    <span><slot></slot></span>
+    <button class="p-2 icon" @click="$emit('chip-delete')">
+      <i class="material-icons close-button"> close </i>
+    </button>
+  </span>
+</template>
+
+<style scoped lang="scss">
+.chip {
+  @apply inline-flex;
+  @apply items-center;
+  @apply justify-center;
+  @apply rounded-lg;
+  @apply m-1;
+  @apply pl-4;
+  @apply bg-bgDarkColor;
+  @apply text-fgColor;
+  @apply font-mono;
+  @apply font-normal;
+  @apply transition;
+  @apply ease-in-out;
+  @apply duration-150;
+  @apply border;
+  @apply border-brdColor;
+}
+
+.close-button {
+  @apply text-base;
+}
+</style>

helpers/utils/contenttypes.js

@@ -5,10 +5,11 @@ export const knownContentTypes = [
   "application/vnd.api+json",
   "application/xml",
   "application/x-www-form-urlencoded",
+  "multipart/form-data",
   "text/html",
   "text/plain",
 ]
 
 export function isJSONContentType(contentType) {
-   return /\bjson\b/i.test(contentType);
+  return /\bjson\b/i.test(contentType)
 }

pages/index.vue

@@ -100,54 +100,6 @@
                       {{ $t("raw_input") }}
                     </pw-toggle>
                   </span>
-                  <div>
-                    <label for="attachment" class="p-0">
-                      <button
-                        class="icon"
-                        @click="$refs.attachment.click()"
-                        v-tooltip="
-                          files.length === 0 ? $t('upload_file') : filenames.replace('<br/>', '')
-                        "
-                      >
-                        <i class="material-icons">attach_file</i>
-                        <span>
-                          {{
-                            files.length === 0
-                              ? "No files"
-                              : files.length == 1
-                              ? "1 file"
-                              : files.length + " files"
-                          }}
-                        </span>
-                      </button>
-                    </label>
-                    <input
-                      ref="attachment"
-                      name="attachment"
-                      type="file"
-                      @change="uploadAttachment"
-                      multiple
-                    />
-                    <label for="payload" class="p-0">
-                      <button
-                        class="icon"
-                        @click="$refs.payload.click()"
-                        v-tooltip="$t('import_json')"
-                      >
-                        <i class="material-icons">post_add</i>
-                      </button>
-                    </label>
-                    <input ref="payload" name="payload" type="file" @change="uploadPayload" />
-                    <button
-                      class="icon"
-                      ref="prettifyRequest"
-                      @click="prettifyRequestBody"
-                      v-tooltip="$t('prettify_body')"
-                      v-if="rawInput && this.contentType.endsWith('json')"
-                    >
-                      <i class="material-icons">photo_filter</i>
-                    </button>
-                  </div>
                 </div>
               </li>
             </ul>
@@ -159,36 +111,15 @@
               @remove-request-body-param="removeRequestBodyParam"
               @add-request-body-param="addRequestBodyParam"
             />
-            <div v-else>
-              <ul>
-                <li>
-                  <div class="row-wrapper">
-                    <label for="rawBody">{{ $t("raw_request_body") }}</label>
-                    <div>
-                      <button
-                        class="icon"
-                        @click="clearContent('rawParams', $event)"
-                        v-tooltip.bottom="$t('clear')"
-                      >
-                        <i class="material-icons">clear_all</i>
-                      </button>
-                    </div>
-                  </div>
-                  <ace-editor
-                    v-model="rawParams"
-                    :lang="rawInputEditorLang"
-                    :options="{
-                      maxLines: '16',
-                      minLines: '8',
-                      fontSize: '16px',
-                      autoScrollEditorIntoView: true,
-                      showPrintMargin: false,
-                      useWorker: false,
-                    }"
-                  />
-                </li>
-              </ul>
-            </div>
+            <http-raw-body
+              v-else
+              :rawParams="rawParams"
+              :contentType="contentType"
+              :rawInput="rawInput"
+              @clear-content="clearContent"
+              @update-raw-body="updateRawBody"
+              @update-raw-input="updateRawInput = (value) => (rawInput = value)"
+            />
           </div>
           <div class="row-wrapper">
             <span>
@@ -725,7 +656,6 @@ import parseTemplateString from "~/helpers/templating"
 import { tokenRequest, oauthRedirect } from "~/helpers/oauth"
 import { cancelRunningRequest, sendNetworkRequest } from "~/helpers/network"
 import { fb } from "~/helpers/fb"
-import { getEditorLangForMimeType } from "~/helpers/editorutils"
 import { hasPathParams, addPathParamsToVariables, getQueryParams } from "~/helpers/requestParams"
 import { parseUrlAndPath } from "~/helpers/utils/uri"
 import { httpValid } from "~/helpers/utils/valid"
@@ -897,6 +827,7 @@ export default {
     canListParameters() {
       return (
         this.contentType === "application/x-www-form-urlencoded" ||
+        this.contentType === "multipart/form-data" ||
         isJSONContentType(this.contentType)
       )
     },
@@ -1115,9 +1046,6 @@ export default {
         this.$store.commit("setState", { value, attribute: "rawInput" })
       },
     },
-    rawInputEditorLang() {
-      return getEditorLangForMimeType(this.contentType)
-    },
     requestType: {
       get() {
         return this.$store.state.request.requestType
@@ -1314,7 +1242,10 @@ export default {
         let environmentVariables = getEnvironmentVariablesFromScript(preRequestScript)
         environmentVariables = addPathParamsToVariables(this.params, environmentVariables)
         requestOptions.url = parseTemplateString(requestOptions.url, environmentVariables)
-        requestOptions.data = parseTemplateString(requestOptions.data, environmentVariables)
+        if (!(requestOptions.data instanceof FormData)) {
+          // TODO: Parse env variables for form data too
+          requestOptions.data = parseTemplateString(requestOptions.data, environmentVariables)
+        }
         for (let k in requestOptions.headers) {
           const kParsed = parseTemplateString(k, environmentVariables)
           const valParsed = parseTemplateString(requestOptions.headers[k], environmentVariables)
@@ -1370,13 +1301,19 @@ export default {
         })
       }
       requestBody = requestBody ? requestBody.toString() : null
-      if (this.files.length !== 0) {
+      if (this.contentType === "multipart/form-data") {
         const formData = new FormData()
-        for (let i = 0; i < this.files.length; i++) {
-          let file = this.files[i]
-          formData.append(i, file)
+        for (const bodyParam of this.bodyParams.filter((item) =>
+          item.hasOwnProperty("active") ? item.active == true : true
+        )) {
+          if (bodyParam?.value?.[0] instanceof File) {
+            for (const file of bodyParam.value) {
+              formData.append(bodyParam.key, file)
+            }
+          } else {
+            formData.append(bodyParam.key, bodyParam.value)
+          }
         }
-        formData.append("data", requestBody)
         requestBody = formData
       }
       // If the request uses a token for auth, we want to make sure it's sent here.
@@ -1645,19 +1582,6 @@ export default {
         },
       })
     },
-    prettifyRequestBody() {
-      try {
-        const jsonObj = JSON.parse(this.rawParams)
-        this.rawParams = JSON.stringify(jsonObj, null, 2)
-        let oldIcon = this.$refs.prettifyRequest.innerHTML
-        this.$refs.prettifyRequest.innerHTML = this.doneButton
-        setTimeout(() => (this.$refs.prettifyRequest.innerHTML = oldIcon), 1000)
-      } catch (e) {
-        this.$toast.error(`${this.$t("json_prettify_invalid_body")}`, {
-          icon: "error",
-        })
-      }
-    },
     copyRequest() {
       if (navigator.share) {
         const time = new Date().toLocaleTimeString()
@@ -1689,7 +1613,9 @@ export default {
       const deep = (key) => {
         const haveItems = [...this[key]].length
         if (haveItems && this[key]["value"] !== "") {
-          return `${key}=${JSON.stringify(this[key])}&`
+          // Exclude files fro  query params
+          const filesRemoved = this[key].filter((item) => !(item?.value?.[0] instanceof File))
+          return `${key}=${JSON.stringify(filesRemoved)}&`
         }
         return ""
       }
@@ -1896,40 +1822,8 @@ export default {
       }
       this.setRouteQueryState()
     },
-    uploadAttachment() {
-      this.filenames = ""
-      this.files = this.$refs.attachment.files
-      if (this.files.length !== 0) {
-        for (let file of this.files) {
-          this.filenames = `${this.filenames}<br/>${file.name}`
-        }
-        this.$toast.info(this.$t("file_imported"), {
-          icon: "attach_file",
-        })
-      } else {
-        this.$toast.error(this.$t("choose_file"), {
-          icon: "attach_file",
-        })
-      }
-    },
-    uploadPayload() {
-      this.rawInput = true
-      const file = this.$refs.payload.files[0]
-      if (file !== undefined && file !== null) {
-        const reader = new FileReader()
-        reader.onload = ({ target }) => {
-          this.rawParams = target.result
-        }
-        reader.readAsText(file)
-        this.$toast.info(this.$t("file_imported"), {
-          icon: "attach_file",
-        })
-      } else {
-        this.$toast.error(this.$t("choose_file"), {
-          icon: "attach_file",
-        })
-      }
-      this.$refs.payload.value = ""
+    updateRawBody(rawParams) {
+      this.rawParams = rawParams
     },
     async handleAccessTokenRequest() {
       if (this.oidcDiscoveryUrl === "" && (this.authUrl === "" || this.accessTokenUrl === "")) {

plugins/vuex-persist.js

@@ -1,5 +1,7 @@
 import VuexPersistence from "vuex-persist"
 
 export default ({ store }) => {
-  new VuexPersistence().plugin(store)
+  new VuexPersistence({
+    filter: (mutation) => mutation.type !== "setFilesBodyParams",
+  }).plugin(store)
 }

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