Merge pull request #555 from liyasthomas/formdata

Support for Formdata
hoppscotch · Feb 5, 2020 · df0ac3b · df0ac3b
2 parents a639ee6 + 04feb3c
commit df0ac3b
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 38 deletions.
diff --git a/assets/css/styles.scss b/assets/css/styles.scss
@@ -558,7 +558,6 @@ code {
   transition: all 0.2s ease-in-out;
   user-select: text;
   width: calc(100% - 8px);
-  min-width: 128px;
   resize: vertical;
   text-overflow: ellipsis;
 
@@ -570,6 +569,17 @@ code {
   }
 }
 
+.method {
+  cursor: pointer;
+
+  &:hover,
+  &:active,
+  &:focus {
+    box-shadow: inset 0 0 0 2px var(--fg-light-color);
+    transition: all 0.2s ease-in-out;
+  }
+}
+
 pre {
   display: grid;
 }
@@ -783,21 +793,12 @@ ol li {
 }
 
 #send {
-  // #hidden-message {
-  //   display: none;
-  // }
-
   &.show {
     display: flex;
     position: fixed;
     top: 12px;
     right: 12px;
     z-index: 2;
-
-    // #hidden-message {
-    //   display: block;
-    //   margin-left: 4px;
-    // }
   }
 }
 

diff --git a/components/collections/index.vue b/components/collections/index.vue
@@ -4,7 +4,7 @@ TODO:
 -->
 
 <template>
-  <div class="collections-wrapper">
+  <pw-section class="yellow" :label="$t('collections')" ref="collections">
     <addCollection :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
     <editCollection
       :show="showModalEdit"
@@ -92,7 +92,7 @@ TODO:
         <span>{{ $t("generate_docs") }}</span>
       </button>
     </nuxt-link>
-  </div>
+  </pw-section>
 </template>
 
 <style scoped lang="scss">
@@ -113,6 +113,7 @@ import { fb } from "../../functions/fb";
 export default {
   components: {
     collection,
+    "pw-section": () => import("../section"),
     addCollection: () => import("./addCollection"),
     addFolder: () => import("./addFolder"),
     editCollection: () => import("./editCollection"),

diff --git a/lang/en-US.js b/lang/en-US.js
@@ -27,7 +27,6 @@ export default {
   method: "Method",
   path: "Path",
   label: "Label",
-  again: "Again",
   content_type: "Content Type",
   raw_input: "Raw input",
   parameter_list: "Parameter List",

diff --git a/pages/index.vue b/pages/index.vue
@@ -219,7 +219,6 @@
                 ref="sendButton"
               >
                 {{ $t("send") }}
-                <!-- <span id="hidden-message">{{ $t("again") }}</span> -->
                 <span>
                   <i class="material-icons">send</i>
                 </span>
@@ -252,13 +251,42 @@
                     </pw-toggle>
                   </span>
                   <div>
+                    <label for="attachment">
+                      <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">
                       <button
                         class="icon"
                         @click="$refs.payload.click()"
-                        v-tooltip="$t('upload_file')"
+                        v-tooltip="$t('import_json')"
                       >
-                        <i class="material-icons">attach_file</i>
+                        <i class="material-icons">post_add</i>
                       </button>
                     </label>
                     <input
@@ -381,10 +409,10 @@
                   content: isHidden ? $t('show_code') : $t('hide_code')
                 }"
               >
-                <i class="material-icons">flash_on</i>
+                <i class="material-icons">code</i>
               </button>
               <button
-                :class="'icon' + (showPreRequestScript ? ' info-response' : '')"
+                class="icon"
                 id="preRequestScriptButton"
                 v-tooltip.bottom="{
                   content: !showPreRequestScript
@@ -397,14 +425,15 @@
                   class="material-icons"
                   :class="showPreRequestScript"
                   v-if="!showPreRequestScript"
-                  >code</i
-                >
-                <i class="material-icons" :class="showPreRequestScript" v-else
-                  >close</i
                 >
+                  playlist_add
+                </i>
+                <i class="material-icons" :class="showPreRequestScript" v-else>
+                  close
+                </i>
               </button>
               <button
-                :class="'icon' + (testsEnabled ? ' info-response' : '')"
+                class="icon"
                 id="preRequestScriptButto"
                 v-tooltip.bottom="{
                   content: !testsEnabled ? 'Enable Tests' : 'Disable Tests'
@@ -416,7 +445,7 @@
                   :class="testsEnabled"
                   v-if="!testsEnabled"
                 >
-                  assignment_turned_in
+                  playlist_add_check
                 </i>
                 <i class="material-icons" :class="testsEnabled" v-else>close</i>
               </button>
@@ -501,7 +530,7 @@
                     </button>
                   </div>
                 </div>
-                <div v-for="testReport in testReports">
+                <div v-for="(testReport, index) in testReports" :key="index">
                   <div v-if="testReport.startBlock" class="info">
                     <h4>{{ testReport.startBlock }}</h4>
                   </div>
@@ -1044,13 +1073,7 @@
           <input id="collection-tab" type="radio" name="side" />
           <label for="collection-tab">{{ $t("collections") }}</label>
           <div class="tab">
-            <pw-section
-              class="yellow"
-              :label="$t('collections')"
-              ref="collections"
-            >
-              <collections />
-            </pw-section>
+            <collections />
           </div>
           <input id="sync-tab" type="radio" name="side" />
           <label for="sync-tab">{{ $t("notes") }}</label>
@@ -1606,7 +1629,9 @@ export default {
       responseBodyMaxLines: 16,
       activeSidebar: true,
       fb,
-      customMethod: false
+      customMethod: false,
+      files: [],
+      filenames: ""
     };
   },
   watch: {
@@ -2174,7 +2199,7 @@ export default {
         url: this.url + this.pathName + this.queryString,
         auth,
         headers,
-        data: requestBody ? requestBody.toString() : null,
+        data: requestBody,
         credentials: true
       };
       if (preRequestScript) {
@@ -2255,6 +2280,18 @@ export default {
         });
       }
 
+      requestBody = requestBody ? requestBody.toString() : null;
+
+      if (this.files.length !== 0) {
+        const formData = new FormData();
+        for (let i = 0; i < this.files.length; i++) {
+          let file = this.files[i];
+          formData.append(`files[${i}]`, file);
+        }
+        formData.append("data", requestBody);
+        requestBody = formData;
+      }
+
       // If the request uses a token for auth, we want to make sure it's sent here.
       if (this.auth === "Bearer Token" || this.auth === "OAuth 2.0")
         headers["Authorization"] = `Bearer ${this.bearerToken}`;
@@ -2716,9 +2753,9 @@ export default {
         default:
           (this.label = ""),
             (this.method = "GET"),
-            (this.url = "https://reqres.in"),
+            (this.url = "https://httpbin.org"),
             (this.auth = "None"),
-            (this.path = "/api/users"),
+            (this.path = "/get"),
             (this.auth = "None");
           this.httpUser = "";
           this.httpPassword = "";
@@ -2736,6 +2773,7 @@ export default {
           this.accessTokenUrl = "";
           this.clientId = "";
           this.scope = "";
+          this.files = [];
       }
       e.target.innerHTML = this.doneButton;
       this.$toast.info(this.$t("cleared"), {
@@ -2797,6 +2835,22 @@ 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];

diff --git a/store/state.js b/store/state.js
@@ -1,8 +1,8 @@
 export default () => ({
   request: {
     method: "GET",
-    url: "https://reqres.in",
-    path: "/api/users",
+    url: "https://httpbin.org",
+    path: "/get",
     label: "",
     auth: "None",
     httpUser: "",