Adding an image for Posts with Cloudinary support

[StarAzure]

I am working on trying to add an image for posts.

In Editor.jsx, I added

async function hanldeSubmit(e) {
      ..
      dealPic: e.currentTarget.dealPic.value,
    };

   <label htmlFor="dealPic">
            Post Pic
            <input
              type="file"
              id="dealPic"
              name="dealPic"
              accept="image/png, image/jpeg"
             // ref={dealPicRef}
            />
          </label>

And in api/posts/index.js

`handler.post(async (req, res) => {
  if (!req.user) {
    return res.status(401).send('unauthenticated');
  }

  const { title } = req.body;
  const { content } = req.body;
  const { dealPic } = req.body;

 ..
  if (!dealPic) return res.status(400).send('Please choose an image');

  const post = {
    _id: nanoid(),
    title,
    content,
    dealPic,
    createdAt: new Date(),
    creatorId: req.user._id,
  };`

This adds dealPic value as an image name in the database.

How to make this work as an image uploaded to cloudinary? I refered settings.jsx but could not see how this is done.

Appreciate the suggestions.

[StarAzure]

I was able to implement this the same way user profile pic is done but I am using mutate. I hope using mutate for post wont cause any issues but its working.

export function usePoster() { const { data, mutate } = useSWR('/api/posts', fetcher); const posts = data?.posts; return [posts, { mutate }]; }