Image upload code igniter

Question

I am using croppie.js to crop my image and send it to the server. But sometimes the server shows 413 error for the large images. Is there any other way to send the image as image with out using 64 base string. Because the response from croppie.js is coming as a 64 base string.

This is my jQuery code snippet.

$('.upload-result').on('click', function (ev) {
            var file = $('input[name=userfile]').val();
            var uploadErrors = [];

            if (file === "") {
                $('.errorImgUpload').html('You did not select a file to upload').fadeIn();
                uploadErrors.push("no file");
            } else{
                $('.errorImgUpload').fadeOut();
            }

            if (uploadErrors.length === 0) {

                $('#doUpload span').html("Uploading...");

                $uploadCrop.croppie('result', {
                    type: 'canvas',
                    size: {
                        width: 760,
                        height: 860
                    }
                }).then(function (resp) {

                    var formData = new FormData($('#product_detail_images_form')[0]);

                    $.ajax({
                        url: "<?= base_url("admin_jsessID/upload_tmp/".$id); ?>",
                        type: "POST",
                        data:formData,
                        mimeType: "multipart/form-data",
                        contentType: false,
                        cache: false,
                        processData: false,
                        success: function (data) {

                            data=data.trim();
                            if (data === "1") {
                                $('input[name=userfile]').val("");

                                $uploadCrop.croppie('bind', {

                                    url: ""

                                });

                                load_uploaded_images();

                                $('.doneImgUpload').html('Image Successfully Uploaded.').fadeIn();
                                $('html, body').animate({
                                    scrollTop: $(".doneImgUpload").height()-20
                                }, 200);
                                setTimeout(function () {
                                    $('.doneImgUpload').fadeOut();
                                }, 5000);
                            }else if (data === "2"){
                                $('.errorImgUpload').html('Image Upload Failed.').fadeIn();
                                $('input[name=userfile]').val("");
                                $('html, body').animate({
                                    scrollTop: $(".errorImgUpload").height()-20
                                }, 200);
                                setTimeout(function () {
                                    $('.errorImgUpload').fadeOut();
                                }, 5000);
                            }else if (data === "3"){
                                $('.errorImgUpload').html('Image Upload Failed.').fadeIn();
                                $('input[name=userfile]').val("");
                                $('html, body').animate({
                                    scrollTop: $(".errorImgUpload").height()-20
                                }, 200);
                                setTimeout(function () {
                                    $('.errorImgUpload').fadeOut();
                                }, 5000);
                            }
                            else if (data === "0"){
                                $('.errorImgUpload').html('Upload Image Limit Exceeded.').fadeIn();
                                $('input[name=userfile]').val("");
                                $('html, body').animate({
                                    scrollTop: $(".errorImgUpload").height()-20
                                }, 200);
                                setTimeout(function () {
                                    $('.errorImgUpload').fadeOut();
                                }, 5000);
                            }

                            $('#doUpload span').html("Upload Image");

                        }
                    });
                });
            }

        });

Answer 1

Use Compressing methods to reduce size. check lzma-js library and it will reduce 70% less than original base64 image string.