Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

282
Views
Reduce image size with filepond

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

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!