adding csv uploader with webworkers

attachments/pages/index.html

@@ -58,9 +58,9 @@
   </script>
 
   <script type='text/mustache' class="importActionsTemplate">
-    <li><a data-action="urlImport" class="menuAction" href="JavaScript:void(0);">From an API</a></li>
-    <li><a data-action="pasteImport" class="menuAction" href="JavaScript:void(0);">Copy & Paste</a></li>
-    <li><a data-action="uploadImport" class="menuAction" href="JavaScript:void(0);">Upload File</a></li>
+    <li><a data-action="urlImport" class="menuAction" href="JavaScript:void(0);">JSON API</a></li>
+    <li><a data-action="pasteImport" class="menuAction" href="JavaScript:void(0);">Copy & Paste JSON</a></li>
+    <li><a data-action="uploadImport" class="menuAction" href="JavaScript:void(0);">Upload CSV</a></li>
   </script>
     
   <script type='text/mustache' class="exportActionsTemplate">
@@ -305,11 +305,13 @@
   
   <script type='text/mustache' class="uploadImportTemplate">
     <div class="dialog-header">
-  		Upload and import a file
+  		Upload and import a CSV
   	</div>
   	<div class="dialog-body">
   		<div class="grid-layout layout-tight layout-full">
-        IN THE FUTURE I predict the presence of a file upload form here...
+        <strong>Please choose a CSV file to upload:</strong><br />
+        <input type="file" id="file" />
+        <input type="button" value="Load file" onclick="costco.uploadCSV()" />
   		</div>
   	</div>
   	<div class="dialog-footer">

attachments/script/costco-csv-worker.js

@@ -0,0 +1,25 @@
+importScripts('lib/underscore.js'); 
+
+onmessage = function(message) {
+  var rows = message.data.data.split('\n');
+  var docs = [];
+  _.each(rows, function(row) {
+    if (row.length == 0) return;
+    var doc = {};
+    _.each(row.split(','), function(field, index) { doc['field' + index] = field });
+    docs.push(doc);
+  })
+  var req = new XMLHttpRequest();
+  req.onreadystatechange = function() { 
+    if (req.readyState == 4) postMessage(JSON.stringify({done: true}))
+  };
+  req.onprogress = function(e) {
+    if (e.lengthComputable) {
+      var percentComplete = (e.loaded / e.total) * 100;
+      postMessage(JSON.stringify({percent: percentComplete}));
+    }
+  }
+  req.open('POST', message.data.url);
+  req.setRequestHeader('Content-Type', 'application/json');
+  req.send(JSON.stringify({docs: docs}));
+};

attachments/script/costco.js

@@ -103,6 +103,35 @@ var costco = function() {
     }
     return updateDocs(deleteFunc);
   }
+  
+  function uploadCSV() {
+    util.notify('Upload started.');
+    var file = $('#file')[0].files[0];
+    if (file) {
+      var reader = new FileReader();
+      reader.readAsText(file);
+      reader.onload = function(event) {
+        util.notify('File loaded.');
+        var payload = {
+          url: window.location.href + "/api/_bulk_docs", // todo more robust url composition
+          data: event.target.result
+        };
+        var worker = new Worker('script/costco-csv-worker.js');
+        worker.onmessage = function(message) {
+          if(JSON.parse(message.data).done) {
+            util.notify("Data uploaded successfully!");
+            recline.initializeTable(app.offset);
+            util.hide('dialog');
+          } else {
+            util.notify(message.data);
+          }
+        };
+        worker.postMessage(payload);
+      };
+    } else {
+      util.notify('File not selected. Please try again');
+    }
+  };
 
   return {
     evalFunction: evalFunction,
@@ -111,6 +140,7 @@ var costco = function() {
     updateDocs: updateDocs,
     uploadDocs: uploadDocs,
     deleteColumn: deleteColumn,
-    ensureCommit: ensureCommit
+    ensureCommit: ensureCommit,
+    uploadCSV: uploadCSV 
   };
 }();