angular-file-upload – display uploaded image in browser without streaming it from backend

Issue

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

Solution

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.

Answered By – Gandalf the White

Answer Checked By – Mary Flores (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.