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");
}
});
});
}
});
