Loading JSON files

generator/generate.html

                 <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                 <strong>Experimental user interface!</strong>
                 This user interface is experimental and largely non-functional.
-                The only thing that works right now is the "generate cards" button.
+                The only thing that works right now are the "load sample cards", "load cards from file" and "generate cards" buttons.
             </div>
             <div class="alert alert-warning alert-dismissible" role="alert">
                 <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                             <option value="tiny">tiny</option>
                         </select>
                     </div>
+                    <input type="file" id="file-load" name="files[]" multiple class="form-control" style="display:none" />
                     <button type="button" class="btn btn-primary btn-block" id="button-load">Load cards from file</button>
                     <button type="button" class="btn btn-primary btn-block" id="button-save">Save cards</button>
                     <button type="button" class="btn btn-primary btn-block" id="button-load-sample">Load sample cards</button>

generator/js/ui.js

-function on_generate() {
+function ui_generate() {
     // Generate output HTML
     var card_html = card_pages_generate_html(card_data);
 
     setTimeout(function () { tab.postMessage(card_html, '*') }, 100);
 }
 
-function on_load_sample() {
+function ui_load_sample() {
     card_data = card_data_example;
 }
 
+function ui_clear_all() {
+    card_data = [];
+}
+
+function ui_load_files(evt) {
+    ui_clear_all();
+
+    var files = evt.target.files;
+
+    for (var i = 0, f; f = files[i]; i++) {
+        var reader = new FileReader();
+
+        reader.onload = function (reader) {
+            var data = JSON.parse(this.result);
+            card_data = card_data.concat(data);
+        };
+
+        reader.readAsText(f);
+    }
+}
+
 $(document).ready(function () {
-    $("#button-generate").click(on_generate);
-    $("#button-load-sample").click(on_load_sample);
+    $("#button-generate").click(ui_generate);
+    $("#button-load").click(function () { $("#file-load").click(); });
+    $("#file-load").change(ui_load_files);
+    $("#button-load-sample").click(ui_load_sample);
 });