File Upload in EmberJs

2

I have had great success wrapping blueimp file uploader into a EmberJS component. You simply need to setup the jQuery plugin on didInsertElement, example code is as follows:

.... = Em.Component.extend({
  didInsertElement: function() {
    var self = this;
    $('.file-uploader').fileupload({
      dataType: 'json',
      method: 'POST',
      url: '/urlhere',
      paramName: 'file',
      submit: function (e, data) {
        data.formData = {id: 123, title: 'abc123'};
        data.jqXHR = this.fileupload('send', data);
        return false;
      },
      done: function (e, data) {
        console.log('success!');
        self.sendAction('saveComplete');
      },
      fail: function (e, data) {
        console.log('failed', e);
        self.sendAction('saveFailed');
      }
    });
  },

  willDestroyElement: function() {
    $('.file-uploader').fileupload('destroy');
  },
}
...

This of course is a basic example that requires a component class and template but should give you an example of how to wire everything up.

1 Like