I am using nervgh/angular-file-upload to let the user take a photo from his mobile phone camera and upload it. It works fine, but now I want to display the image too. Of course I could add that functionality to my backend and just use the img-tag and point it to the URL. But since I upload the my JavaScript file already has to have the file at some point, right? How do i display it? I tried it like this:
<img ng-src="data:image/JPEG,{{uploadedImage}}">
but couldn't get it to work. According to the wiki of angular-file-upload I have control over an "FileItem", but I can't seem to figure out where the actual file-date is stored.
So my question is: Is it possible to use img tag with ng-src to display a file that is directly stored in JavaScript as byte array and where does angular-file-upload store the actual array-data
You need to make use of ngf-thumbnail option
<div|span|...
*ngf-thumbnail="file" //Generates a thumbnail version of the image file
ngf-size="{width: 20, height: 20, quality: 0.9}" the image will be resized to this size
// if not specified will be resized to this element`s client width and height.
ngf-as-background="boolean" //if true it will set the background image style instead of src attribute.
>
Take a look at this fiddle Click Here
<img ng-show="myForm.file.$valid" ngf-thumbnail="picFile" class="thumb">
This line is helping us to show a thumbnail of the image being uploaded by the user, you can choose different html tags as suggested above. You have to link the image using the file name, the ng-model in that case is picFile and that is being used as ngf-thumbnail.
You can use your own css on it as well.