with file upload ember jquery-file-upload

file-upload.hbs

<input type="file" class="fileupload__input" name="{{unbound name_attr}}">
<button class="fileupload__button" {{bind-attr disabled="disabled"}}>
    {{#unless upload_progress}}
        {{unbound text}}
    {{else}}
        {{upload_progress}}
    {{/unless}}
</button>	

file-upload.js

App.FileUploadComponent = Em.Component.extend({
  tagName: 'label',
  classNames: ['fileupload__component'],
  upload_progress: null,
  disabled: Em.computed.bool('upload_progress'),
  didInsertElement: function() {
    Em.assert('should have an url', this.get('url'));
    return this.$().fileupload({
      url: this.get('url'),
      done: (function(_this) {
        return function(e, data) {
          return _this.sendAction('done', data.result);
        };
      })(this),
      fail: (function(_this) {
        return function() {
          return _this.sendAction('fail');
        };
      })(this),
      start: (function(_this) {
        return function() {
          return _this.sendAction('start');
        };
      })(this),
      progressall: (function(_this) {
        return function(e, data) {
          var progress;
          progress = parseInt(data.loaded / data.total * 100, 10);
          return _this.set('upload_progress', "" + progress + "%");
        };
      })(this)
    });
  },
  willDestroyElement: function() {
    return this.$().fileupload('destroy');
  }
});

usage.hbs

{{file-upload
    name_attr="file"
    url='/upload-url/'
    text="select file"
    done="submit_done"
    fail="submit_fail"
    start="upload_start"}}
    
  {{!-- `submit_done`, `submit_done` and `upload_start` are action names you may want to handle in controller or route --}}