Setting controller property from inside a component

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: '',
            })
        }
    }
});

The model has all these properties as strings.

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?