ng-file-upload won't convert jpg image to png

Question

I'm trying upload a file to my server using ng-file-upload while also resizing it and converting it to png on the client side. From the documentation, it sounds like this is possible using the ngf-resize attribute with the type property set to image/png .

Documentation here: https://github.com/danialfarid/ng-file-upload/blob/master/README.md describes type as: "type is optional convert it to the given image type format."

When i try this, it works with a png source file, but if i use a jpg file it doesn't convert it to png, instead I get this error in the Javascript console:

There were invalid base64 characters in the input text.
Valid base64 characters are A-Z, a-z, 0-9, NaNExpect errors in decoding.

Here's my code:

<div ngf-drop ngf-select ng-model="file" class="drop-box" 
   ngf-drag-over-class="'dragover'" ngf-multiple="false" 
   ngf-allow-dir="false" accept="image/jpeg,image/jpg,image/png" 
   ngf-pattern="'image/jpeg,image/jpg,image/png'" 
   ngf-resize="{width: 100, height: 100, quality: .8, centerCrop: true, type: 'image/png'}">

Is it even possible to convert a jpg to png using ng-file-upload? Or do I have a code issue? My goal is to make the browser do the conversion so my server only ever receives png images.

Answer 1

The issue is that the plugin is trying to restore exif data on the png file which would fail since it is not a jpeg. To avoid that you can have:

<div ngf-drop ngf-select ng-model="file" class="drop-box" 
   ngf-drag-over-class="'dragover'" ngf-multiple="false" 
   ngf-allow-dir="false" accept="image/jpeg,image/jpg,image/png" 
   ngf-pattern="'image/jpeg,image/jpg,image/png'" 
   ngf-resize="{width: 100, height: 100, quality: .8, 
   centerCrop: true, type: 'image/png', restoreExif: false}">