Calling controller action from action in component

Question

I'm having some issues getting this to work. I thought I had done it correctly but it seems that's not the case.

index.hbs

{{#if image}}
    {{image-cropper imageToCrop=image setCroppedImage=setCroppedImage}}
    <br>
    {{/if}}
{{file-input action="setImage"}}

The file-input component takes an image in, and sets the image property to a data URL, which then causes the image-cropper component to show up.

image-cropper.hbs

<div class="cropper-container">
    <img src="{{imageToCrop}}">
</div>
<button {{action 'cropImage'}}>Crop Image</button>
{{croppedImage}}

When I click the button it calls the cropImage action in the image-cropper.js file

image-cropper.js

actions: {
    cropImage: function() {
        var container = this.$(this.get('cropperContainer'));
        var croppedImage = container.cropper('getCroppedCanvas');
        this.sendAction('setCroppedImage', croppedImage);
    }
}

So here I am using this.sendAction(); to call the setCroppedImage action name on the component, which refers back to the action name on the component in the index.hbs file, which I thought should call the action name on the controller to the left of the = sign

index.js(controller)

setCroppedImage: function(croppedImage) {
    console.log('set cropped image called on index controller');
    this.set('finalCroppedImage', croppedImage);
},

But the console.log statement is not being called so I know the controller action is not being called either.

I need some help understanding how to get this to work here.

Answer 1

After more reading I see that I need to add "" to the action name like so

From

{{image-cropper imageToCrop=image setCroppedImage=setCroppedImage}}

To

{{image-cropper imageToCrop=image setCroppedImage="setCroppedImage"}}