04.0.0 Upload Images

What you will learn

• Create a view to select a file
• Add an action to the Remove button

Before you start

See the installation instructions. Use tag 4.0.0.

Create a view to select a file

Ember doesn't have helper for selecting a file, but since both {{input}} and {{area}} actually use a view, we can create a similar view ourselves and use it.

• Open app/templates/products/show.hbs.
• Paste the code from form.hbs in this gist into the form tag, just above the submit button.
• Replace

<input type='file' accept='image/*'>

with

{{view 'upload-file' file=image accept='image/*'}}

• In the app, edit a product.
• Inspect the error shown in the Console tab in the browser. Ember is missing the upload-file view, so let's create this.
• In the terminal, enter ember g view upload-file.
• Open 'app/views/upload-file.js' and replace the content with the code from upload-file.js in this gist.

Add an action to the Remove button

• Open app/templates/products/show.hbs.
• Change the markup for the Remove button and call the (yet to defined) removeImage action when you click it:

<button {{action 'removeImage'}} type='button' class='remove pull-right'>Remove</button>

• In the app, edit a product and click the Remove button.
• Inspect the error shown in the Console tab in the browser. Ember is missing the removeImage action, so let's create this.
• Open app/controllers/products/show.js and add removeImage:

export default Ember.ObjectController.extend({
  actions: {
    toggleEditing: function() {
      ...
    },
    submit: function() {
      ...
    },
    removeImage: function() {
      this.set('image', null);
    }
  }
});

• In the app, edit a product and click the Remove button again.