Ember.js and image uploading

Question

I'm having trouble with uploading images in Ember.js

I have a form to create a user :

<div class="container">
<form onsubmit={{action "createUser"}} enctype="multipart/form-data">
  <div class="form-group">
    <label for="firstName">First name: </label>
    {{input type="text" class="form-control" id="firstName" required="true" value=firstName}}
  </div>
  <div class="form-group">
    <label for="lastName">Last name: </label>
    {{input type="text" class="form-control" id="lastName"  required="true" value=lastName}}
  </div>
  <div class="form-group">
    <label for="age">Age: </label>
    {{input type="number" class="form-control" id="age"  required="true" value=age}}
  </div>
  <div class="form-group">
    <label for="job">Job: </label> 
    {{input type="text" class="form-control" id="job"  required="true" value=job}}
  </div>
  <div class="form-group">
    <label for="image">Picture: </label> 
    {{input type="file" class="form-control" id="image" value=image}}
  </div>
  <button type="submit" class="btn btn-info">Create</button>
</form>

I know I should encode images in base64 but I have no idea how to do that since I've never done it before.

And in the view, this is how I'm trying to get the image (I know this is not what I should do but I don't know how to do it) :

<div class="container">
  <h1>{{model.firstName}} {{model.lastName}}</h1>
  <p>Age: {{model.age}} years old</p>
  <p>Job: {{model.job}}</p>
  <img src="{{model.image}}" alt="img" id="image">
</div>

Any ideas, suggestions, help please ?

---

EDIT :

actions: {
  createUser(event) {
    event.preventDefault();
    let user = this.store.createRecord('user', {
      firstName: this.firstName,
      lastName: this.lastName,
      age: this.age,
      job: this.job,
      image: this.image
    });
    user.save().then (() => {
      this.transitionToRoute('user', user.id);
    });
  }
}

Answer 1

Replace

{{input type="file" class="form-control" id="image" value=image}}

with

<input type="file" class="form-control" id="image" onchange={{action "uploadFile"}}/>
<br> Chosen image is <br>
<img src={{image}} />

This will trigger the uploadFile action when the image is chosen. In your js file, add the action as ,

actions: {
  uploadFile: function(event) {
    var self = this;
    const reader = new FileReader();
    const file = event.target.files[0];
    let imageData;

    reader.onload = function(){
      imageData = reader.result;
      self.set('image', imageData);
    };

    if (file) {
      reader.readAsDataURL(file);
    }
  }
}

Source : https://stackoverflow.com/a/40370830/2824131