How to Display Chosen Image in Image Source

Question

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.

have a look at this stackoverflow answer stackoverflow.com/questions/30347656/… — Arun Gopinathan
– Arun Gopinathan, Commented Jan 26, 2018 at 0:59

Krish Bhanushali · Accepted Answer · 2018-01-26 00:46:32Z

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?

charlietfl · Accepted Answer · 2018-01-26 00:38:37Z

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

Collectives™ on Stack Overflow

How to Display Chosen Image in Image Source

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related