How can I render blobs in the browser?

Images stored as BLOBs can be displayed inline using HTML5 Blobs. Download the raw BLOB bytes using XHR, and then use the window.URL.createObjectURL function to display it in an img element. Here’s an example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<html>
<body>
  <img id="image"></img>

  <script type="text/javascript">
    var apiKey = "...";
    var vaultId = "...";
    var blobId = "...";
    var imageElement = document.getElementById("image");

    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        imageElement.src = window.URL.createObjectURL(this.response);
      }
    };
    xhr.open('GET', 'https://api.truevault.com/v1/vaults/' + vaultId + '/blobs/' + blobId);
    xhr.setRequestHeader('Authorization', 'Basic ' + btoa(apiKey + ':'));
    xhr.responseType = 'blob';
    xhr.send();
  </script>
</body>

A similar approach works for displaying PDFs. Mozilla’s JS PDF viewer is easy to incorporate, and avoids the security problems associated with native PDF plugins. It works similarly to the PNG example above:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
 
<html>
<head>
  <link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/1.6.463/pdf_viewer.css">

  <script
    src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/1.6.463/pdf.min.js">
  </script>
  <script
    src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/1.6.463/pdf_viewer.min.js">
  </script>

  <style>
      body {
        background-color: #808080;
        margin: 0;
        padding: 0;
      }
      #viewerContainer {
        overflow: auto;
        position: absolute;
        width: 100%;
        height: 100%;
      }
    </style>

</head>
<body>

  <div id="viewerContainer">
    <div class="pdfViewer"></div>
  </div>

  <script type="text/javascript">
    var apiKey = "...";
    var vaultId = "...";
    var blobId = "...";
    var viewerContainerId = "viewerContainer";

    PDFJS.workerSrc =
    'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/1.6.463/pdf.worker.min.js';

    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        var container = document.getElementById(viewerContainerId);
        var pdfViewer = new PDFJS.PDFViewer({
          container: container
        });
        var reader = new FileReader();
        reader.addEventListener('loadend', function() {
          PDFJS.getDocument(this.result).then(function(doc) {
              pdfViewer.setDocument(doc);
          });
        });
        reader.readAsArrayBuffer(this.response);
      }
    };
    xhr.open('GET', 'https://api.truevault.com/v1/vaults/' + vaultId + '/blobs/' + blobId);
    xhr.setRequestHeader('Authorization', 'Basic ' + btoa(apiKey + ':'));
    xhr.responseType = 'blob';
    xhr.send();
  </script>
</body>