I am using the following code in my frontend to upload an image and crop it before sending it to my backend which is coded using ExpressJs and the Multer Middleware. I am using CroppieJs library for cropping the image.
$('.croppie-upload').on('click', function (ev) {
croppieDemo.croppie('result', {
type: 'canvas',
size: 'viewport'
}).then(function (image) {
var imageBlob = image.split(",");
console.log(imageBlob);
var body = {
sessionUserName: sessionStorage.getItem("userName"),
profileImage : imageBlob[1]
};
fetch(instanceUrl + "/user_credentials/upload", {
method: "PATCH", // POST, PUT, DELETE, etc.
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(body),
})
.then((response) => {
if (response.status == 200) {
response.json().then((data) => {
if (data.updated === true) {
doInit();
alert("Saved Successfully!");
}
});
}
})
.catch((err) => {});
});
});
The issue is as far my knowledge that Multer accepts the multipart/formdata encoding and Croppie JS provides a Base64 encoded string. Express throws an error that entity is too large. Can someone tell me the how to use croppie js with multer?