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

**URL:** <https://discuss.emberjs.com/t/file-upload-with-ember-cli-form-data-image-not-showing/11962>\
**Category:** Learning Team\
**Created:** [November 19, 2016, 9:15am UTC](https://discuss.emberjs.com/t/file-upload-with-ember-cli-form-data-image-not-showing/11962 "2016-11-19T09:15:52Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Harun\_Tuncay](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/harun_tuncay/32/16888_2.png) [@Harun\_Tuncay](https://discuss.emberjs.com/u/Harun_Tuncay)\
**Post date:** [November 19, 2016, 9:15am UTC](https://discuss.emberjs.com/t/file-upload-with-ember-cli-form-data-image-not-showing/11962/1 "2016-11-19T09:15:52Z")

</div>

I have found an add-on for image uploads. [ember-cli-form-data - npm](https://www.npmjs.com/package/ember-cli-form-data) .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.

 ![](https://us1.discourse-cdn.com/flex019/uploads/emberjs_public/original/2X/a/aede403d2db58fe38bda8a3bb380d851cab040f0.png)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}}

```

 ![](https://us1.discourse-cdn.com/flex019/uploads/emberjs_public/original/2X/d/d73ff2771ca82727c541dca5f329686984fd7d9f.png)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)