A simple file input with options for multiple and accept attributes as well as drag & drop.

file_input_view.js

// ==========================================================================
// Project:   SproutCore
// Copyright: ©2013 7x7 Software, Inc.
// License:   Licensed under MIT license
// ==========================================================================
/*global SC */


/** @class
 */
SC.FileInputView = SC.View.extend({

  accept: null,

  _acceptAttribute: function () {
    var accept = this.get('accept'),
      ret = false;

    if (accept) {
      ret = accept.join(',');
    }

    return ret;
  }.property('accept').cacheable(),

  classNames: ['sc-file-input-view'],

  /**
    FileList object.
  */
  files: null,

  multiple: false,

  tagName: 'input',

  didCreateLayer: function () {
    var layer = this.get('layer');

    SC.Event.add(layer, 'change', this, this._change);
  },

  dataDragOver: function (evt) {
    evt.dataTransfer.dropEffect = 'copy';
  },

  dataDragDropped: function (evt) {
    SC.run(function () {
      var dt = evt.dataTransfer,
        files = dt.files;

      this.set('files', files);
    }, this);
  },

  _change: function (evt) {
    var files = evt.target.files;

    SC.run(function () {
      this.set('files', files);
    }, this);
  },

  render: function (context) {
    var acceptValue = this.get('_acceptAttribute');

    context.setAttr({
      type: 'file',
      multiple: this.get('multiple') ? 'multiple' : null,
      accept: acceptValue ? acceptValue : null
    });
  }
});