[Summary view] [Print] [Text view]

   1  /**
   2   * FancyUpload - Flash meets Ajax for beauty uploads
   3   *
   4   * Based on Swiff.Base and Swiff.Uploader.
   5   *
   6   * Its intended that you edit this class to add your
   7   * own queue layout/text/effects. This is NO include
   8   * and forget class. If you want custom effects or
   9   * more output, use Swiff.Uploader as interface
  10   * for your new class or change this class.
  11   *
  12   * USAGE:
  13   *  var inputElement = $E('input[type="file"]');
  14   *     new FancyUpload(inputElement, {
  15   *         swf: '../swf/Swiff.Uploader.swf'
  16   *         // more options
  17   *     })
  18   *
  19   *     The target element has to be in an form, the upload starts onsubmit
  20   *     by default.
  21   * 
  22   * OPTIONS:
  23   * 
  24   *     url: Upload target URL, default is form-action if given, otherwise current page
  25   *  swf: Path & filename of the swf file, default: Swiff.Uploader.swf
  26   *  multiple: Multiple files selection, default: true
  27   *  queued: Queued upload, default: true
  28   *  types: Object with (description: extension) pairs, default: Images (*.jpg; *.jpeg; *.gif; *.png)
  29   *  limitSize: Maximum size for one added file, bigger files are ignored, default: false
  30   *  limitFiles: Maximum files in the queue, default: false
  31   *  createReplacement: Function that creates the replacement for the input-file, default: false, so a button with "Browse Files" is created
  32   *  instantStart: Upload starts instantly after selecting a file, default: false
  33   *  allowDuplicates: Allow duplicate filenames in the queue, default: true
  34   *  container: Container element for the swf, default: document.body, used only for the first FancyUpload instance, see QUIRKS
  35   *  optionFxDuration: Fx duration for highlight, default: 250
  36   *  queueList: The Element or ID for the queue list
  37   *  onComplete: Event fired when one file is completed
  38   *  onAllComplete: Event fired when all files uploaded
  39   * 
  40   * NOTE:
  41   *
  42   *     Flash FileReference is stupid, the request will have no cookies
  43   *     or additional post data. Only the file is send in $_FILES['Filedata'],
  44   *     with a wrong content-type (application/octet-stream).
  45   *     When u have sessions, append them as get-data to the the url.
  46   *
  47   *
  48   * @version        1.0rc2
  49   *
  50   * @license        MIT License
  51   *
  52   * @author        Harald Kirschner <mail [at] digitarald [dot] de>
  53   * @copyright    Authors
  54   */
  55  var FancyUpload = new Class({
  56  
  57      options: {
  58          url: false,
  59          swf: 'Swiff.Uploader.swf',
  60          multiple: true,
  61          queued: true,
  62          types: {'Images (*.jpg, *.jpeg, *.gif, *.png)': '*.jpg; *.jpeg; *.gif; *.png'},
  63          limitSize: false,
  64          limitFiles: false,
  65          createReplacement: null,
  66          instantStart: false,
  67          allowDuplicates: false,
  68          optionFxDuration: 250,
  69          container: null,
  70          queueList: 'photoupload-queue',
  71          onComplete: Class.empty,
  72          onError: Class.empty,
  73          onCancel: Class.empty,
  74          onUpload: Class.empty,
  75          onAllComplete: Class.empty,
  76          txtBrowse: 'Browse Files',
  77          txtUploading: 'Uploading',
  78          onAddFile: Class.empty,
  79          onRemoveFile: Class.empty
  80      },
  81  
  82      initialize: function(el, options){
  83          this.element = $(el);
  84          this.setOptions(options);
  85          this.form = $(this.element.form || null);
  86          this.options.url = this.options.url || (this.form && this.form.action) || location.href;
  87          this.fileList = [];
  88  
  89          this.uploader = new Swiff.Uploader({
  90              onOpen: this.onOpen.bind(this),
  91              onProgress: this.onProgress.bind(this),
  92              onComplete: this.onComplete.bind(this),
  93              onError: this.onError.bind(this),
  94              onSelect: this.onSelect.bind(this)
  95          }, this.initializeFlash.bind(this), {
  96              swf: this.options.swf,
  97              types: this.options.types,
  98              multiple: this.options.multiple,
  99              queued: this.options.queued,
 100              container: this.options.container
 101          });
 102      },
 103  
 104      initializeFlash: function() {
 105          this.queue = $(this.options.queueList);
 106          if (this.form) this.form.addEvent('submit', this.upload.bindWithEvent(this));
 107          if (this.options.createReplacement) {
 108              this.options.createReplacement(this.element);
 109          } else {
 110              new Element('input', {
 111                  type: 'button',
 112                  value: this.options.txtBrowse,
 113                  events: {
 114                      click: this.browse.bind(this)
 115                  }
 116              }).injectBefore(this.element);
 117              this.element.remove();
 118          }
 119  
 120      },
 121  
 122      browse: function() {
 123          this.uploader.browse();
 124      },
 125  
 126      upload: function(e) {
 127          if (e) e.stop();
 128          this.fireEvent('onUpload', this);
 129          this.uploader.send(this.options.url);
 130      },
 131  
 132      onSelect: function(name, size) {
 133          if (this.uploadTimer) this.uploadTimer = $clear(this.uploadTimer);
 134          if ((this.options.limitSize && (size > this.options.limitSize))
 135              || (this.options.limitFiles && (this.fileList.length >= this.options.limitFiles))
 136              || (!this.options.allowDuplicates && this.findFile(name, size) != -1)) return false;
 137          this.addFile(name, size);
 138          if (this.options.instantStart) this.uploadTimer = this.upload.delay(250, this);
 139          this.fireEvent('onAddFile', [name, size]);
 140          return true;
 141      },
 142  
 143      onOpen: function(name, size) {
 144          var index = this.findFile(name, size);
 145          this.fileList[index].status = 1;
 146          if (this.fileList[index].fx) return;
 147          this.fileList[index].fx = new Element('div', {'class': 'queue-subloader'}).injectInside(
 148                  new Element('div', {'class': 'queue-loader'}).setHTML(this.options.txtUploading).injectInside(this.fileList[index].element)
 149              ).effect('width', {
 150                  duration: 200,
 151                  wait: false,
 152                  unit: '%',
 153                  transition: Fx.Transitions.linear
 154              }).set(0);
 155      },
 156  
 157      onProgress: function(name, bytes, total, percentage) {
 158          this.uploadStatus(name, total, percentage);
 159      },
 160  
 161      onComplete: function(name, size) {
 162          var index = this.uploadStatus(name, size, 100);
 163          this.fileList[index].fx.element.setHTML('Completed');
 164          this.fileList[index].status = 2;
 165          this.highlight(index, 'e1ff80');
 166          this.checkComplete(name, size, 'onComplete');
 167      },
 168  
 169      /**
 170       * Error codes are just examples, customize them according to your server-errorhandling
 171       *
 172       */
 173      onError: function(name, size, error) {
 174          var msg = "Upload failed (" + error + ")";
 175          switch(error.toInt()) {
 176              case 500: msg = "Internal server error, please contact Administrator!"; break;
 177              case 400: msg = "Upload failed, please check your filesize!"; break;
 178              case 409: msg = "Could not process image, please choose another!"; break;
 179              case 415: msg = "Unsupported media type, please upload GIF, PNG, TIFF or JPEG!"; break;
 180              case 412: msg = "Invalid target, please reload page and try again!"; break;
 181              case 417: msg = "Photo too small, please keep our photo manifest in mind!"; break;
 182          }
 183          var index = this.uploadStatus(name, size, 100);
 184          this.fileList[index].fx.element.setStyle('background-color', '#ffd780').setHTML(msg);
 185          this.fileList[index].status = 2;
 186          this.highlight(index, 'ffd780');
 187          this.checkComplete(name, size, 'onError');
 188      },
 189  
 190      checkComplete: function(name, size, fire) {
 191          this.fireEvent(fire, [name, size]);
 192          if (this.nextFile() == -1) this.fireEvent('onAllComplete');
 193      },
 194  
 195      addFile: function(name, size) {
 196          if (!this.options.multiple && this.fileList.length) this.remove(this.fileList[0].name, this.fileList[0].size);
 197          this.fileList.push({
 198              name: name,
 199              size: size,
 200              status: 0,
 201              percentage: 0,
 202              element: new Element('li').setHTML('<span class="queue-file">'+ name +'</span><span class="queue-size" title="'+ size +' byte">~'+ Math.ceil(size / 1000) +' kb</span>').injectInside(this.queue)
 203          });
 204          new Element('a', {
 205              href: 'javascript:void(0)',
 206              'class': 'input-delete',
 207              title: 'Remove from queue',
 208              events: {
 209                  click: this.cancelFile.bindWithEvent(this, [name, size])
 210              }
 211          }).injectBefore(this.fileList.getLast().element.getFirst());
 212          this.highlight(this.fileList.length - 1, 'e1ff80');
 213      },
 214  
 215      uploadStatus: function(name, size, percentage) {
 216          var index = this.findFile(name, size);
 217          this.fileList[index].fx.start(percentage).element.setHTML(percentage +'%');
 218          this.fileList[index].percentage = percentage;
 219          return index;
 220      },
 221  
 222      uploadOverview: function() {
 223          var l = this.fileList.length, i = -1, percentage = 0;
 224          while (++i < l) percentage += this.fileList[i].percentage;
 225          return Math.ceil(percentage / l);
 226      },
 227  
 228      highlight: function(index, color) {
 229          return this.fileList[index].element.effect('background-color', {duration: this.options.optionFxDuration}).start(color, 'fff');
 230      },
 231  
 232      cancelFile: function(e, name, size) {
 233          e.stop();
 234          this.remove(name, size);
 235          this.fireEvent('onRemoveFile', [name, size]);
 236      },
 237  
 238      remove: function(name, size, index) {
 239          if (name) index = this.findFile(name, size);
 240          if (index == -1) return;
 241          if (this.fileList[index].status < 2) {
 242              this.uploader.remove(name, size);
 243              this.checkComplete(name, size, 'onCancel');
 244          }
 245          this.fileList[index].element.effect('opacity', {duration: this.options.optionFxDuration}).start(1, 0).chain(Element.remove.pass([this.fileList[index].element], Element));
 246          this.fileList.splice(index, 1);
 247          return;
 248      },
 249  
 250      findFile: function(name, size) {
 251          var l = this.fileList.length, i = -1;
 252          while (++i < l) if (this.fileList[i].name == name && this.fileList[i].size == size) return i;
 253          return -1;
 254      },
 255  
 256      nextFile: function() {
 257          var l = this.fileList.length, i = -1;
 258          while (++i < l) if (this.fileList[i].status != 2) return i;
 259          return -1;
 260      },
 261  
 262      clearList: function(complete) {
 263          var i = -1;
 264          while (++i < this.fileList.length) if (complete || this.fileList[i].status == 2) this.remove(0, 0, 0, i--);
 265      }
 266  });
 267  
 268  FancyUpload.implement(new Events, new Options);