Update Image on Cloudinary

While the package doesn't offer a direct utility for updating images on Cloudinary, you can achieve this by leveraging the existing utilities: uploadImagesToCloudinary and deleteImagesFromCloudinary. The process involves deleting the existing image and then uploading the new one.

Steps to Update an Image

Delete the Existing Image:
- Utilize the deleteImagesFromCloudinary function to remove the image you intend to update. Make sure to provide the publicId of the image to ensure the correct image is deleted.
Upload the New Image:
- Once the old image is successfully deleted, employ the uploadImagesToCloudinary function to upload the new image. Although you can't reuse the same publicId, you can place the new image in the same Cloudinary folder to maintain organizational consistency.
Update Database Reference:
- After the new image is uploaded, its publicId will be different from the old one. It's crucial to update any references in your database to point to this new publicId. This can be retrieved from the upload_report.imagesInfo array.

Example

Before diving into the code, let's assume you are using MongoDB and Mongoose and you have a MongoDB User document structured as follows:

{
  "_id": "60d72b292cf44c1291abcd12",
  "name": "John Doe",
  "username": "john_doe",
  "profilePictureLink": "https://res.cloudinary.com/demo/image/upload/v1632764910/user-image/john_doe.jpg",
  "profilePicturePublicId": "user-image/john_doe"
}

In the following example, we'll focus on updating the profilePictureLink and profilePicturePublicId fields:

// import express, mongoose & required modules and utilities
// import "uploadImagesToCloudinary" and "deleteImagesFromCloudinary" from 'express-cloudinary-image-handler'
 
const app = express();
 
app.put('/update-profile-picture', async (req, res) => {
 
  try {
 
    // Fetch user from MongoDB
    const userId = req.body.userId;
 
    // Step 1: Delete the existing image from Cloudinary
    const user = await mongoose.model('User').findById(userId);
    const delete_report = await deleteImagesFromCloudinary({
      publicIds: [user.profilePicturePublicId]
    })
 
    if (delete_report.isError) {
      return res.json({
        status_code: delete_report.errorInfo.statusCode,
        message: delete_report.errorInfo.message
      })
    }
 
    // Step 2: Upload the new image to Cloudinary
    const upload_report = await uploadImagesToCloudinary({
      req: req,
      configuration: {
        formDataFieldName: 'profilePicture',
        cloudinaryFolderName: 'user-image',
        allowedExtensions: ['png', 'jpg', 'jpeg'],
        maxFileSizeInKB: 512,
        maxNumberOfUploads: 1,
        deleteAllTempFiles: true
      }
    })
 
    if (upload_report.isError) {
      return res.json({
        status_code: upload_report.errorInfo.statusCode,
        message: upload_report.errorInfo.message
      })
    }
 
    // Step 3: Update MongoDB User document using findOneAndUpdate
    const updatedUser = await mongoose.model('User').findOneAndUpdate(
      { _id: userId },
      {
        profilePictureLink: upload_report.imagesInfo[0].imageSrc,
        profilePicturePublicId: upload_report.imagesInfo[0].imagePublicId
      },
      { new: true }  // Return the updated document
    )
 
    return res.json({
      message: 'Updated Profile Picture Successfully',
      newProfilePictureLink: updatedUser.profilePictureLink
    })
  } 
  
  catch (error) {
    return res.json({ message: "Something went wrong" });
  }
})

Delete Image from Cloudinary Cleanup Temporary Files