New Twiddle

components.file-upload.js

import Ember from 'ember';

//let resumable = null;
// fake the resumable api
let resumable = {
    on() {},
    assignDrop() {},
    assignBrowse() {},
    removeFile() {},
    upload() {}
  }


// fake filesize lib
function filesize(x) {
  return x;
}

export default Ember.Component.extend({
  tagName: 'section',
  classNames: 'upload-area',
  classNameBindings: ['isOver', 'isUploading', 'isEditing'],

  // component properties
  isOver: false,
  isUploading: false,
  isEditing: false,
  progress: 0,
  fileSizeBits: 0,
  progressAsPercent: Ember.computed('progress', function() {
    return this.get('progress') * 100;
  }),
  progressAsFileSize: Ember.computed('progress', 'fileSizeBits', function() {
    return filesize(this.get('fileSizeBits') * this.get('progress'));
  }),
  fileSize: Ember.computed('fileSizeBits', function() {
    return filesize(this.get('fileSizeBits'));
  }),
  hasFile: false,
  api: false,

  // resumable options
  target: null,
  fileType: null,
  dropAreaSelector: null,
  browseButtonSelector: null,
  maxFiles: 1,

  init() {
    this._super();

    //const url = '/'+ (this.get('api')) ? config.APP.api.namespace + this.get('target') : this.get('target');
    
    //resumable = new Resumable({
    //  target: url,
    //  fileType: this.get('fileType').split(' '),
    //  fileTypeErrorCallback(file, errorCount){
    //    console.log(file, errorCount);
    //  },
    //  maxFiles: this.get('maxFiles')
    //});


    resumable.on('fileAdded', file => {
      console.log('file added');
      this.set('hasFile', true);
      this.set('isUploading', true);
      this.set('isEditing', true);
      this.set('fileSizeBits', file.size);
      resumable.upload();
    });

    resumable.on('fileProgress', file => {
      this.set('progress', file.progress());
    });

    resumable.on('fileSuccess', file => {
      this.set('isUploading', false);
      this.set('hasFile', false);
      resumable.removeFile(file);
    });
  },

  didInsertElement() {
    // setup the drop area if we have an element to use
    if (this.get('dropAreaSelector') !== null) {
      const dropArea = Ember.$(this.get('dropAreaSelector'));
      resumable.assignDrop(dropArea);

      dropArea.on('dragenter', () => {
        this.set('isOver', true);
      });
      dropArea.on('dragleave drop', () => {
        this.set('isOver', false);
      });
    }

    if (this.get('browseButtonSelector') !== null) {
      resumable.assignBrowse(Ember.$(this.get('browseButtonSelector')));
    }
  },

  actions: {
    reset() {
      console.log('reset');
      this.set('isUploading', false);
      this.set('isEditing', false);
      this.set('hasFile', false);
      this.set('fileSizeBits', 0);
    },
    submit() {
      this.sendAction('submit', this.get('title'), this.get('description'), this.get('poster'));
    }
  }
});

components.video-editor.js

import Ember from 'ember';

export default Ember.Component.extend({
    classNames: 'video-editor',
    title: null,
    description: null,
    poster: null
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  actions: {
        createVideo(a,b,c){
            console.log('I will create a record');
            console.log(a,b,c);
        }
    }
});

templates.application.hbs

{{#file-upload
    dropAreaSelector='.upload-area'
    browseButtonSelector='.upload-area__browse'
    submit=(action "createVideo")
    api=true
    target='/video-upload'
    fileType='pdf gif psd svg app zip mp4'
    as |upload|}}
    
        <div class="upload-area__progress">
            <h2 class="upload-area__title">
                Uploaded
                <strong>{{upload.progressAsFileSize}}</strong>
                of
                <strong>{{upload.fileSize}}</strong>
            </h2>


        </div>

        {{#video-editor}}
            {{#unless upload.isUploading}}
                <button class="btn btn--ui video-editor__save" {{action "submit" target=upload}}>Save Video</button>
            {{/unless}}
        {{/video-editor}}
    

{{/file-upload}}

templates.components.file-upload.hbs

{{yield this}}

templates.components.video-editor.hbs

{{input value=title}}
{{textarea value=description}}
{{yield this}}

twiddle.json

{
  "version": "0.10.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.6.0",
    "ember-data": "2.6.1",
    "ember-template-compiler": "2.6.0"
  },
  "addons": {}
}