The best way to upload images to cloudinary? MERN stack - node.js

Question

I'm a beginner in the MERN stack, but I'm trying to create a social network application with the help of various tutorials on YouTube when I get stuck. I need a little more experienced thinking on how best to upload an image to the cloudinary. When I study, I want to learn in the right direction how people work in companies and how they work in the real world.
I found two types of code on youtube that works the same (uploads an image to cloudinary). I wonder which is better. A new API is created in one tutorial, something like this:
cloudinary.config({
cloud_name: '',
api_key: '',
api_secret: '',
});
router.post('/upload', authenticateUser, (req, res) => {
try {
if (!req.files || Object.keys(req.files).length === 0)
return res.status(400).json({ msg: 'No files were uploaded.' });
const file = req.files.file;
if (file.size > 1024 * 1024) {
removeTmp(file.tempFilePath);
return res.status(400).json({ msg: 'Size too large' });
}
if (file.mimetype !== 'image/jpeg' && file.mimetype !== 'image/png') {
removeTmp(file.tempFilePath);
return res.status(400).json({ msg: 'File format is incorrect.' });
}
cloudinary.v2.uploader.upload(
file.tempFilePath,
{ folder: 'test' },
async (err, result) => {
if (err) throw err;
removeTmp(file.tempFilePath);
res.json({ public_id: result.public_id, url: result.secure_url });
}
);
} catch (err) {
return res.status(500).json({ msg: err.message });
}
});
router.post('/destroy', authenticateUser, (req, res) => {
try {
const { public_id } = req.body;
if (!public_id) return res.status(400).json({ msg: 'No images Selected' });
cloudinary.v2.uploader.destroy(public_id, async (err, result) => {
if (err) throw err;
res.json({ msg: 'Deleted Image' });
});
} catch (err) {
return res.status(500).json({ msg: err.message });
}
});
const removeTmp = path => {
fs.unlink(path, err => {
if (err) throw err;
});
};
export default router;
And the other shot does it all the same from the controller. For example if I want to make a new post my controller looks like this:
export const createPost = async (req, res) => {
const myCloud = await cloudinary.v2.uploader.upload(req.body.image, {
folder: 'posts',
});
const { description, image } = req.body;
if (!image) {
throw new BadRequestError('Image is required');
}
const user = await User.findById(req.user.userId);
const newPost = new Post({
description,
image: {
public_id: myCloud.public_id,
url: myCloud.secure_url,
},
username: user.username,
avatar: user.avatar,
user: req.user.userId,
});
const post = await newPost.save();
res.status(StatusCodes.CREATED).json({ post });
};
I create an image in the controller and upload it when I submit the form in react. They both work the same, I tried, but I'm interested in whether it's necessary to make a new endpoint or it's enough to upload an image from the controller, delete an image from the controller, etc.

Answer 1

You can use multer module for uploading content in the directory and if you want to upload in S3 bucket then you have to use module accordingly.
For multer -> https://www.npmjs.com/package/multer
For multer-S3 -> https://www.npmjs.com/package/multer-s3