add progress barsv0.1.23

1 files changed, 68 insertions, 0 deletions

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) {