'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 |
|---|
