Load images as both binary strings and blobs.

src/components/app/index.tsx

@@ -14,6 +14,7 @@ type Props = {
 export type FileObj = {
   id: number,
   data?: string,
+  uri?: string,
   error?: Error | DOMError | String,
   file: File,
   loading: boolean
@@ -25,7 +26,7 @@ type State = {
   files: FileObj[]
 };
 
-let counter = 0;
+let idCounter = 0;
 
 export default class App extends Component<Props, State> {
   state: State = {
@@ -76,7 +77,7 @@ export default class App extends Component<Props, State> {
   @bind
   loadFile(file: File) {
     let fileObj: FileObj = {
-      id: ++counter,
+      id: ++idCounter,
       file,
       error: undefined,
       loading: true,
@@ -87,11 +88,16 @@ export default class App extends Component<Props, State> {
       files: [fileObj]
     });
 
-    new Response(file).text()
+    Promise.all([
-      .then(data => ({ data }))
+      new Response(file).text(),
+      new Response(file).blob()
+    ])
+      .then(([data, blob]) => ({
+        data,
+        uri: URL.createObjectURL(blob)
+      }))
       .catch(error => ({ error }))
       .then(state => {
-        console.log(state);
         let files = this.state.files.slice();
         files[files.indexOf(fileObj)] = Object.assign({}, fileObj, {
           loading: false,

src/components/home/index.tsx

@@ -28,7 +28,7 @@ export default class Home extends Component<Props, State> {
     return (
       <div class={style.home + ' ' + (active ? style.active : '')}>
         { files && files[0] && (
-          <img src={files[0].data} />
+          <img src={files[0].uri} style="width:100%;" />
         ) }
       </div>
     );