From c1876fe0eef5b74439cfac1beab6cc52ff241915 Mon Sep 17 00:00:00 2001
From: Sanj <b@pad.ma>
Date: Thu, 11 Oct 2012 04:38:55 +0530
Subject: [PATCH] beginnings of upload js

---
 itf/static/js/upload/chunkupload.js | 201 ++++++++++++++++++++++++++++
 itf/static/js/upload/edgeUpload.js  | 163 ++++++++++++++++++++++
 itf/static/js/upload/itfUpload.js   | 129 ++++++++++++++++++
 3 files changed, 493 insertions(+)
 create mode 100644 itf/static/js/upload/chunkupload.js
 create mode 100644 itf/static/js/upload/edgeUpload.js
 create mode 100644 itf/static/js/upload/itfUpload.js

diff --git a/itf/static/js/upload/chunkupload.js b/itf/static/js/upload/chunkupload.js
new file mode 100644
index 0000000..a2ffc42
--- /dev/null
+++ b/itf/static/js/upload/chunkupload.js
@@ -0,0 +1,201 @@
+// vi:si:et:sw=4:sts=4:ts=4
+// GPL2+/MIT 2012
+'use strict';
+/*
+ Usage:
+  ChunkUploader({
+      file: file,
+      url: '/add',
+      data: {'name': file.name},
+      progress: function(data) {
+        console.log(data.progress);
+      },
+      callback: function(result) {
+          if(result.progress == 1) {
+              var response = JSON.parse(result.responseText);
+              if(response.resultUrl) {
+                document.location.href = response.resultUrl;
+              } else {
+                alert(response.status;
+              }
+          } else {
+              alert('!!!');
+          }
+      }
+  });
+*/
+function ChunkUploader(options) {
+    var chunkSize = options.size || 1024*1024,
+        chunkUrl,
+        file = options.file,
+        maxRetry = -1,
+        retries = 0,
+        request,
+        that = {};
+
+    initUpload();
+
+    function done() {
+        options.callback({
+          status: that.status,
+          progress: that.progress,
+          responseText: that.responseText
+        });
+    }
+
+    function initUpload() {
+        //request upload slot from server
+        that.status = 'requesting chunk upload';
+        that.progress = 0;
+        request = new XMLHttpRequest();
+        request.addEventListener('load', function (evt) {
+            var response = {};
+            that.responseText = evt.target.responseText;
+            try {
+                response = JSON.parse(evt.target.responseText);
+            } catch(e) {
+                response = {};
+                that.status = 'failed to parse response';
+                that.progress = -1;
+                done();
+            }
+            if (response.maxRetry) {
+                maxRetry = response.maxRetry;
+            }
+            chunkUrl = response.uploadUrl;
+            if (document.location.protocol == 'https:') {
+                chunkUrl = chunkUrl.replace(/http:\/\//, 'https://');
+            }
+            if (chunkUrl) {
+                that.status = 'uploading';
+                that.progress = 0.0;
+                //start upload
+                uploadChunk(0);
+            } else {
+                that.status = 'upload failed, no upload url provided';
+                that.progress = -1;
+                done();
+            }
+        }, false);
+        request.addEventListener('error', function (evt) {
+            that.status = 'uplaod failed';
+            that.progress = -1;
+            that.responseText = evt.target.responseText;
+            done();
+        }, false);
+        request.addEventListener('abort', function (evt) {
+            that.status = 'aborted';
+            that.progress = -1;
+            done();
+        }, false);
+        var formData = new FormData();
+        
+        Object.keys(options.data).forEach(function(key) {
+            formData.append(key, options.data[key]);
+        });
+        request.open('POST', options.url);
+        request.send(formData);
+    }
+
+    function progress(p) {
+        that.progress = p;
+        options.progress({
+            progress: that.progress,
+            status: that.status
+        });
+    }
+
+    function uploadChunk(chunkId) {
+        var bytesAvailable = file.size,
+            chunk,
+            chunkOffset = chunkId * chunkSize;
+
+        if(file.mozSlice) {
+            chunk = file.mozSlice(chunkOffset, chunkOffset+chunkSize, file.type);
+        } else if(file.webkitSlice) {
+            chunk = file.webkitSlice(chunkOffset, chunkOffset+chunkSize, file.type);
+        } else if(file.slice) {
+            chunk = file.slice(chunkOffset, chunkOffset+chunkSize, file.type);
+        } else {
+            that.status = 'Sorry, your browser is currently not supported.';
+            done()
+        }
+
+        progress(parseFloat(chunkOffset)/bytesAvailable);
+
+        request = new XMLHttpRequest();
+        request.addEventListener('load', function (evt) {
+            var response;
+            that.responseText = evt.target.responseText;
+            try {
+                response = JSON.parse(evt.target.responseText);
+            } catch(e) {
+                response = {};
+            }
+            if (response.done == 1) {
+                //upload finished
+                that.resultUrl = response.resultUrl;
+                that.progress = 1;
+                that.status = 'done';
+                done();
+            } else if (response.result == 1) {
+                //reset retry counter
+                retries = 0;
+                //start uploading next chunk
+                uploadChunk(chunkId + 1);
+            } else {
+                //failed to upload, try again in 5 second
+                retries++;
+                if (maxRetry > 0 && retries > maxRetry) {
+                    that.status = 'uplaod failed';
+                    that.progress = -1;
+                    done();
+                } else {
+                    setTimeout(function() {
+                        uploadChunk(chunkId);
+                    }, 5000);
+                }
+            }
+        }, false);
+        request.addEventListener('error', function (evt) {
+            //failed to upload, try again in 3 second
+            retries++;
+            if (maxRetry > 0 && retries > maxRetry) {
+                that.status = 'uplaod failed';
+                that.progress = -1;
+                done();
+            } else {
+                setTimeout(function() {
+                    uploadChunk(chunkId);
+                }, 3000);
+            }
+        }, false);
+        request.upload.addEventListener('progress', function (evt) {
+            if (evt.lengthComputable) {
+                progress(parseFloat(chunkOffset + evt.loaded) / bytesAvailable);
+            }
+        }, false);
+        request.addEventListener('abort', function (evt) {
+            that.status = 'aborted';
+            that.progress = -1;
+            done();
+        }, false);
+
+        var formData = new FormData();
+        formData.append('chunkId', chunkId);
+        if (bytesAvailable <= chunkOffset + chunkSize) {
+            formData.append('done', 1);
+        }
+        formData.append('chunk', chunk);
+        request.open('POST', chunkUrl, true);
+        request.send(formData);
+    }
+
+    that.abort = function() {
+        if (request) {
+            request.abort();
+            request = null;
+        }
+    };
+    return that;
+}
diff --git a/itf/static/js/upload/edgeUpload.js b/itf/static/js/upload/edgeUpload.js
new file mode 100644
index 0000000..f082c17
--- /dev/null
+++ b/itf/static/js/upload/edgeUpload.js
@@ -0,0 +1,163 @@
+// vi:si:et:sw=2:sts=2:ts=2
+
+
+
+
+function doProgress(progress) {
+  var status = progress.status;
+  var progress = progress.progress;
+    //do something with status and progress, i.e. set progressbar width:
+  $('#progress').css('width', parseInt(progress*100, 10) +'%');
+  $('#progressstatus').html(parseInt(progress*100, 10) + '% - ' + status);
+}
+
+
+
+
+
+var UploadQueue = function() {
+  var that = this;
+  this.allFiles = [];
+  this.isUploading = false;
+  this.$list = $('#filesList');
+  this.$progress = $('#progressbar');
+  this.len = function() {
+    return this.allFiles.length;
+  };
+  this.getLi = function(no) {
+    return this.$list.children('li').eq(no);
+  }
+  this.init();
+}
+
+UploadQueue.prototype.init = function() {
+//  $('#progressbar').show();
+  $('#progressbar').width(200).height(20);
+//  $('#progressbar').css('background-color', '#80ADB0');
+  $('#progressbar').html('<div id="progress" style="height:20px;width:0%"></div><div id="progressstatus" style="">uploading</div>');
+}
+
+/* param f = file */
+UploadQueue.prototype.getData = function(f) {
+  return {
+    'firefogg': 1,
+    'name': f.name,
+    'category': $('#files_category').val()
+  };
+};
+
+
+UploadQueue.prototype.uploadNext = function() {
+
+};
+
+
+UploadQueue.prototype.addFile = function(f) {
+  for (var i=0; i<this.len(); i++) {
+    if (this.allFiles[i].name == f.name) {
+      return false;
+    }
+  }
+  this.allFiles.push(f);
+  this.addFileToList(f);
+//  this.$list.triggerEvent("fileAdded");
+  if (!this.isUploading) {
+    this.upload(this.len() - 1);
+  }
+  return this;
+};
+
+UploadQueue.prototype.addFileToList = function(f) {
+  var that = this;
+  var $li = $('<li />').data("file", f).text(f.name).appendTo(that.$list);
+};
+
+UploadQueue.prototype.markDone = function(no, data) {
+  $('.uploading').removeClass("uploading");
+  var $li = this.getLi(no);
+  $li.addClass("uploaded");
+  fileUploadedCallback($li, data);
+  if (this.len() > (no + 1)) {
+    this.upload(no + 1);
+  } else {
+    this.isUploading = false;
+    $('#progressbar').hide();
+  }
+};
+
+UploadQueue.prototype.upload = function(no) {
+  var that = this;
+  var fil = this.allFiles[no];
+//  console.log("uploading", fil);
+  var data = this.getData(fil);
+  var $li = this.getLi(no);
+  this.isUploading = true;
+  $('#progressbar').show();
+  $li.addClass("uploading");
+  var ogg = ChunkUploader({
+    'file': fil,
+    'url': add_url,
+    'data': data,
+    'callback': function(response) {
+      var data = JSON.parse(response.responseText);
+      //console.log("data", data);
+      if (data.resultUrl) {
+        that.markDone(no, response);              
+      } else {
+        $('#progressbar').html(response.status);
+      }
+    },
+    'progress': doProgress
+  });
+  /*
+  ogg = FirefoggUploader(fil, add_url, data, function(ogg) {
+    if (ogg.resultUrl) {
+      that.markDone(no, ogg);              
+    } else {
+      $('#progressbar').html(ogg.status);
+    }
+  }, doProgress);
+  */  
+};
+
+function fileUploadedCallback(jq, data) {
+//  alert("hi");
+//  console.log(data);
+
+  var d = JSON.parse(data.responseText);
+//  console.log("dd", d)
+  var fileId = d.fileId;
+  jq.data("fileId", fileId);
+  if (d.hasOwnProperty("errors")) {
+    var $error = $('<div />').addClass("fileError").text(data.errors[0]).appendTo(jq);
+  } else {
+    var $formContainer = $('<div />').addClass("fileForm");
+//    var $title = $('<div />').addClass("formHelp").text("Add Description").appendTo($formContainer);
+//    console.log(data);
+    var $titleInput = $('<input />').attr("type", "text").addClass("fileTitle").val(d.title);
+//    console.log($titleInput);
+    $titleInput.appendTo($formContainer);
+    var $descInput = $('<textarea />').attr("placeholder", "Add Description").addClass("fileDesc").appendTo($formContainer);
+    if (d.type == 'image') {
+      var $thumbnail = $('<img />').addClass("thumbnail").attr("src", d.thumbnail).appendTo($formContainer);
+    }
+    var $submitBtn = $('<button />').text("Submit").click(function() {
+      var $this = $(this);
+      $this.attr("disabled", "disabled");
+      var $parent = $(this).parents('.uploaded');
+      var fileId = $parent.data("fileId");
+      var title = $parent.find(".fileTitle").val();
+      var description = $parent.find(".fileDesc").val();
+      $.post("/files/editFile/", {
+        'id': fileId,
+        'title': title,
+        'description': description
+      }, function(response) {
+        $this.removeAttr("disabled");
+        $this.after("<span class='saved'>Saved</span>");
+      },
+      "json");
+    }).appendTo($formContainer);
+    $formContainer.appendTo(jq);
+  }  
+}
diff --git a/itf/static/js/upload/itfUpload.js b/itf/static/js/upload/itfUpload.js
new file mode 100644
index 0000000..806d1c7
--- /dev/null
+++ b/itf/static/js/upload/itfUpload.js
@@ -0,0 +1,129 @@
+(function($) {
+
+var ItfFileUpload = function(file, Q) {
+    this.file = file;
+    this.Q = Q;
+
+    this.$li = this.getLi().appendTo(Q.$ul);    
+};
+
+ItfFileUpload.prototype.upload = function() {
+    var that = this;
+    var Q = that.Q;
+    var fil = this.file;
+//  console.log("uploading", fil);
+    var data = Q.getData(fil);
+//  var $li = this.getLi(no);
+    Q.isUploading = true;
+    var url = Q.options.addURL;
+    this.showProgress();
+//  $('#progressbar').show();
+//    $li.addClass("uploading");
+    this.chunkUploader = ChunkUploader({
+        'file': fil,
+        'url': url,
+        'data': data,
+        'callback': function(response) {
+            var data = JSON.parse(response.responseText);
+      //console.log("data", data);
+            if (data.resultUrl) {
+                that.markDone(data);              
+            } else {
+                that.$progressStatus.html(response.status);
+            }
+    },
+    'progress': that.doProgress
+  });
+};
+
+
+ItfFileUpload.prototype.showProgress = function() {
+    this.$elem.find(".fileProgress").show();
+};
+
+ItfFileUpload.prototype.doProgress = function() {
+    
+};
+
+ItfFileUpload.prototype.getLi = function() {
+    var that = this;
+    var $li = $('<li />').addClass("uploadFileItem");
+    var $title = $('<div />').addClass("uploadFileTitle").text(that.file.name).appendTo($li);
+    var $progress = $('<div />').addClass("fileProgress").hide().appendTo($li);
+    var $progressBar = $('<div />').addClass("progressBar").appendTo($progress);
+    var $progressStatus = $('<div />').addClass("progressStatus").appendTo($progress);
+    return $li; 
+};
+
+var ItfUploadQueue = function(options, $elem) {
+    var that = this;
+    this.files = [];    
+    this.isUploading = false;
+    this.len = function() {
+        return this.files.length;
+    }
+    this.$elem = $elem;
+    this.$ul = $("<ul />").addClass("uploadFileList").appendTo($elem);
+};
+
+ItfUploadQueue.prototype.addFile = function(f) {
+    var that = this;
+    var fileUpload = new ItfFileUpload(f, that);
+    this.files.push(fileUpload);
+//    this.addToList(f);
+    if (!this.isUploading) {
+        fileUpload.upload();
+    }
+};
+
+ItfUploadQueue.prototype.getData = function(f) {
+    var that = this;
+    return {
+        'name' f.name,
+        'id': that.options.id
+    }
+};
+
+
+
+$.fn.uploadQueue = function(options) {
+    var that = this;
+    var dataOptions = {
+    //add data- options    
+    }        
+    var o = $.extend({
+        'id': '0',
+        'addURL': '/add'
+    }, options, dataOptions);    
+
+    var Q = new ItfUploadQueue(o, that);
+
+    var $fileInput = $(this).find('input[type=file]'); //If there are any <input type=file> elements with the file drop container, bind to their change event.
+    if ($fileInput.length > 0) {
+        $fileInput.change(function() {
+            var t = this;
+            for (var i=0; i<t.files.length;i++) {
+                var f = t.files[i];
+                Q.addFile(f);      
+            }
+        });        
+    }
+
+
+
+    var f = this.get(0); //get DOM object, not jquery element, enable drag / droppability of files from desktop
+    f.addEventListener("dragenter", function(e) { e.stopPropagation(); e.preventDefault(); return false; }, false);
+    f.addEventListener("dragover", function(e) { e.stopPropagation(); e.preventDefault(); return false; }, false);
+    f.addEventListener("drop", function(e) {
+        e.preventDefault();
+        e.stopPropagation();  
+        var files = e.dataTransfer.files;
+        for (var i=0; i<files.length; i++) {
+            var fil = files[i];
+            Q.addFile(fil);
+        }
+    }, false);
+};
+
+
+})(jQuery);