Setting controller property from inside a component

Question

I'm having some trouble getting this to work. I have an image upload component that I want to set a controller property with so that I can later use it in a cropping component that finally will set a property that gets saved to my backend.

In index.hbs I render the image-input component, inside the image-component.hbs I have this setup

{{#if controller.image}}
<img src="{{controller.image}}" width="300">
<br>
{{/if}}
{{ file-input fileChanged="fileSelectionChanged"}}

In the file-input.js I have this

import Ember from 'ember';

export default Ember.TextField.extend({
    type: 'file',
    change: function(e) {
        let self = this;
        var inputFiles = e.target.files;
        if (inputFiles.length < 1) {
            return;
        }

        let inputFile = inputFiles[0];

        let fileInfo = {
            name: inputFile.name,
            type: inputFile.type || 'n/a',
            size: inputFile.size,
            date: inputFile.lastModifiedDate ?
                        inputFile.lastModifiedDate.toLocaleDateString() : 'n/a',
        };

        var fileReader = new FileReader();

        fileReader.onload = function(e) {
            let fileReader = e.target;
            fileInfo.dataUrl = fileReader.result;

            self.sendAction('fileChanged', fileInfo);
        };

        let firstFile = e.target.files[0];
        fileReader.readAsDataURL(firstFile);
    }
});

In image-input.js I have this

import Ember from 'ember';

export default Ember.Component.extend({
    actions: {
        fileSelectionChanged: function(file) {
            this.set('controller.image',file.dataUrl);
        },
    },
});

And finally in the controller I have it setup like this.

import Ember from 'ember';

export default Ember.Controller.extend({
    formValid: false,
    image: '',
    actions: {
        createFlyer: function() {
            var newFlyer = this.store.createRecord('flyer', {
                firstName: this.get('firstName'),
              lastName: this.get('lastName'),
              location: this.get('location'),
              jobTitle: this.get('jobTitle'),
              companyName: this.get('companyName'),
              timeSpent: this.get('timeSpent'),
              blurb: this.get('blurb'),
              image: this.get('image')
            });
            newFlyer.save();
            this.setProperties({
                firstName: '',
              lastName: '',
              location: '',
              jobTitle: '',
              companyName: '',
              timeSpent: '',
              blurb: '',
            })
        }
    }
});

This is the model

export default DS.Model.extend({
  firstName: DS.attr('string'),
  lastName: DS.attr('string'),
  location: DS.attr('string'),
  jobTitle: DS.attr('string'),
  companyName: DS.attr('string'),
  timeSpent: DS.attr('string'),
  blurb: DS.attr('string'),
  image: DS.attr('string')
});

Currently the component is setting the file property on the controller because when you browse and add an image the image tag shows up with the data: url properly added in the src attribute, so the property is being set, but when I save the form the content of the image property is not being passed as the content of the data: url, it's just blank, like it's seeing the default.

Am I not setting the property up correctly?

For reference

I am using Ember-cli version 0.2.7

UPDATE

After applying Kingpin's suggestion below I am now getting this error in the console when trying to save to the backend.

TypeError: Cannot read property 'match' of null
    at <anonymous>:873:35
    at Array.exports.default.mixin.Mixin.create.find (ember.debug.js:28104)
    at <anonymous>:872:33
    at tryCatch (ember.debug.js:45439)
    at invokeCallback (ember.debug.js:45451)
    at publish (ember.debug.js:45422)
    at ember.debug.js:26472
    at Queue.invoke (ember.debug.js:878)
    at Object.Queue.flush (ember.debug.js:943)
    at Object.DeferredActionQueues.flush (ember.debug.js:748)

Answer 1

Get rid of the controller references, just set it on the component, it's what is in scope in the view anyway.

Template

{{#if image}}
  <img src="{{image}}" width="300">
  <br>
{{/if}}
{{ file-input fileChanged="fileSelectionChanged"}}

JS

export default Ember.Component.extend({
    actions: {
        fileSelectionChanged: function(file) {
            this.set('image',file.dataUrl);
        },
    },
});