Access to "this" as a parent from emberjs callbacks of a nested component

Question

I have a parent component whose template contains the dropzone component from https://www.npmjs.com/ember-cli-dropzonejs :

{{drop-zone url='#' addRemoveLinks=true success=fileReceived}} 

In the parent controller, I have a method called fileReceived , which is called when a success event is fired in dropzone. However, I would like to call other methods that are stored on the controller when the fileReceived method is fileReceived , but I cannot access this . I tried setting the instance variable self to this on didInsertElement , but it gives me a window instead of my component.

This is my parent component controller:

 import Ember from 'ember'; export default Ember.Component.extend({ self:null, didInsertElement:function() { this.set('self', this); }, fileReceived: function (file) { //Validate sheet this.sendAction('doStuff', file); //"this" returns a dropzone object instead of parentObject //this.doStuff(file); }, actions: { doStuff: function (file) { //do stuff with the file } }); 

Answer 1

I think fileReceived should be in action, and then this.sendAction should be this.send . Then I think this will be what you want?

 import Ember from 'ember'; export default Ember.Component.extend({ actions: { fileReceived: function (file) { //Validate sheet this.send('doStuff', file); //"this" returns a dropzone object instead of parentObject //this.doStuff(file); }, doStuff: function (file) { //do stuff with the file } }); 

Edit

As mentioned in the comments, you also need to change your template to

 {{drop-zone url='#' addRemoveLinks=true success=(action 'fileReceived')}}