Show images in file view

app/components/file-preview/component.js

@@ -9,6 +9,7 @@ export default Component.extend({
 
   fileLoaded: false,
   fileContent: null,
+  objectURL: null,
   metaData: null,
   type: alias('metaData.type'),
   isBinary: alias('metaData.isBinary'),
@@ -21,11 +22,19 @@ export default Component.extend({
     return !this.get('isBinary');
   }.property('isBinary'),
 
-  fetchFile: function() {
+  loadFile: function() {
     let path = this.get('metaData.path');
 
+    // TODO don't fetch is size above certain limit
+
     this.get('storage.client').getFile(path).then(file => {
-      this.set('fileContent', file.data);
+      if (this.get('isImage')) {
+        let view = new window.Uint8Array(file.data);
+        let blob = new window.Blob([view], { type: file.contentType });
+        this.set('objectURL', window.URL.createObjectURL(blob));
+      } else {
+        this.set('fileContent', file.data);
+      }
       this.set('fileLoaded', true);
     });
   }.on('init')

app/components/file-preview/template.hbs

@@ -1,6 +1,6 @@
 {{#if fileLoaded}}
   {{#if isImage}}
-    <img src="" alt={{metaData.name}}>
+  <img src={{objectURL}} alt={{metaData.name}}>
   {{/if}}
 
   {{#if isText}}

app/styles/components/_file-preview.scss

@@ -5,4 +5,8 @@
     line-height: 1.5rem;
   }
 
+  img {
+    max-width: 100%;
+  }
+
 }