Insert image using Editor's image option:
<Editor
style={{ marginLeft: "20px", width: "100%" }}
dark={theme === "light" ? false : true}
placeholder="Write something..."
defaultValue={content}
// defaultValue="Write something..."
uploadImage={uploadPostImage}
onChange={(v) => handleContent(v())}
/>
Resize and send image to server for uploading to cloudinary
const resizeFile = (file) =>
new Promise((resolve) => {
Resizer.imageFileResizer(
file,
720,
400,
"JPEG",
100,
0,
(uri) => {
resolve(uri);
},
"base64"
);
});
const uploadPostImage = async (file) => {
try {
const image = await resizeFile(file);
const { data } = await axios.post("/upload-image", { image });
// console.log("UPLOAD FILE RESULT => ", data);
return data.url;
} catch (err) {
console.log(err);
}
};
Image upload to cloudinary from nodejs
// route
router.post("/upload-image", requireSignin, uploadImage);
// controller
import cloudinary from "cloudinary";
cloudinary.config({
cloud_name: process.env.CLOUDINARY_NAME,
api_key: process.env.CLOUDINARY_KEY,
api_secret: process.env.CLOUDINARY_SECRET,
});
export const uploadImage = async (req, res) => {
try {
// console.log(req.body.image);
const result = await cloudinary.uploader.upload(req.body.image);
console.log("uploaded image url => ", result);
res.json({
url: result.secure_url,
public_id: result.public_id,
});
} catch (err) {
console.log(err);
}
};