Accessing "this" as the parent from callbacks emberjs nested component

Question

I have a parent component whose template contains a 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 being called when the success event triggers on the dropzone. However, I would like to call other methods which are stored on the controller when the fileReceived method is called but I cannot access this. I tried setting an instance variable called self to this on didInsertElement, but it gives me 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 within actions, and then this.sendAction should be this.send. Then I think this will be the thing 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 discussed in comments you also needed to change your template to

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