Ember file uploads

drop-zone.emblem

div style="width:500px;height:500px;border:1px solid black;"
  button click="browse"
    | Browse
  button click="upload"
    | Upload
  file-upload url="/files" onfile="onfile"
  = yield

drop-zone.js

import Ember from 'ember';
import Uploader from '../uploader';

export default Ember.Component.extend({
  dragOver: function(event) {
    event.preventDefault();
  },
  drop: function(event) {
    event.preventDefault();

    var $el = this.$();

    var files = event.dataTransfer.files;
    this.set('files', files);

    // event.preventDefault();
    // console.log(event);
    //
    // var $el = this.$();
    //
    // var files = event.dataTransfer.files,
    //     reader = new FileReader();
    //
    // reader.onload = function(event) {
    //   this.sendAction('onread', event.target);
    //   console.log(event.target);
    //   $el[0].style.background = 'url(' + event.target.result + ') no-repeat center';
    // };
    //
    // console.log(files);
    // reader.readAsDataURL(files[0]);
    //
    this.sendAction('onfile', files);
  },
  actions: {
    browse: function() {
      var $file = this.$('.file-input');
      $file.click();
    },
    upload: function() {
      var uploadUrl = this.get('sign');
      var files = this.get('files');

      var uploader = Uploader.create({
        url: uploadUrl
      });

      uploader.on('didSign', function(response) {
        console.log('Finished signing:');
        console.log(response);
      });

      uploader.on('didUpload', function(response) {
        // S3 will return XML with url
        console.log('Finished uploading:');
        console.log(response);
        var uploadedUrl = Ember.$(response).find('Location')[0].textContent;
        uploadedUrl = decodeURIComponent(uploadedUrl); // => http://yourbucket.s3.amazonaws.com/file.png
        console.log(uploadedUrl);
      });

      if (!Ember.isEmpty(files)) {
        uploader.upload(files[0]); // Uploader will send a sign request then upload to S3
      }
    },
    onfile: function(files) {
      this.set('files', files);
      this.sendAction('onfile', files);
    }
  }
});

file-upload.emblem

= yield

file-upload.js

import Ember from 'ember';
import EmberUploader from 'ember-uploader';

export default EmberUploader.FileField.extend({
  classNames: ['file-input'],
  url: '',
  filesDidChange: (function() {
    this.sendAction('onfile', this.get('files'));
  }).observes('files')
});

index.emblem

drop-zone files=model.files onfile="onfile" sign="//localhost:3000/media/sign"
  | Drop here!