How to preview image before upload with ng-file-upload

Question

This is code snippet.

When user select a file by clicking on Change Image button, file gets selected and name is displayed in text box.

<img src="" alt="" border=3 height=75 width=75><br><br>

<input type="text" ng-model="b.files[0].name" data-ng-hide="!uploadMode" readonly="readonly">

<button ngf-select ng-model="b.files" class="btn btn-success btn-sm" ng-click="uploadMode=1">
    <span class="glyphicon glyphicon-picture"></span> Change Image
</button>

I also want to display the image of selected file to preview to user, before actual upload.

Can please any one help me, what changes i need to do for that?

Answer 1

Take a look at the example ( ngThumb directive). Basically, it's all about using the FileReader API and listening to the appropriate events.