Actions for image lens

components/lenses/ResponseBodyRenderer.vue

@@ -6,7 +6,7 @@
         :key="lens.lensName"
         :id="lens.lensName"
         :label="lens.lensName"
-        :selected="index == 0"
+        :selected="index === 0"
       >
         <component :is="lens.renderer" :response="response" />
       </tab>

components/lenses/renderers/HTMLLensRenderer.vue

@@ -33,7 +33,7 @@
             class="icon"
             @click="downloadResponse"
             ref="downloadResponse"
-            v-if="response.body && canDownloadResponse"
+            v-if="response.body"
             v-tooltip="$t('download_file')"
           >
             <i class="material-icons">save_alt</i>
@@ -126,14 +126,6 @@ export default {
         this.$refs.downloadResponse.innerHTML = this.downloadButton
       }, 1000)
     },
-    canDownloadResponse() {
-      return (
-        this.response &&
-        this.response.headers &&
-        this.response.headers["content-type"] &&
-        isJSONContentType(this.response.headers["content-type"])
-      )
-    },
     copyResponse() {
       this.$refs.copyResponse.innerHTML = this.doneButton
       this.$toast.success(this.$t("copied_to_clipboard"), {

components/lenses/renderers/ImageLensRenderer.vue

@@ -1,10 +1,33 @@
 <template>
   <ul>
     <li>
-      <img :src="imageSource" />
+      <div class="flex-wrap">
+        <label for="body">{{ $t("response") }}</label>
+        <div>
+          <button
+            class="icon"
+            @click="downloadResponse"
+            ref="downloadResponse"
+            v-if="response.body"
+            v-tooltip="$t('download_file')"
+          >
+            <i class="material-icons">save_alt</i>
+          </button>
+        </div>
+      </div>
+      <div id="response-details-wrapper">
+        <img class="response-image" :src="imageSource" />
+      </div>
     </li>
   </ul>
 </template>
+
+<style scoped lang="scss">
+.response-image {
+  max-width: 100%;
+}
+</style>
+
 <script>
 export default {
   props: {
@@ -13,8 +36,15 @@ export default {
   data() {
     return {
       imageSource: "",
+      doneButton: '<i class="material-icons">done</i>',
+      downloadButton: '<i class="material-icons">save_alt</i>',
     }
   },
+  computed: {
+    responseType() {
+      return (this.response.headers["content-type"] || "").split(";")[0].toLowerCase()
+    },
+  },
   watch: {
     response: {
       immediate: true,
@@ -33,7 +63,6 @@ export default {
       },
     },
   },
-
   mounted() {
     this.imageSource = ""
 
@@ -47,5 +76,27 @@ export default {
     }
     reader.readAsDataURL(blob)
   },
+  methods: {
+    downloadResponse() {
+      const dataToWrite = this.response.body
+      const file = new Blob([dataToWrite], { type: this.responseType })
+      const a = document.createElement("a")
+      const url = URL.createObjectURL(file)
+      a.href = url
+      // TODO get uri from meta
+      a.download = `response on ${Date()}`.replace(/\./g, "[dot]")
+      document.body.appendChild(a)
+      a.click()
+      this.$refs.downloadResponse.innerHTML = this.doneButton
+      this.$toast.success(this.$t("download_started"), {
+        icon: "done",
+      })
+      setTimeout(() => {
+        document.body.removeChild(a)
+        window.URL.revokeObjectURL(url)
+        this.$refs.downloadResponse.innerHTML = this.downloadButton
+      }, 1000)
+    },
+  },
 }
 </script>