0

I would like to show when a file is selected, in the input. Why isn't it showing? My code:

<input type="file" id="logo" name="logo" ng-model="service.logo" required="required">
<img ng-src="{{service.logo}}">

Here is a JSFiddle.

anonymoose
  • 1,169
  • 2
  • 21
  • 62
AmazingDayToday
  • 3,724
  • 14
  • 35
  • 67
  • have a look at this stackoverflow answer https://stackoverflow.com/questions/30347656/angularjs-show-image-preview-only-if-selected-file-is-image – Arun Gopinathan Jan 26 '18 at 00:59

2 Answers2

2

Because in this you are just taking the input from the user. You need to write code to open the file, read it and display on to the view. As you want to show the image when the user browses and selects it, you need to trigger the fileSelect. Also, look into this, I think this is what you want. How to read a file in AngularJS?

Krish Bhanushali
  • 170
  • 1
  • 1
  • 8
1

Because the only thing that gets passed to value and thus ng-model of a file input is the file name

If you want a preview (before upload) you need to use FileReader API to read the file and parse it into a data url and pass that to an image element

charlietfl
  • 170,828
  • 13
  • 121
  • 150