gistfile1.txt

// This is a disaster, thanks mostly to jquery-file-upload

App.FileUploadView = Ember.View.extend({
  templateName: 'file_upload_view',
  tagName: 'form',
  classNames: ['file-upload-view', 'clearfix'],
  attributeBindings: ['action', 'method', 'enctype'],
  // action: "http://my_bucket.s3.amazonaws.com/",
  action: null,
  method: "POST",
  enctype: "multipart/form-data",

  showUploadButton: true,
  allowMultiple: false,

  fileName: null,
  fileType: null,
  plugin: null,
  type: null,

  formData: null,

  profileId: null,

  textFieldValue: Ember.computed('isSaving', 'fileName', function () {
    if (this.get('isSaving')) return "Saving...";
    return this.get('fileName');
  }),

  select: function () {
    this.$('input[type="file"]').trigger('click');
  },

  didInsertElement: function () {
    var view = this;
    this.$().fileupload({
      forceIframeTransport: true,
      autoUpload: false,
      replaceFileInput: true,
      add: function (e, data) {
        view.set('fileName', data.files[0].name);
        view.set('fileType', data.files[0].type);

        view.set('plugin', data)
      },
      formData: function () {
        console.log("formData:", view.get('formData'));
        console.log("action:", view.get('action'));
        return view.get('formData')
      }
    });
  },

  submit: function () {
    if (this.get('isSaving')) return;
    if (!this.get('fileName')) return;
    var view = this;

    return App.NewUploadRequest.create({
      data: {
        upload: {
          file_name: this.get('fileName'),
          content_type: this.get('fileType')
        }
      }
    }).send().then(function(upload) {
      view.set('action', upload.bucket_url);

      view.set('formData', [
          {
            name: "key",
            value: upload.key
          },

          {
            name: "AWSAccessKeyId",
            value: upload.api_key
          },

          {
            name: "acl",
            value: "private"
          },

          {
            name: "success_action_redirect",
            value: upload.redirect_url
          },

          {
            name: "success_action_status",
            value: "200"
          },

          {
            name: "policy",
            value: upload.policy
          },

          {
            name: "signature",
            value: upload.signature
          }
        ]);

      Ember.run.next(function () {
        view.get('plugin').submit();
      });

      view.set('isSaving', true);

      return App.ShowUploadRequest.create({
        id: upload.id
      }).send();
    }).then(function (response) {
      view.set('isSaving', false);
      view.set('isSuccess', true);
      view.success(response);
      view.reset();

      return response;
    }, function (error) {
      view.set('isError', true);
      view.set('isSaving', false);
    });
  },

  success: function (response) {
    var controller = this.get('controller');
    if ("function" === typeof controller.uploadSuccess) {
      controller.uploadSuccess(response);
    }
  },

  reset: function () {
    this.$()[0].reset();
    this.set('fileName', null);
    this.set('isSuccess', false);
    this.set('isError', false);
    this.set('formData', null);
  }
});

gistfile2.txt

<div class="input-prepend input-append pull-left" style="position: relative">
  <span class="add-on"><img src="/assets/images/picture.png"></span>
  <input {{bindAttr value="view.textFieldValue"}} class="span2" type="text" placeholder="Select file..." disabled="disabled">
  <label for="photo-file" class="btn" type="button">Select</label>
</div>
{{#if view.showUploadButton}}
<button class="btn pull-left" {{action "submit" target="view"}}>{{#if view.isSaving}}<img src="/assets/images/button-spinner.gif">{{else}}Upload{{/if}}</button>
{{/if}}

<input id="photo-file" type="file" name="file" style="visibility:hidden;height:0px;width:0px">