CODEWITHSUNDEEP
angularjsng-file-upload
Sahithi
Sahithi

Reputation: 21

show thumbnail image using ng-file-upload

I am using ng-file-upload for uploading the images. I want to show the thumbnails of the images. I am using angular 1.6. Can someone please paste the working code of thumbnail of selected image?

Upvotes: 0

Views: 3915

Answers (2)

Sebastian palacio florez
Sebastian palacio florez

Reputation: 114

Since version 5.1.0 use ngf-background directive.

<div class="your-thumbnail-class" ng-show="!!yourModel" ngf-background="yourModel"></div>

Upvotes: 0

Tim Biegeleisen
Tim Biegeleisen

Reputation: 522762

From the documentation for ng-file-upload there is a custom directive you can use for displaying a thumbnail preview of an image:

<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.
>

Here is what an example thumbnail tag might look like

<img class="your_class"
     ngf-thumbnail="path/to/file.jpg"
     ngf-size="{width:200, height:200, quality:1.0}"/>

Upvotes: 2

Related Questions