ng-file-upload v12.0.1 - Displaying a temporary 'loading' icon while thumbnail is being generated

Question

Our app allows users to select multiple large images for upload.

Using the 'ngf-thumbnail' directive can sometimes be slow in generating the previews.

Is there a nice way to display a loading icon (or any other image) while the thumbnails are being processed?

 <img ngf-thumbnail="file" ngf-size="{width: 100, height: 100, quality: 0.5}"/>

Answer 1

I was able to get this to work by doing the following:

<img ng-src="/spinner.gif" ngf-thumbnail="file" ngf-size="{width: 100, height: 100, quality: 0.5}"/>

When ng-file-upload is done generating the thumbnail, it effectively replaces the original 'src' set by ng-src.