File Upload With ember-cli-form-data.Image not showing

Learning Team
1

I have found an add-on for image uploads. ember-cli-form-data - npm .Tutorials suggests adding a file input tag with id of “file-field”.

<input type='file' id='file-field'/>

Then, in the corresponding action in routes/products/new.js , adding

actions:{
  saveProduct(newProduct){
   --> const file = document.getElementById('file-field').files[0]; (newly added)
   -->newProduct.set('image', file);   (newly added)(i have also added image attr with the type of file to model)
    newProduct.save().then(()=>this.transitionTo('products'));
  }
}

This approach doesn’t error out but also not saving image to database.Image attr goes as null in the inspector.

1366×768 174 KB
Image property is undefined even tho i am giving it a url as you can see. {{input type=‘file’ value=model.image}} instead of .

Then deleted that 2 lines of code in the routes file which were used to fetch the element with the id of “file-field” and setting it to product.image This does saves it to database.(firebase).But, i can’t display it.

-->/templates/products.index.hbs
{{#each model as |product| }}
  <img src="{{product.image.image_url}}" />  --->doesn't work
  <img src="{{product.image_url}}" />             --->doesn't work
   <img src="{{product.image}}" />                  --->broken image picture, i guess doesn't work too
{{/each}}

1366×768 170 KB
This time Image property is changed properly.(it says “C:\fakepath\avrzNOX_700b.jpg”.What is this fakepath thing.Is it might be the problem?) Two questions here: 1)What should i do to display the image? 2)Why the way tutorial shows doesn’t work?(is it outdated, tutorial is from 2015)