Error API Delete Image in CLoudinary

[nhungnguyen-9]

I want to delete image that I saved in cloudinary. I read docs and they said create an api endpoint to delete the image. I did it and it didnt work. This is my code:
api/admin/cloudinary/removeImage/route.js

import { cloudinary } from "@/backend/utils/cloudinary"

export async function POST(req, res) {
    console.log('🚀 ~ POSTCloud ~ req:', req);
    console.log('🚀 ~ POSTCloud ~ req.body:', req.body);
    try {
        const { public_id } = req.body;
        await cloudinary.uploader.destroy(public_id);
        res.status(200).json({ message: 'Image deleted successfully from Cloudinary' });
    } catch (error) {
        console.log('🚀 ~ POST ~ error:', error);
        res.status(500).json({ error: 'Something went wrong!' });
    }
}

and this is frontend code:

import React, { useState } from "react"
import { Plus, Trash } from "lucide-react"
import Image from "next/image"
import axios from "axios"
import { CldUploadWidget } from 'next-cloudinary'

const ImageUpload = ({ onChange, onRemove, value }) => {
    const onUpload = (result) => {
        onChange(result.info.secure_url)
    }

    const removeFromCloudinary = async (publicId) => {
        console.log('🚀 ~ removeFromCloudinary ~ TypeOfpublicId:', typeof publicId)
        try {
            console.log('🚀 ~ removeFromCloudinary ~ publicId:', publicId)
            const response = await axios.post(`${process.env.NEXT_PUBLIC_API_URL}/api/admin/cloudinary/removeImage`, { public_id: publicId })
            console.log('Image removed from Cloudinary')
            console.log('🚀 ~ removeFromCloudinary ~ response:', response.data)
        } catch (error) {
            console.error('Error removing image from Cloudinary:', error)
        }
    }

    const handleRemove = async (url) => {
        try {
            const publicId = url.split('/').pop().replace(/\.[^/.]+$/, "");
            console.log('Public ID:', publicId);
            await removeFromCloudinary(publicId);
            onRemove(url);
        } catch (error) {
            console.error('Error removing image:', error);
        }
    }

    return (
        <div className="">
            <div className="mb-4 flex flex-wrap items-center gap-4">
                {value.map((url) => (
                    <div key={url} className="relative w-[200px] h-[200px]">
                        <div className="absolute top-0 right-4 z-10">
                            <button
                                type="button"
                                onClick={() => handleRemove(url)}
                                className="bg-red-500 p-2 rounded-md text-white"
                            >
                                <Trash className="h-4 w-4" />
                            </button>
                        </div>
                        <Image src={url} alt="collection" className="object-cover rounded-lg" fill />
                    </div>
                ))}
            </div>

            <CldUploadWidget uploadPreset="ml_default" onUpload={onUpload}>
                {({ open }) => {
                    return (
                        <button type="button" onClick={() => open()} className="bg-gray-600 text-white flex items-center gap-1 p-3 rounded-md hover:bg-gray-700">
                            <Plus className="h-6 w-6 mr-2" />
                            <p>Upload Image</p>
                        </button>
                    )
                }}
            </CldUploadWidget>
        </div>
    )
}

export default ImageUpload

I log the req.body in API and I received: ReadableStream { locked: false, state: 'readable', supportsBYOB: false }
and log of req like

🚀 ~ POSTCloud ~ req: NextRequest [Request] {
  [Symbol(realm)]: {
    settingsObject: { baseUrl: undefined, origin: [Getter], policyContainer: [Object] }
  },
  [Symbol(state)]: {
    method: 'POST',
    localURLsOnly: false,
    unsafeRequest: false,
    body: { stream: undefined, source: null, length: null },
    client: { baseUrl: undefined, origin: [Getter], policyContainer: [Object] },
    reservedClient: null,
    replacesClientId: '',
    window: 'client',
    keepalive: false,
    serviceWorkers: 'all',
    initiator: '',
    destination: '',
    priority: null,
    origin: 'client',
    policyContainer: 'client',
    referrer: 'client',
    referrerPolicy: '',
    mode: 'cors',
    useCORSPreflightFlag: true,
    credentials: 'same-origin',
    useCredentials: false,
    cache: 'default',
    redirect: 'follow',
    integrity: '',
    cryptoGraphicsNonceMetadata: '',
    parserMetadata: '',
    reloadNavigation: false,
    historyNavigation: false,
    userActivation: false,
    taintedOrigin: false,
    redirectCount: 0,
    responseTainting: 'basic',
    preventNoCacheCacheControlHeaderModification: false,
    done: false,
    timingAllowFailed: false,
    headersList: _HeadersList {
      cookies: null,
      [Symbol(headers map)]: [Map],
      [Symbol(headers map sorted)]: [Array]
    },
    urlList: [ URL {} ],
    url: URL {
      href: 'http://localhost:3000/api/admin/cloudinary/removeImage',
      origin: 'http://localhost:3000',
      protocol: 'http:',
      username: '',
      password: '',
      host: 'localhost:3000',
      hostname: 'localhost',
      port: '3000',
      pathname: '/api/admin/cloudinary/removeImage',
      search: '',
      searchParams: URLSearchParams {},
      hash: ''
    }
  },
  [Symbol(signal)]: AbortSignal { aborted: false },
  [Symbol(abortController)]: AbortController { signal: AbortSignal { aborted: false } },
  [Symbol(headers)]: _HeadersList {
    cookies: null,
    [Symbol(headers map)]: Map(21) {
      'accept' => [Object],
      'accept-encoding' => [Object],
      'accept-language' => [Object],
      'connection' => [Object],
      'content-length' => [Object],
      'content-type' => [Object],
      'cookie' => [Object],
      'host' => [Object],
      'origin' => [Object],
      'referer' => [Object],
      'sec-ch-ua' => [Object],
      'sec-ch-ua-mobile' => [Object],
      'sec-ch-ua-platform' => [Object],
      'sec-fetch-dest' => [Object],
      'sec-fetch-mode' => [Object],
      'sec-fetch-site' => [Object],
      'user-agent' => [Object],
      'x-forwarded-for' => [Object],
      'x-forwarded-host' => [Object],
      'x-forwarded-port' => [Object],
      'x-forwarded-proto' => [Object]
    },
    [Symbol(headers map sorted)]: [
      [Array], [Array], [Array],
      [Array], [Array], [Array],
      [Array], [Array], [Array],
      [Array], [Array], [Array],
      [Array], [Array], [Array],
      [Array], [Array], [Array],
      [Array], [Array], [Array]
    ]
  },
  [Symbol(internal request)]: {
    cookies: RequestCookies { _parsed: [Map], _headers: [_HeadersList] },
    geo: {},
    ip: undefined,
    nextUrl: NextURL { [Symbol(NextURLInternal)]: [Object] },
    url: 'http://localhost:3000/api/admin/cloudinary/removeImage'
  }
}

[colbyfayock]

hey @nhungnguyen-9 thanks for all of the examples and logs, though the logs don't seem to show the cloudinary response, which i would suspect would help solve why its not working, is that available?

the node method you're using appears to be right as long as the cloudinary instance you're using is configured with your environment variables and the public_id is probably passing through