Croppie: Too big base64 data

Created on 10 Sep 2018  路  3Comments  路  Source: Foliotek/Croppie

With certain settings (png/jpg with 0.9 compression) sometimes I cannot upload the cropped image data to the server in base64 form. The image is not too big, typically under 100 KB.
I contacted to my hosting provider. They told me, that uploading an image with base64 is a security risk (and there is some size limit somewhere in the hosting provider's setting), so I should choose another solution. So my question is: is there any other way to upload the cropped image to the server (send just coordinates to the server side or something like that) ?

I almost forgot to mention ... thank you for this awesome library. ;)

Thank you.

Most helpful comment

I've solved the problem with using blob type:

$("#save_cropped_cover_image").click(function(e) {
                $uploadCrop.croppie('result', {
                    type: 'blob',
                    size: 'viewport',
                    format: 'jpeg',
                    quality: 0.8
                }).then(function (resp) {

                      const formData = new FormData();
                      formData.append('croppedImage', resp, fileName);

                      $.ajax({
                            type: 'POST',
                            url: '/index.php/profile/uploadCover',
                            data: formData,
                            processData: false,
                            contentType: false
                        }).done(function(data) {
                           $("#cover").val(data);
                        });

                });

                $('#cover_photo_cropper').modal('toggle');
            });

All 3 comments

I've solved the problem with using blob type:

$("#save_cropped_cover_image").click(function(e) {
                $uploadCrop.croppie('result', {
                    type: 'blob',
                    size: 'viewport',
                    format: 'jpeg',
                    quality: 0.8
                }).then(function (resp) {

                      const formData = new FormData();
                      formData.append('croppedImage', resp, fileName);

                      $.ajax({
                            type: 'POST',
                            url: '/index.php/profile/uploadCover',
                            data: formData,
                            processData: false,
                            contentType: false
                        }).done(function(data) {
                           $("#cover").val(data);
                        });

                });

                $('#cover_photo_cropper').modal('toggle');
            });

Thanks. I had a pretty similar issue using Croppie on Keystone.js

Happy to help you!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

cannond13 picture cannond13  路  6Comments

oystehei picture oystehei  路  6Comments

stdCh picture stdCh  路  8Comments

bmalets picture bmalets  路  6Comments

tpilitis picture tpilitis  路  5Comments