examples/rails_app-2.3.4/public/javascripts/ajax_pull/upload_progress.js

   1 // http://rubyforge.org/pipermail/mongrel-users/2007-July/003747.html
   2 function appendDebug(text) {
   3   li = document.createElement('li');
   4   li.innerHTML = text;
   5   $('debug').appendChild(li);
   6 }
   7
   8 var UploadProgress = {
   9   uploading: null,
  10
  11   begin: function(upload_id) {
  12     //$('upload-console').src = '/files/upload_progress?upload_id=' + upid;
  13
  14     new Ajax.Pull('/progress?long&upload_id=' + upload_id, {
  15       // TODO:
  16       // poll_url is not yet implemented in Ajax.Pull. this is needed for
  17       // older versions of safari due to a bug.
  18       //
  19       //poll_url: '/files/upload_progress?single&upload_id=' + upload_id,
  20       //pullDebugger: appendDebug,
  21       handler: this.update.bind(this)
  22     });
  23
  24     this.uploading = true;
  25     this.StatusBar.create();
  26   },
  27
  28   update: function(json) {
  29
  30     if(json["state"] == 'starting') {
  31       $('results').update('staring upload...');
  32
  33     } else if(json["state"] == 'done') {
  34       this.uploading = false;
  35       this.StatusBar.finish();
  36       $('results').update('finished!');
  37
  38     } else if(json["state"] == 'error') {
  39       this.error(json['message']);
  40
  41     } else if(json["state"] == 'uploading') {
  42       var status = json["received"] / json["size"];
  43       var statusHTML = status.toPercentage();
  44       $('results').update(
  45         statusHTML + "<br /><small>" + json["received"].toHumanSize() +
  46         ' of ' + json["size"].toHumanSize() + " uploaded.</small>"
  47       );
  48       this.StatusBar.update(status, statusHTML);
  49
  50     } else {
  51       this.error('Unknown upload progress state received: ' + json['state']);
  52     }
  53   },
  54
  55   error: function(msg) {
  56     if(!this.uploading) return;
  57     this.uploading = false;
  58     if(this.StatusBar.statusText) this.StatusBar.statusText.innerHTML = msg || 'Error Uploading File';
  59   },
  60
  61   StatusBar: {
  62     statusBar: null,
  63     statusText: null,
  64     statusBarWidth: 500,
  65
  66     create: function() {
  67       this.statusBar  = this._createStatus('status-bar');
  68       this.statusText = this._createStatus('status-text');
  69       this.statusText.innerHTML  = '0%';
  70       this.statusBar.style.width = '0';
  71     },
  72
  73     update: function(status, statusHTML) {
  74       this.statusText.innerHTML = statusHTML;
  75       this.statusBar.style.width = Math.floor(this.statusBarWidth * status);
  76     },
  77
  78     finish: function() {
  79       this.statusText.innerHTML  = '100%';
  80       this.statusBar.style.width = '100%';
  81     },
  82
  83     _createStatus: function(id) {
  84       el = $(id);
  85       if(!el) {
  86         el = document.createElement('span');
  87         el.setAttribute('id', id);
  88         $('progress-bar').appendChild(el);
  89       }
  90       return el;
  91     }
  92   },
  93
  94   FileField: {
  95     add: function() {
  96       new Insertion.Bottom('file-fields', '<p style="display:none"><input id="data" name="data" type="file" /> <a href="#" onclick="UploadProgress.FileField.remove(this);return false;">x</a></p>')
  97       $$('#file-fields p').last().visualEffect('blind_down', {duration:0.3});
  98     },
  99
 100     remove: function(anchor) {
 101       anchor.parentNode.visualEffect('drop_out', {duration:0.25});
 102     }
 103   }
 104 }
 105
 106 Number.prototype.bytes     = function() { return this; };
 107 Number.prototype.kilobytes = function() { return this *  1024; };
 108 Number.prototype.megabytes = function() { return this * (1024).kilobytes(); };
 109 Number.prototype.gigabytes = function() { return this * (1024).megabytes(); };
 110 Number.prototype.terabytes = function() { return this * (1024).gigabytes(); };
 111 Number.prototype.petabytes = function() { return this * (1024).terabytes(); };
 112 Number.prototype.exabytes =  function() { return this * (1024).petabytes(); };
 113 ['byte', 'kilobyte', 'megabyte', 'gigabyte', 'terabyte', 'petabyte', 'exabyte'].each(function(meth) {
 114   Number.prototype[meth] = Number.prototype[meth+'s'];
 115 });
 116
 117 Number.prototype.toPrecision = function() {
 118   var precision = arguments[0] || 2;
 119   var s         = Math.round(this * Math.pow(10, precision)).toString();
 120   var pos       = s.length - precision;
 121   var last      = s.substr(pos, precision);
 122   return s.substr(0, pos) + (last.match("^0{" + precision + "}$") ? '' : '.' + last);
 123 }
 124
 125 // (1/10).toPercentage()
 126 // # => '10%'
 127 Number.prototype.toPercentage = function() {
 128   return (this * 100).toPrecision() + '%';
 129 }
 130
 131 Number.prototype.toHumanSize = function() {
 132   if(this < (1).kilobyte())  return this + " Bytes";
 133   if(this < (1).megabyte())  return (this / (1).kilobyte()).toPrecision()  + ' KB';
 134   if(this < (1).gigabytes()) return (this / (1).megabyte()).toPrecision()  + ' MB';
 135   if(this < (1).terabytes()) return (this / (1).gigabytes()).toPrecision() + ' GB';
 136   if(this < (1).petabytes()) return (this / (1).terabytes()).toPrecision() + ' TB';
 137   if(this < (1).exabytes())  return (this / (1).petabytes()).toPrecision() + ' PB';
 138                              return (this / (1).exabytes()).toPrecision()  + ' EB';
 139 }