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.
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}">