'Could not decode base64 when uploading image (file size 1mb or more)

ReacJs This is the react js code that i used the get the avatar image and send it to backed

const handleSignup = async (event) => {
    event.preventDefault();
    const formdata = new FormData();
    formdata.set("name", signupstate.name);
    formdata.set("email", signupstate.email);
    formdata.set("password", signupstate.password);
    formdata.set("confirmpassword", signupstate.confirmpassword);
    formdata.set("avatar", avatar);
    const isValid = createSignupValidation(signupstate, avatar, alert);
    if (isValid) {
      const res = await createSignUpApi(formdata, alert); // api call
      if (res.status === 201) {
        alert.success("User Registered Successfully");
        navigate("/");
      }
    }
  };
  const handleSingnupInput = (event) => {
    if (event.target.name === "avatar") {
      const reader = new FileReader();
      reader.readAsDataURL(event.target.files[0]);
      reader.onload = () => {
        if (reader.readyState === 2) {
          setAvatarPreview(reader.result);
          setAvatar(reader.result);
        }
      };
    } else {
      setSignUpState({
        ...signupstate,
        [event.target.name]: event.target.value,
      });
    }
  };

NodeJs Here the image is uploaded to cloudinary

const cloudinary = require("cloudinary");

exports.signupController = catchAsyncErrors(async (req, res, next) => {
    const { name, email, password, confirmpassword } = req.body;
    const myCloud = await cloudinary.v2.uploader.upload(req.body.avatar, { folder: "ecommerce_users", width: 150, crop: "scale", });
    const user = await User.create({ name, email, password, confirmpassword, avatar: { public_id: myCloud.public_id, url: myCloud.secure_url, }, });

    sendTokenToCookie(user, 201, res);
});

{ "success": false, "message": "Could not decode base64"



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source