Got a picture working.

src/database.js

@@ -19,42 +19,51 @@ export class DB {
     this.state.db_type = type;
   }
 
-  query_async(s) {
+  // Perform a chain of asynchronous queries, each one waiting for the last before
+  // starting. Not supported on all database types.
+  queries_async(s) {
     if(this.state.db_type === DBTypeEnum.ALASQL_SQLITE ||
-       this.state.db_type === DBTypeEnum.ALASQL_INDEXEDDB) {
-      return this.state.db_object.promise(s);
-    }
-    throw new Error("Unsupported database type: " + this.state.db_type);
+      this.state.db_type === DBTypeEnum.ALASQL_INDEXEDDB) {
+        var self = this;
+        var p = Promise.resolve(null);
+        for(let i = 0; i < s.length; i++) {
+          p = p.then(() => { return self.state.db_object.promise(s[i]); });
+        }
+
+        return p;
+      }
+      throw new Error("Unsupported database type for async operations: " + this.state.db_type);
   }
 
-  query_sync(s) {
-    if(this.state.db_type === DBTypeEnum.ALASQL_SQLITE ||
-       this.state.db_type === DBTypeEnum.ALASQL_INDEXEDDB) {
-      return this.state.db_object(s);
+  // Perform a series of queries sequentially, then return the last result.
+  // Note that synchronous operation is not supported for all database types.
+  queries_sync(s) {
+    if(this.state.db_type === DBTypeEnum.ALASQL_SQLITE) {
+      for (var i = 0; i < (s.length-1); i++) {
+        this.state.db_object(s[i]);
+      }
+      return this.state.db_object(s[s.length-1]);
     }
-    throw new Error("Unsupported database type: " + this.state.db_type);
+    throw new Error("Unsupported database type for sync operations: " + this.state.db_type);
   }
 
   migrate_async(db_type, db_name) {
     var self = this;
     if(this.state.db_type === DBTypeEnum.ALASQL_SQLITE && db_type === DBTypeEnum.ALASQL_INDEXEDDB) {
       return new Promise(function(resolve, reject) {
-        console.log(self.state);
-        var tables = self.query_sync("SHOW TABLES;");
-        console.log(tables);
-        console.log(self.state);
-        var query = "";
-        query += "DROP INDEXEDDB DATABASE " + db_name + ";";
-        query += "ATTACH INDEXEDDB DATABASE " + db_name + ";";
-        query += "CREATE INDEXEDDB DATABASE IF NOT EXISTS " + db_name + ";";
+        var tables = self.queries_sync(["SHOW TABLES;"]);
+        var queries = [];
+        queries.push("DROP INDEXEDDB DATABASE " + db_name + ";");
+        queries.push("CREATE INDEXEDDB DATABASE IF NOT EXISTS " + db_name + ";");
+        queries.push("ATTACH INDEXEDDB DATABASE " + db_name + ";");
         tables.forEach(elem => {
-          query += "CREATE TABLE " + db_name + "." + elem.tableid + ";";
-          query += "SELECT * INTO " + db_name + "." + elem.tableid +
-                   " FROM " + self.state.db_name + "." + elem.tableid + ";";
+          queries.push("CREATE TABLE " + db_name + "." + elem.tableid + ";");
+          queries.push("SELECT * INTO " + db_name + "." + elem.tableid +
+                   " FROM " + self.state.db_name + "." + elem.tableid + ";");
         });
-        query += "DETACH DATABASE " + self.state.db_name + ";";
-        query += "USE " + db_name + ";";
-        self.query_async(query).then(() => {
+        queries.push("DETACH DATABASE " + self.state.db_name + ";");
+        queries.push("USE " + db_name + ";");
+        self.queries_async(queries).then(() => {
           self.state.db_type = db_type;
           self.state.db_name = db_name;
           resolve();
@@ -134,9 +143,8 @@ export class DBQueryConsole extends React.Component {
 
   onQueryChangeHandler = query => { this.setState( { query: query } ); }
   onQuerySubmitHandler = () => {
-    console.log("Submitting query: " + this.state.query);
     this.setState( { processing: true, result: false } );
-    this.props.database.query_async(this.state.query)
+    this.props.database.queries_async([this.state.query])
     .then(result => {
       this.setState( { processing: false, result: JSON.stringify(result) } );
     });
@@ -145,10 +153,12 @@ export class DBQueryConsole extends React.Component {
   render() {
     return (
       <>
+      <div>
       <DBQueryBar onChange={this.onQueryChangeHandler} />
       <button onClick={this.onQuerySubmitHandler}>Submit</button>
       <p>Result:</p>
       { this.state.result && <p>{this.state.result}</p> }
+      </div>
       </>
     );
   }

src/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Fetch } from './fetch.js';
 import { FetchSQLiteDB, DBQueryConsole } from './database.js';
+import { Photo, PhotoView } from './media.js';
 
 import './index.css';
 
@@ -11,7 +12,7 @@ const URLFinished = ({url, data}) => <p>{url} was loaded: {data.byteLength} byte
 
 const DBLoading = ({sqlite_file}) => <p>Loading: {sqlite_file}</p>;
 const DBError = ({error}) => <p>Failed to load database: {error.message}</p>;
-const DBFinished = ({sqlite_file, db}) => <p>{sqlite_file} was loaded. Name: { db.state.db_name }. Tables: { JSON.stringify(db.query_sync("SHOW TABLES;")) } </p>;
+const DBFinished = ({sqlite_file, db}) => <p>{sqlite_file} was loaded. Name: { db.state.db_name }. </p>;
 
 const TestFetch = ({url}) => (
   <Fetch url={url}>
@@ -25,6 +26,29 @@ const TestFetch = ({url}) => (
   </Fetch>
 )
 
+export class PhotoFromDB extends React.Component {
+  state = {
+    done: false,
+    photo: false,
+  }
+
+  componentDidMount() {
+    this.props.database.queries_async(["SELECT * FROM images;"])
+    .then(res => {
+      var photo = new Photo(res[0]);
+      this.setState({ done: true, photo: photo });
+    });
+  }
+
+  render() {
+    return (
+      <>
+      { this.state.done && <PhotoView photo={ this.state.photo }/> }
+      </>
+    );
+  }
+}
+
 const TestDBFetch = ({sqlite_file}) => (
   <FetchSQLiteDB sqlite_file={sqlite_file} migrate_to_indexeddb={true}>
     {({ loading, error, done, db }) => (
@@ -33,6 +57,7 @@ const TestDBFetch = ({sqlite_file}) => (
         { error && <DBError error={error} />}
         { done && <DBFinished sqlite_file={sqlite_file} db={db} /> }
         { done && <DBQueryConsole database={db}/> }
+        { done && <PhotoFromDB database={db}/> }
       </>
     )}
   </FetchSQLiteDB>
@@ -40,7 +65,9 @@ const TestDBFetch = ({sqlite_file}) => (
 
 ReactDOM.render(
   <>
+  <h1>Test file fetching:</h1>
   <TestFetch url={process.env.PUBLIC_URL + "/stuff"} />
+  <h1>Test DB fetching:</h1>
   <TestDBFetch sqlite_file={process.env.PUBLIC_URL + "/test.sqlite"} />
   </>,
   document.getElementById('root')

src/media.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+export class Media {}
+
+export class Photo extends Media {
+  state = {
+    path: false,
+  }
+
+  constructor(entry) {
+    super();
+    this.state.path = entry.ImagePath;
+  }
+}
+
+export const PhotoView = ({ photo }) => <img src={ photo.state.path } alt=""/>;