Image uploader

components.image-uploader.js

import Ember from 'ember';

export default Ember.Component.extend({
  init() {
    this._super(...arguments);
    
    this.set('step', 'source-selector');
  },
  
	isSourceSelector: Ember.computed.equal('step', 'source-selector'),
  isCropper: Ember.computed.equal('step', 'cropper'),
  isResizer: Ember.computed.equal('step', 'resizer'),
  isUploader: Ember.computed.equal('step', 'uploader'),
  
  actions: {
    showCropper() {
      this.set('step', 'cropper');
    },
    showResizer() {
      this.set('step', 'resizer');
    },
    showUploader() {
      this.set('step', 'uploader');
    },
    sendImageOutside() {
      // SEND ACTION OUTSIDE
    },
  }
});

components.uploader-cropper.js

import Ember from 'ember';

export default Ember.Component.extend({
    init() {
    this._super(...arguments);
    
    Ember.run.later(() => {
      this.get('cropped')();
    }, 2000);
  }
});

components.uploader-resizer.js

import Ember from 'ember';

export default Ember.Component.extend({
  init() {
    this._super(...arguments);
    
    Ember.run.later(() => {
      this.get('resized')();
    }, 2000);
	}
});

components.uploader-source-selector.js

import Ember from 'ember';

export default Ember.Component.extend({
  init() {
    this._super(...arguments);
    
    Ember.run.later(() => {
      this.get('sourceSelected')();
    }, 2000);
  }
});

components.uploader-uploader.js

import Ember from 'ember';

export default Ember.Component.extend({
  init() {
    this._super(...arguments);
    
    Ember.run.later(() => {
      this.get('uploaded')();
    }, 2000);
	}
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

templates.application.hbs

{{image-uploader}}

templates.components.image-uploader.hbs

{{#if isSourceSelector}}
	{{uploader-source-selector
  		sourceSelected=(action 'showCropper')
  }}
{{else if isCropper}}
	{{uploader-cropper
  		cropped=(action 'showResizer')
  }}
{{else if isResizer}}
	{{uploader-resizer
  		resized=(action 'showUploader')
  }}
{{else if isUploader}}
	{{uploader-uploader
  		uploaded=(action 'sendImageOutside')
  }}
{{/if}}

templates.components.uploader-cropper.hbs

<h1>Cropping...</h1>

templates.components.uploader-resizer.hbs

<h1>Resizing...</h1>

templates.components.uploader-source-selector.hbs

<h1>Choosing the file</h1>

templates.components.uploader-uploader.hbs

<h1>Uploading...</h1>

twiddle.json

{
  "version": "0.12.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.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}