Allow users to upload templates

lib/Toolbar.js

@@ -5,7 +5,7 @@ import 'bootstrap/js/dist/modal';
 import '@selectize/selectize';
 import '@selectize/selectize/dist/css/selectize.bootstrap4.css';
 
-import { exportFile, exportJsonFile } from './utils/files';
+import { exportFile, exportJsonFile, readFileAsync } from './utils/files';
 
 import template from './toolbar.html';
 
@@ -71,6 +71,27 @@ class Toolbar {
     // Triggers show/hide of draft templates
     $('#view-template-drafts').on('change', () => this.updateTemplateOptions());
 
+    // File -> Upload Template
+    const $templateInput = $('#upload-template-input');
+
+    $templateInput.on('change', () => {
+      const file = $templateInput[0].files[0];
+      const ext = file.name.split('.').pop();
+      if (ext !== 'json') {
+        const errMsg = `Please upload a template schema.json file`;
+        $('#upload-template-err-msg').text(errMsg);
+        $('#upload-template-error-modal').modal('show');
+      } else {
+        dh.invalid_cells = {};
+        this.loadSelectedTemplate(file);
+      }
+      // Allow consecutive uploads of the same file
+      $templateInput[0].value = '';
+
+      self.hideValidationResultButtons();
+      dh.current_selection = [null, null, null, null];
+    });
+
     // File -> New
     $('#new-dropdown-item, #clear-data-confirm-btn').click((e) => {
       const isNotEmpty = dh.hot.countRows() - dh.hot.countEmptyRows();
@@ -298,16 +319,27 @@ class Toolbar {
     }
   }
 
-  async loadSelectedTemplate() {
-    const template_path = this.$selectTemplate.val();
-    const [schema_name, template_name] = template_path.split('/');
-
-    // Update DataHarmonizer
-    const schema = await this.getSchema(schema_name, template_name);
-    const exportFormats = await this.getExportFormats(
-      schema_name,
-      template_name
-    );
+  async loadSelectedTemplate(file = null) {
+    let template_name, schema, exportFormats;
+    if (file) {
+      exportFormats = {};
+      try {
+        let contentBuffer = await readFileAsync(file);
+        schema = JSON.parse(contentBuffer);
+        template_name = Object.keys(schema.classes).filter(
+          (e) => schema.classes[e].is_a === 'dh_interface'
+        )[0];
+      } catch (err) {
+        console.log(err);
+        return;
+      }
+    } else {
+      const template_path = this.$selectTemplate.val();
+      let schema_name;
+      [schema_name, template_name] = template_path.split('/');
+      schema = await this.getSchema(schema_name, template_name);
+      exportFormats = await this.getExportFormats(schema_name, template_name);
+    }
     this.dh.useSchema(schema, exportFormats, template_name);
 
     // Update own interface

lib/toolbar.css

@@ -1,3 +1,7 @@
+#upload-template-input {
+  display: none;
+}
+
 #open-file-input {
   display: none;
 }

lib/toolbar.html

@@ -15,8 +15,20 @@
           class="dropdown-item"
           data-toggle="modal"
           data-target="#select-template-modal"
-          >Change Template</span
+          >Select Template</span
         >
+        <label
+          for="upload-template-input"
+          class="dropdown-item mb-0"
+          id="upload-template-dropdown-item"
+          >Upload Template</label
+        >
+        <input
+          type="file"
+          accept=".json"
+          class="form-control-file"
+          id="upload-template-input"
+        />
         <span class="dropdown-item" id="new-dropdown-item">New</span>
         <label
           for="open-file-input"
@@ -496,6 +508,35 @@
       </div>
     </div>
   </div>
+  <div
+    class="modal"
+    id="upload-template-error-modal"
+    tabindex="-1"
+    role="dialog"
+  >
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-body">
+          <div class="container-fluid">
+            <div class="row">
+              <div class="col text-danger" id="upload-template-err-msg"></div>
+            </div>
+            <div class="row mt-3">
+              <div class="col d-flex justify-content-end">
+                <button
+                  type="button"
+                  class="btn btn-secondary"
+                  data-dismiss="modal"
+                >
+                  Ok
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
   <div class="modal" id="jump-to-modal" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
       <div class="modal-content">