3 files changed, 96 insertions, 0 deletions
diff --git a/themes/okadmin/public/css/main.css b/themes/okadmin/public/css/main.css
index df0ca43..2f2d376 100644
--- a/themes/okadmin/public/css/main.css
+++ b/themes/okadmin/public/css/main.css
@@ -216,6 +216,7 @@ button, input[type=submit] {
   font-family: "Helvetica", sans-serif;
 }
 .main.resource form .group {
+  position: relative;
   display: block;
   float: left;
   width: 31em;
@@ -361,6 +362,32 @@ button, input[type=submit] {
 	color: red;
 }
 
+.progress {
+  position: absolute;
+  top: 0; right: -100px;
+  padding: 10px 10px 0 10px;
+  margin: 0px;
+  width: 100px;
+  pointer-events: none;
+  background: #eee;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+.progress .xhr {
+  height: 10px;
+  background: black;
+  margin-bottom: 10px;
+  transition: all 0.2s;
+}
+.progress .xhr div {
+  background: white;
+  transition: all 0.2s;
+  height: 100%;
+}
+.progress.loading {
+  opacity: 1;
+}
+
 /* 
 .remove {
   display: none;
diff --git a/themes/okadmin/public/js/upload.js b/themes/okadmin/public/js/upload.js
index 8d73dd5..cfc1199 100644
--- a/themes/okadmin/public/js/upload.js
+++ b/themes/okadmin/public/js/upload.js
@@ -4,6 +4,12 @@ var OKUpload = function(){
 }
 OKUpload.prototype.bind = function(rapper){
   var uploader = this
+  this.rapper = rapper
+  this.$progress = $("<div class='progress'>")
+  this.xhrCount = 0
+  this.loadCount = 0
+  
+  $(this.rapper).append(this.$progress)
   $(".add-image-button input", rapper).change( uploader.handleFileSelect.bind(uploader) )
   $(".add-url", rapper).on("keydown blur", pressEnter( function(e){
     var url = $(this).val()
@@ -34,9 +40,62 @@ OKUpload.prototype.handleFileSelect = function(e) {
   }
 }
 OKUpload.prototype.upload = function(f){
+  this.xhrCount += 1
+
+  this.$progress.addClass("loading")
+
+  var $loader = $("<div class='xhr'>")
+  var $loading_bar = $("<div>")
+  $loading_bar.css("width", "0%")
+  $loader.append( $loading_bar )
+  this.$progress.append($loader)
+  
   var fd = new FormData()
   fd.append('image', f)
 
+  var request = new XMLHttpRequest()
+  request.open("POST", this.action, true)
+ 
+  request.addEventListener("progress", updateProgress.bind(this));
+  request.addEventListener("load", transferComplete.bind(this));
+  request.addEventListener("error", transferError.bind(this));
+  request.addEventListener("abort", transferAbort.bind(this));
+
+  function updateProgress (e) {
+    if (e.lengthComputable) {
+      var percentComplete = Math.round( 100 * e.loaded / e.total )
+      $loading_bar.css("width", percentComplete + "%")
+    }
+  }
+  function transferComplete (data) {
+    this.loadCount += 1
+    this.hideUploadBars()
+    if (request.readyState == 4 && request.status == 200) {
+      var responseData
+      try {
+        responseData = JSON.parse( request.responseText )
+        this.success( responseData )
+      }
+      catch (e) {
+        console.log("ERROR PARSING JSON")
+      }
+    }
+    console.log(arguments, request)
+  }
+  function transferError (data) {
+    this.loadCount += 1
+    this.hideUploadBars()
+    console.log(arguments)
+  }
+  function transferAbort (data) {
+    this.loadCount += 1
+    this.hideUploadBars()
+    console.log(arguments)
+  }
+
+  request.send(fd)
+  
+/*
   var request = $.ajax({
     url: this.action,
     type: "post",
@@ -46,6 +105,15 @@ OKUpload.prototype.upload = function(f){
     contentType: false,
   })
   request.done(this.success.bind(this))
+*/
+}
+OKUpload.prototype.hideUploadBars = function () {
+  if (this.xhrCount == this.loadCount) {
+    this.$progress.removeClass("loading")
+    setTimeout(function(){
+      this.$progress.empty()
+    }.bind(this), 300)
+  }
 }
 OKUpload.prototype.success = function(data){
   if (data.error) {
diff --git a/themes/okadmin/templates/partials/tail.liquid b/themes/okadmin/templates/partials/tail.liquid
index b3c575d..53823b0 100644
--- a/themes/okadmin/templates/partials/tail.liquid
+++ b/themes/okadmin/templates/partials/tail.liquid
@@ -1,4 +1,5 @@
     </div> {% comment %} closes container tag {% endcomment %}
+    <div id="progress"></div>
   </body>
   <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.6.0/lodash.min.js"></script>