How to use Croppie JS with Multer Middleware in Express?

119 Views Asked by At

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?

0

There are 0 best solutions below