Merge pull request #252 from meztez/patch-1

mrin9 · web-flow · commit 3e47df373906 · 2020-06-28T21:33:03.000-07:00
Dual purpose download/show button
diff --git a/docs/examples/binary-response.html b/docs/examples/binary-response.html
@@ -0,0 +1,34 @@
+<!doctype html>
+  <head>
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-132775238-1"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+
+      gtag('config', 'UA-132775238-1');
+    </script>
+
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+    <script type="text/javascript" src="../rapidoc-min.js"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;600&family=Roboto+Mono&display=swap" rel="stylesheet">
+    <style>
+      rapi-doc{
+        width:100%;
+      }
+    </style>
+  </head>
+  <body>
+    <rapi-doc spec-url="../specs/binary-response.json" 
+      show-info = "false"
+      allow-server-selection = "false"
+      allow-authentication = "false"
+      show-header = "false"
+      render-style = "read"
+      regular-font = 'Open Sans'
+      mono-font = "Roboto Mono"
+    > </rapi-doc>
+  </body>
+</html>
diff --git a/docs/list.html b/docs/list.html
@@ -278,6 +278,13 @@ <h2 style="font-weight:700"> Branding Ideas </h2>
       </div>
     </div>
 
+    <div class = "container">
+      <a href="./examples/binary-response.html"> Binary Response  </a>
+      <div class = "c-description" >
+        Download or view binary response
+      </div>
+    </div>
+
     <div class = "container">
       <a href="./examples/multipart-formdata.html"> Multipart Formdata  </a>
       <div class = "c-description" >
diff --git a/docs/specs/binary-response.json b/docs/specs/binary-response.json
@@ -0,0 +1,45 @@
+{
+  "openapi" : "3.0.0",
+  "info" : {
+    "title" : "photos API",
+    "description" : "picsum",
+    "version" : "1.0.0"
+  },
+  "servers" : [ {
+    "url" : "https://picsum.photos/",
+    "description" : "picsum photos"
+  } ],
+  "paths" : {
+    "/{width}/{height}" : {
+      "get" : {
+        "description" : "Return a photo",
+        "parameters" : [ {
+          "name" : "width",
+          "in" : "path",
+          "description" : "photo width",
+          "required" : true,
+          "schema" : {
+            "minimum" : 100,
+            "type" : "integer",
+            "format" : "int32"
+          }
+        }, {
+          "name" : "height",
+          "in" : "path",
+          "description" : "photo height",
+          "required" : true,
+          "schema" : {
+            "minimum" : 100,
+            "type" : "integer",
+            "format" : "int32"
+          }
+        } ],
+        "responses" : {
+          "200" : {
+            "description" : "Default response"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/components/api-request.js b/src/components/api-request.js
@@ -678,6 +678,10 @@ export default class ApiRequest extends LitElement {
           ? html`
             <div class="tab-content col" style="flex:1; display:${this.activeResponseTab === 'response' ? 'flex' : 'none'};">
               <button class="m-btn" @click="${this.downloadResponseBlob}">DOWNLOAD</button>
+              ${this.responseBlobType === 'view'
+                ? html`<button class="m-btn" @click="${this.viewResponseBlob}">VIEW (NEW TAB)</button>`
+                : ''
+              }
             </div>`
           : html`
             <div class="tab-content col m-markdown" style="flex:1;display:${this.activeResponseTab === 'response' ? 'flex' : 'none'};" >
@@ -1003,17 +1007,23 @@ export default class ApiRequest extends LitElement {
           resp.json().then((respObj) => {
             me.responseText = JSON.stringify(respObj, null, 2);
           });
-        } else if (contentType.includes('octet-stream')) {
+        } else if (RegExp('7z|octet-stream|tar|zip').test(contentType)) {
+          me.responseIsBlob = true;
+          me.responseBlobType = 'download';
+        } else if (RegExp('^audio|^image|pdf|^video').test(contentType)) {
           me.responseIsBlob = true;
+          me.responseBlobType = 'view';
+        } else {
+          resp.text().then((respText) => {
+            me.responseText = respText;
+          });
+        }
+        if (me.responseIsBlob) {
           const contentDisposition = resp.headers.get('content-disposition');
           me.respContentDisposition = contentDisposition ? contentDisposition.split('filename=')[1] : 'filename';
           resp.blob().then((respBlob) => {
             me.responseBlobUrl = URL.createObjectURL(respBlob);
           });
-        } else {
-          resp.text().then((respText) => {
-            me.responseText = respText;
-          });
         }
       } else {
         resp.text().then((respText) => {
@@ -1077,13 +1087,26 @@ export default class ApiRequest extends LitElement {
     }
   }
 
+  viewResponseBlob() {
+    if (this.responseBlobUrl) {
+      const a = document.createElement('a');
+      document.body.appendChild(a);
+      a.style = 'display: none';
+      a.href = this.responseBlobUrl;
+      a.target = '_blank';
+      a.click();
+      a.remove();
+    }
+  }
+
   clearResponseData() {
     this.responseUrl = '';
     this.responseHeaders = '';
     this.responseText = '';
     this.responseStatus = 'success';
     this.responseMessage = '';
     this.responseIsBlob = false;
+    this.responseBlobType = '';
     this.respContentDisposition = '';
     if (this.responseBlobUrl) {
       URL.revokeObjectURL(this.responseBlobUrl);
