adding new files for using the PDF parser in a browser

mistyn8 · Sep 29, 2014 · 5a12041 · 5a12041
1 parent dd1b71e
commit 5a12041
Show file tree

Hide file tree

Showing 2 changed files with 163 additions and 0 deletions.
diff --git a/browser-parser.js b/browser-parser.js
@@ -0,0 +1,94 @@
+(function() {
+
+  'use strict';
+
+	// getElementById
+	function $id(id) {
+		return document.getElementById(id);
+	}
+
+	// output information
+  function Output(msg) {
+		var m = $id("messages");
+		m.innerHTML = msg + m.innerHTML;
+	}
+
+	// file drag hover
+	function FileDragHover(e) {
+		e.stopPropagation();
+		e.preventDefault();
+		e.target.className = (e.type == "dragover" ? "hover" : "");
+	}
+
+	// file selection
+	function FileSelectHandler(e) {
+
+		// cancel event and hover styling
+		FileDragHover(e);
+
+		// fetch FileList object
+		var files = e.target.files || e.dataTransfer.files;
+
+		// process all File objects
+		for (var i = 0, f; f = files[i]; i++) {
+			ParseFile(f);
+		}
+
+	}
+
+	// output file information
+	function ParseFile(file) {
+
+		Output(
+			"<p>File information: <strong>" + file.name +
+			"</strong> type: <strong>" + file.type +
+			"</strong> size: <strong>" + file.size +
+			"</strong> bytes</p>"
+		);
+    console.log(file);
+		// display a PDF
+		if (file.type==='application/pdf') {
+            var reader = new FileReader();
+            reader.onload = function (e) {
+              var buffer = e.target.result;
+              var data = new Uint8Array(buffer);
+
+              parsePDFStatement(data, file.name, function(err, transactions) {
+                  console.log('done - counted transactions, ',transactions.length);
+                  transactions.forEach(function(transaction) {
+                    Output(transaction.date+'\t'+transaction.description+'\t'+transaction.amount+'<br>');
+                  });
+              });
+            };
+            reader.readAsArrayBuffer(file);
+		}
+
+	}
+
+
+	// initialize
+	function Init() {
+
+		var filedrag = $id("filedrag");
+
+		// is XHR2 available?
+		var xhr = new XMLHttpRequest();
+		if (xhr.upload) {
+
+			// file drop
+			filedrag.addEventListener("dragover", FileDragHover, false);
+			filedrag.addEventListener("dragleave", FileDragHover, false);
+			filedrag.addEventListener("drop", FileSelectHandler, false);
+			filedrag.style.display = "block";
+
+		}
+
+	}
+
+	// call initialization file
+	if (window.File && window.FileList && window.FileReader) {
+		Init();
+	}
+
+
+})();
diff --git a/index.html b/index.html
@@ -0,0 +1,69 @@
+<!doctype html>
+<html>
+  <head>
+    <style type="text/css">
+      /* Original HTML credit:
+      HTML5 File Drag & Drop demonstration
+      Featured on SitePoint.com, Craig Buckler (@craigbuckler) of OptimalWorks.net
+      */
+      body {
+      	font-family: "Segoe UI", Tahoma, Helvetica, freesans, sans-serif;
+      	font-size: 90%;
+      	margin: 10px;
+      	color: #333;
+      	background-color: #fff;
+      }
+      h1, h2 {
+      	font-size: 1.5em;
+      	font-weight: normal;
+      }
+      h2 {
+      	font-size: 1.3em;
+      }
+      legend {
+      	font-weight: bold;
+      	color: #333;
+      }
+      #filedrag {
+      	display: none;
+      	font-weight: bold;
+      	text-align: center;
+      	padding: 1em 0;
+      	margin: 1em 0;
+      	color: #555;
+      	border: 2px dashed #555;
+      	border-radius: 7px;
+      	cursor: default;
+      }
+      #filedrag.hover {
+      	color: #f00;
+      	border-color: #f00;
+      	border-style: solid;
+      	box-shadow: inset 0 3px 4px #888;
+      }
+      #messages {
+      	padding: 0 10px;
+      	margin: 1em 0;
+      	border: 1px solid #999;
+      }
+    </style>
+    <script src="./pdf.combined.js"></script>
+    <script src="./statement-parser-lib.js"></script>
+  </head>
+  <body>
+    <form id="upload" action="" method="POST" enctype="multipart/form-data">
+      <fieldset>
+        <legend>Barclays Bank statement PDF to CSV</legend>
+        <div>
+        	<div id="filedrag">drop PDF file here - important: no information will leave your browser</div>
+        </div>
+      </fieldset>
+    </form>
+    <div id="messages">
+      <p>Status Messages</p>
+    </div>
+    <h2>Cover sheet of your bank statement will appear here</h2>
+    <canvas id="the-canvas" style="border:1px solid black;"/>
+    <script src="browser-parser.js"></script>
+  </body>
+</html>