gistfile1.js

var UploadHelper = {
  load: function(element, options) {
    this.element = element;
    this.options = {
      button_cursor             : SWFUpload.CURSOR.HAND,
      button_window_mode        : SWFUpload.WINDOW_MODE.WINDOW,
      flash_url                 : '/javascripts/swfupload_2_2_0_1/Flash/swfupload.swf',
      file_queued_handler       : this.file_queued.bind(this),
      file_queue_error_handler  : this.file_queue_error.bind(this),
      upload_error_handler      : this.upload_error.bind(this),
      upload_progress_handler   : this.upload_progress.bind(this),
      upload_start_handler      : this.upload_start.bind(this),
      upload_success_handler    : this.upload_success.bind(this) };
    Object.extend(this.options, options || {});
    
    Event.observe(window, 'load', this._load.bind(this));
  },
  
  _load: function() {
    this.element = $(this.element);
    this.element.insert(this._table_template);
    this.header_row = this.element.down('tr');
    this.swfupload = new SWFUpload(Object.clone(this.options));
    this._attributes = {};
    this._required_attributes = $H(this.options.required_attributes || {});
  },
  
  _cancel_row: function(file_id, file_name) {
    this._save_row(file_id, file_name, 'icons/cross.png', 'Canceled');
    Effect.Fade(file_id, { delay: 2 });
  },
  
  _deny_row: function(file_id, file_name, message) {
    this._save_row(file_id, file_name, 'icons/error.png', 'Denied', message);
  },
  
  _save_row: function(file_id, file_name, icon, status, message, action) {
    this.element.show();
    object = { file_id: file_id, file_name: file_name, icon: icon, status: status, message: message, action: action };
    if ($(file_id)) {
      $(file_id).replace(this._row_template.evaluate(object));
    } else {
      this.header_row.insert({ after: this._row_template.evaluate(object) });
    }
  },
  
  save_row_by_index: function(file_index, file_name, icon, status, message) {
    file_index = Number(file_index);
    file_id = this.swfupload.getFile(file_index).id;
    this._save_row(file_id, file_name, icon, status, message);
  },
  
  _in_progress: function() {
    this.swfupload.getStats().in_progress == 1;
  },
  
  file_queue_error: function(file, code, message) {
    switch (code) {
      case SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED:
        message = 'The maximum number of files allowed in the queue (' + this.swfupload.file_queue_limit + ') has been reached'; break;
      case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
        message = 'The file is larger than the limit of ' + this.options.file_size_limit; break;
      case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
        message = 'The file has a size of zero bytes. It contains no data, and therefore cannot be uploaded.'; break;
      case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:
        message = 'The type of file (' + file.type + ') is not allowed. Acceptable types are ' + this.swfupload.file_types; break;
    }
    this._deny_row(file.id, file.name, message);
  },

  file_queued: function(file) {
    this.swfupload.setButtonDimensions(1, 1);
    document.fire("UploadHelper:file_queued", { file: file });
  },
  
  cancel_upload: function(file_id) {
    this.swfupload.cancelUpload(file_id);
    this.swfupload.setButtonDimensions(this.options.button_width, this.options.button_height);
    document.fire("UploadHelper:upload_canceled");
  },
  
  approve_upload: function(attributes) {
    var file = this.swfupload.getFile(attributes.file_id);
    var action = this._cancel_template.evaluate({ file_id: file.id });
    this._save_row(file.id, file.name, 'icons/hourglass.png', 'Queued', null, action);

    this._attributes[file.id] = $H(attributes);

    if (!this._in_progress()) { this.swfupload.startUpload(file.id); }
  },
  
  upload_start: function(file) {
    var errors = [];
    
    this._attributes[file.id].each(function(pair) {
      var required_attribute = this._required_attributes.get(pair.key);
      if (required_attribute && pair.value.empty()) {
        errors.push(required_attribute + " can't be blank");
      }
      this.swfupload.addFileParam(file.id, pair.key, pair.value);
    }, this);
    
    if (errors.length > 0) {
      this._deny_row(file.id, file.name, errors.join(', '));
      document.fire("UploadHelper:validation_failed");
      return false;
    }

    this.swfupload.setButtonDimensions(this.options.button_width, this.options.button_height);
    document.fire("UploadHelper:upload_started");
  },
  
  upload_progress: function(file, bytes, total_bytes) {
    var percentage = ((bytes / total_bytes) * 100).round();
    var status = null;
    var action = null;
    if (percentage == 0 || percentage == 100) {
      status = "Finishing"; // file is being transferred to S3 at this point
      percentage = null;
    } else {
      status = "Uploading";
      action = this._cancel_template.evaluate({ file_id: file.id });
      percentage = percentage + '%';
    }
    this._save_row(file.id, file.name, 'notice_spinner.gif', status, percentage, action);
  },
  
  upload_success: function(file, server_data) {
    eval(server_data);
    this.swfupload.startUpload();
  },
  
  upload_error: function(file, code, message) {
    switch (code) {
      case SWFUpload.UPLOAD_ERROR.FILE_CANCELLED:
        this._cancel_row(file.id, file.name);
        this.swfupload.startUpload();
        break;
      case SWFUpload.UPLOAD_ERROR.FILE_VALIDATION_FAILED:
        break;
      default:
        this._save_row(file.id, file.name, 'icons/exclamation.png', 'Error', message);
        this.swfupload.startUpload();
        break;
    }
  },
  
  _table_template: '\
<table>\n\
  <tbody>\n\
    <tr>\n\
      <th></th>\n\
      <th>File name</th>\n\
      <th>Status</th>\n\
      <th></th>\n\
      <th></th>\n\
    </tr>\n\
  </tbody>\n\
</table>\n',

  _row_template: new Template('\
<tr id="#{file_id}">\n\
  <td><img src="/images/#{icon}" /></td>\n\
  <td>#{file_name}</td>\n\
  <td>#{status}</td>\n\
  <td>#{message}</td>\n\
  <td>#{action}</td>\n\
</tr>\n'
  ),
  
  _cancel_template: new Template('\
<img src="/images/icons/cross.png" alt="Cancel upload" title="Cancel upload" style="cursor: pointer" onclick="UploadHelper.cancel_upload(\'#{file_id}\'); return false;" />\n'
  )

};