Ember.FilePicker

file_picker.js

var get = Ember.get, set = Ember.set, getPath = Ember.getPath;

Ember.FilePicker = Ember.Button.extend({
  tagName: 'span',
  classNames: ['ember-filepicker'],
  classNameBindings: ['disabled'],

  /**
   * @type {String}
   */
  title: 'Select File',

  /**
   *
   * @type {Boolean}
   */
  hasSelection: false,

  /**
   *
   * @type {Boolean}
   */
  multiple: true,

  /**
   *
   * @type {Boolean}
   */
  disabled: false,

  /**
   *
   * @type {Array}
   */
  files: Ember.computed(function() { return Ember.A(); }),

  /**
   *
   * @type {Number}
   */
  selectionSize: 0,

  init: function() {
    this._super();
    this.on('didInsertElement', this, function() {
      this.$().css({position: 'relative'}).append('<input type="file"/>').find('input:file').css({
        position: 'absolute', cursor: 'pointer', opacity: 0,
        top: 0, bottom: 0, left: 0, right: 0, width: '100%', height: '100%'
      })
      .attr('multiple', get(this, 'multiple'))
      .attr('disabled', get(this, 'disabled'))
      .on('change', Ember.$.proxy(this, 'didChangeFiles'));
    });
  },

  didChangeFiles: function(evt) {
    var files = Ember.A(evt.currentTarget.files);
    set(this, 'selectionSize', 0);
    files.forEach(function(file) { this.incrementProperty('selectionSize', file.size); }, this);
    get(this, 'files').replace(0, get(this, 'files.length'), files);

    Ember.run.schedule('sync', this, function() {
      if (get(this, 'hasSelection')) {
        this.change();
      }
    });
  },

  /**
   * [change description]
   * @type {[type]}
   */
  change: Ember.K,

  didChangeInputProperty: Ember.observer(function(view, key) {
    if (key === 'files.length') {
      set(this, 'hasSelection', !!get(this, key));
    } else {
      this.$('input:file').attr(key, get(this, key));
    }
  }, 'files.length', 'multiple', 'disabled'),

  /** @private */
  defaultTemplate: Ember.Handlebars.compile('{{view.title}}'),

  click: Ember.K
});