I've been working on a work project recently and I've been asked to add some compression to images coming through a form. We're currently using filepond and I'm not supposed to change it, just add compression.
I've seen the imageTransformOutputQuality property but I can't make it work...
Here's the code https://pastebin.com/QEU0Jimm I've tried to put the property in the setOptions like this
const filepond = $.fn.filepond.setOptions({
maxFileSize: '50MB',
labelMaxFileSizeExceeded: translations.fileTooBig,
labelMaxFileSize: translations.maximumSizeIs + ' {filesize}',
acceptedFileTypes: ['image/png', 'image/jpeg', 'image/jpg', 'image/gif'],
labelFileTypeNotAllowed: translations.wrongFileType,
fileValidateTypeLabelExpectedTypes: translations.acceptedFileTypeAre + ' {allButLastType} ' + translations._or + ' {lastType}',
fileValidateTypeLabelExpectedTypesMap: {
'image/jpeg': '.jpeg',
'image/png': '.png',
'image/jpg': '.jpg',
'image/gif': '.gif'
},
imageTransformOutputQuality: 20,
});
but it didn't work so I tried putting it where we create the pond like this
$(elements.commentFile).filepond({
name: 'file',
labelIdle: translations.slideYourFile + ' <span class="filepond--label-action smp-text_main-color">' + translations.addOnClickHere + '</span>',
credits: false,
beforeRemoveFile: function () {
return confirm(translations.confirmDeleteEdits)
},
imageTransformOutputQuality: 20
});
but still failed.
With imageTransformOutputQuality at 20, when I try to submit a 13MB image, in the back I get 6,5MB so it's not 20%... But worse, when I try with a 4MB image it doesn't change anything... And even worse, when I submit a 44MB image, in the back I get a 66Mb file...
I can't even understand what is going on.
If any of you have any idea or explanation, it would be awesome.
Thanks in advance and have a nice day