Can't get ngf-resize to work with ng-file-upload

Question

I'm working on an angular-meteor app, and following the official tutorial , I'm using ng-file-upload to upload images. I'm trying to resize an image on the client. I'm pretty sure I'm just missing something basic about how to use this directive. This is my html snippet:

<div ngf-drop ngf-select
     ngf-change="createLocationCtrl.addImages($files)"
     ngf-drag-over-class="{accept:'dragover', reject:'dragover-err', delay:100}" class="drop-box"
     ngf-multiple="false" ngf-allow-dir="false" ngf-accept="'image/*'"
     ngf-drop-available="true"
     ngf-resize="{width:300, height:300, centerCrop:true}">
      Select File or Drop File
</div>

Then when I input an image file and break in the console on createLocationCtrl.addImages I see that the file was inputted completely unchanged.

I tried adding ngf-resize-if="true" and to play around even more yet nothing worked.

Any help would be appreciated!

Answer 1

I had same problem and I was looking for some solution for a time without luck. Until now I understood the problem.

When you upload an svg file and try to resize it, then this conversion is done as a png file.

So, when you upload the file you MUST CHANGE THE EXTENSION to PNG or exclude svg files

ngf-resize-if="TRUE && $file.type !== 'image/svg+xml'"

(change TRUE, for your current condition)