image uploader OO JS for use with s3_direct_upload gem

gistfile1.md

/assets/javascripts/elements/ImageUpload.js

function ImageUpload($el) {
  var self = this;

  self.$el = $el
  self.$image = $(this.$el.attr('data-image-selector'));
  self.$uploadForm = this.$el.find('.s3-uploader')
  self.$uploadTriggers = this.$el.find('.js-upload-image-trigger');
  self.$imageUploader = this.$el.find('#file');
  self.$status = $(this.$el.attr('data-status-selector'));
  self.$successMessage = this.$el.attr('data-success-message');

  self.init();
}

ImageUpload.prototype = {
  constructor : ImageUpload,

    init : function() {
      puts('ImageUpload initialized');

      var self = this;

      puts("selector: " + self.$status)
      puts("msg: " + self.$successMessage)

      self.$uploadForm.S3Uploader();

      self.$uploadTriggers.on('click', function(el){
        el.preventDefault();
        self.$status.empty();
        self.$imageUploader.click();
      });

      self.$uploadForm.bind("s3_uploads_start", function(event, data) {
        self.$uploadTriggers.addClass('secondary');
        self.$status.html("<em>Upload started...</em>");
      });

      self.$uploadForm.bind("s3_upload_complete", function(event, data) {
        // Notify user that upload has been completed and that the system is processing
        // Start hitting end point (User obj) to grab processed image
        self.$status.html("<em class='success'>Upload complete</em>");
        if(self.$successMessage) {
          self.$status.append("<em>" + self.$successMessage + "</em>");
        }
        puts(self.$image);
        self.$image.attr('src', data.url).removeClass('hide');
        self.$uploadTriggers.removeClass('secondary');
        self.$uploadTriggers.fadeOut('fast');
        setTimeout(function(){
          self.$status.find('em').fadeOut();
        }, 6000);
      });

      self.$uploadForm.bind("s3_upload_failed", function(event, data) {
        self.$status.html("<em class='error'>Upload failed. Please refresh the page and try again.</em>")
      });

    }
}

assets/javascripts/application.js or similar

    $('.js-image-upload').each(function(){
      var imageUploadForm = new ImageUpload($(this));
    });

Useage

= image_tag slide.image.url(:med), id: "image-to-replace"

...
...

.js-image-upload{ 'data-image-selector' => "#image-to-replace",
                  'data-status-selector' => ".upload-status",
                  'data-success-message' => "The image is processing and will be visible system-wide within 2 minutes."}
  %a.js-upload-image-trigger{href: "#", title: "Upload a new image to replace the current image"}
    Upload new slide image*
    %span ⬆
  = s3_uploader_form callback_url: staff_slide_path(slide),
                     callback_method: 'PUT',
                     callback_param: "slide[image_remote_url]",
                     key: "uploads/${filename}-_-{unique_id}",
                     class: "s3-uploader" do
    = file_field_tag :file, multiple: false, class: "hide"
    
...
...

.upload-status