From c18b69534c13ac594a5fb730989178c3b095f93c Mon Sep 17 00:00:00 2001
From: Ville Rantanen <ville.rantanen@reaktor.com>
Date: Thu, 8 Feb 2018 21:05:55 +0200
Subject: [PATCH] yee.. upload progress works

---
 code/app.py                | 11 +++------
 code/static/css/styles.css | 11 +++++++++
 code/static/js/scripts.js  | 50 ++++++++++++++++++++++++++++++++++++++
 code/templates/list.html   | 10 +++++---
 4 files changed, 71 insertions(+), 11 deletions(-)

diff --git a/code/app.py b/code/app.py
index 12a1eb6..f689925 100644
--- a/code/app.py
+++ b/code/app.py
@@ -87,13 +87,10 @@ def upload(name = None, password = None):
                     return "Overwrite forbidden", 403
             file.save(filename)
             set_rights(filename)
-            response = current_app.response_class(
-                response="File uploaded",
-                status=307,
-                mimetype="text/plain"
-            )
-            response.headers["Location"] = url_for('list_view',name=name)
-            return response
+            if 'from_gui' in request.form:
+                if request.form['from_gui'] == "true":
+                    return redirect(url_for('list_view',name=name))
+            return "File uploaded\n", 200
         else:
             return "Use the 'file' variable to upload",400
 
diff --git a/code/static/css/styles.css b/code/static/css/styles.css
index 20a87fc..443bbc6 100755
--- a/code/static/css/styles.css
+++ b/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;
+}
diff --git a/code/static/js/scripts.js b/code/static/js/scripts.js
index c7ed9f5..d6abb56 100644
--- a/code/static/js/scripts.js
+++ b/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);
+	}
+
+}
+
+
+
diff --git a/code/templates/list.html b/code/templates/list.html
index 3045601..f51ffc4 100644
--- a/code/templates/list.html
+++ b/code/templates/list.html
@@ -3,10 +3,12 @@
   <div id=list_menu>
   {% if upload %}
    <div id=list_upload>
-        <form action={{ url_for('upload') }} method=post enctype=multipart/form-data>
-            <input type=hidden name=name value="{{ name|safe }}" />
-            <input id="list_upload_select" type=file name=file onchange="document.getElementById('list_upload_button').disabled = false;"><br>
-            <input id="list_upload_button" type=submit value=Upload disabled>
+        <form id="upload_form" action={{ url_for('upload') }} method=post enctype=multipart/form-data>
+            <input id="list_upload_name" type=hidden name=name value="{{ name|safe }}" />
+            <input type=hidden name=from_gui value="true" />
+            <input id="list_upload_select" type=file name=file onchange="FileSelectHandler(event)"><br>
+            <!--input id="list_upload_button" type=submit value=Upload disabled-->
+            <div id="progress"></div>
         </form>
    </div>
   {% else %}