Merge pull request #555 from liyasthomas/formdata

Support for Formdata
2020-02-05 23:29:56 +05:30
parent a639ee63dd 04feb3cdbe
commit df0ac3b7c8
5 changed files with 93 additions and 38 deletions
--- 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;
-    // }
  }
 }

--- 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"),
--- 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",
--- 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];
--- 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: "",