Resize in ng-file-upload creating wrong size image

Question

I'm trying to use the ng-file-upload module for Angular (1.5.9) to upload files. I've set it to resize the images to 200x200 but they're always getting resized to a width of 283. For example, I upload an image of size 1786x1132 and it's getting resized to 283x178. Another image of size 225x225 is getting resized to 283x283.

Here's my directive definition:

<div class="image-upload" ngf-drop="" ngf-select ng-model="inventory.file" name="file" ngf-pattern="'image/*'" ngf-accept="'image/*'" ngf-max-size="5MB"
    ngf-min-height="200" ngf-min-width="200" ngf-resize="{width: 200, height: 200, centerCrop: false}" ngf-drag-over-class="image-upload--drag-over">
    <img flex="none" ngf-thumbnail="inventory.file || '/assets/images/default-prize.png'" width="200" height="200">
    <label flex="none">{{ 'DRAGIMAGE' | translate }}</label>
</div>

One additional point in case it's relevant is that I'm not actually uploading to the server yet. I'm checking the resized image by right-clicking in the browser and saving the image to my computer. I noticed the issue because I'm showing a thumbnail of the image (at 200x200) and it's quality looks really poor after the resize.

Any ideas?

Answer 1

As per danial's comment above, the solution was to change ngf-thumbnail to ngf-src.