yee.. upload progress works

code/static/css/styles.css

@@ -113,3 +113,14 @@ tr:nth-child(even) {
   margin-left: 2em;
   font-size: medium;
 }
+
+#progress {
+	margin: 4px 4px 4px 4px;
+}
+#progress.success {
+	color: green;
+}
+
+#progress.failure {
+	color: red;
+}

code/static/js/scripts.js

@@ -10,3 +10,53 @@ function index_form_enter(event) {
 function index_form_submit() {
 	window.location = window.location + "/list/" + document.getElementById("index_form_name").value;
 }
+
+function UploadFile(file) {
+
+	var xhr = new XMLHttpRequest();
+	if (xhr.upload) {
+
+		var o = document.getElementById("progress");
+		xhr.upload.addEventListener("progress", function(e) {
+			var pc = parseInt((e.loaded / e.total * 100));
+			o.innerHTML = "Uploading: " + pc + "%";
+		}, false);
+
+        // file received/failed
+		xhr.onreadystatechange = function(e) {
+			if (xhr.readyState == 4) {
+				progress.className = (xhr.status == 200 ? "success" : "failure");
+                if (xhr.status == 200) {
+                    location = location;
+                } else {
+                    o.innerHTML = xhr.response;
+                }
+			}
+		};
+
+        // start upload
+		xhr.open("POST", document.getElementById("upload_form").action, true);
+		xhr.setRequestHeader("X-FILENAME", file.name);
+        var formData = new FormData();
+        formData.append('name', document.getElementById("list_upload_name").value);
+        formData.append('file', file);
+        xhr.send(formData);
+
+	}
+}
+
+// file selection
+function FileSelectHandler(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++) {
+		UploadFile(f);
+	}
+
+}
+
+
+