CODEWITHSUNDEEP
jqueryjquery-file-upload
medBouzid
medBouzid

Reputation: 8372

compress images before uploading using jquery file upload

Am using the jquery file upload plugin for direct upload to s3, I am trying to get the image compressed before upload it, I have tried the option imageQuality: 0.8

fileInput.fileupload({

            fileInput:       fileInput,
            url:             my_url
            type:            'POST',
            paramName:        'file',
            dataType:         'XML',
            replaceFileInput: false,
            acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i
            maxFileSize: 999000,  
            imageQuality: 0.8,

            // .....

})

However the image size doesn't get compressed after upload

Am not sure that imageQuality is the right thing here, but am open to any other alternative as well :

For instance: I have also created my own function to compress images, that function return the image Blob, I just have no idea how to tell JQuery File Upload to use that blob instead of the image from the input file

Upvotes: 2

Views: 8113

Answers (1)

medBouzid
medBouzid

Reputation: 8372

I am going to answer my question after I found the solution hopefully this help someone in the future :

To compress an image using jquery file upload there is 2 solutions, either you use the compression provided by the plugin or you create your own compress function and use it with jquery file upload, I ended up using the second solution

First solution:

The thing I stumbled upon was this link: https://github.com/blueimp/jQuery-File-Upload/wiki/Client-side-Image-Resizing

So what you need to do basically is import the following files on your project: jquery.js, jquery.ui.widget.js, load-image.all.min.js, canvas-to-blob.min.js, jquery.iframe-transport.js, jquery.fileupload.js, jquery.fileupload-process.js, jquery.fileupload-image.js

Then looking at the options of jQuery File upload, I found the option imageQuality, reading it, it says :

imageQuality: Sets the quality parameter given to the canvas.toBlob() call when saving resized images.

So it seems that the imageQuality option works only when the image get resized, but in my case I don't need to resize the image, but you can use another option imageForceResize, by combining these 2 options you can make the compression work, but there is a third option needed disableImageResize, this option is set to true by default, so we need to set it to false to allow image resizing.

The final code looks like this :

$('#file_input').fileupload({

    # these 3 options are necessary together for compressing
    disableImageResize: false,
    imageForceResize: true,
    imageQuality: 0.7,
    // ......
})

For the second solution :

if you want to use your own compress function which in my opinion I think it's the best way to go, then in this case you just need jquery.js, jquery.ui.widget.js, jquery.fileupload.js

Jquery file upload store the files to upload in data.files before submit them, so what you have to do is to have a function that compress the image(s) and return an array of blobs, then overwrite data.files

$('#file_input').fileupload({

   add: function(e, data){
       // .......
       data.files = compress_images_function()
       data.submit()
   }

})

Upvotes: 8

Related Questions