Search code examples
angularjsng-file-upload

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?

Solution

  • 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}"/>