upload-thumbnail.js

import Ember from 'ember';

export default Ember.Component.extend({

  classNames: 'uploadThumbnail',

  classNameBindings: ['upload.isLoaded'],

  backgroundImageStyle: function () {
    if (this.get('localFileUrl')) {
      return 'background-image: url("'+this.get('localFileUrl')+'");';
    }
  }.property('localFileUrl'),

  percentComplete: function () {
    return Math.round(this.get('upload.progress') * 100);
  }.property('upload.progress'),

  percentCompleteStyle: function () {
    return 'width:'+this.get('percentComplete')+'%;';
  }.property('percentComplete'),

  previewFile: function () {
    Ember.run.once(this, function () {
      var reader = new FileReader();
      reader.onload = (e) => { this.set('localFileUrl', e.target.result); };
      reader.readAsDataURL(this.get('upload.file'));
    });
  }.observes('upload').on('init'),

  onIsLoaded: function () {
    Ember.run.once(this, function () {
      if (this.get('upload.isLoaded')) {
        this.sendAction('action', this.get('upload'), this.get('dimensions'));
      }
    });
  }.observes('upload.isLoaded'),

  getDimesntions: function () {
    if (!this.get('localFileUrl')) return;
    var img = new Image();
    img.src = this.get('localFileUrl');
    this.set('dimensions', {
      width: img.width,
      height: img.height
    });
  }.observes('localFileUrl'),

  click: function () {
    if (this.get('upload.isLoaded')) {
      this.sendAction('uploadClicked', this.get('upload'));
    }
  }

});