In typescript in react app

[SahadevDahit]

await Cloudinary.uploader.destroy("");
shows error:- Property 'uploader' does not exist on type 'typeof Cloudinary'.ts

[jroco-cloudinary]

Hi, good day!

Can you please help to provide the declaration and the code snippet where you encounter the error? I tried to call the same command and it was completed successfully.

Here is the code I used:

require('dotenv').config();
const cloudinary = require('cloudinary').v2;

cloudinary.uploader.destroy("img1")
    .then(result => {console.log(result)})
    .catch(error => {console.log(error)});

Response:

{ result: 'ok' }

[SahadevDahit]

In react typescript(tsx) file when i write this i get error
import { Cloudinary } from "@cloudinary/url-gen";
const Createchallenge = () => {
const handledelete = () => {
Cloudinary.uploader.destroy("");
};
}
return(
<> </>)
export default Createchallenge

Error message:-'uploader' does not exist on type 'typeof Cloudinary'
Actually i want to delete the image from the cloudinary from react with typescript project although i can upload image.

[jroco-cloudinary]

Thanks for your response.

@cloudinary/url-gen class is used for generating URL delivery in the front end and does not support the destroy method.

To delete images, you will need to call your backend and invoke Cloudinary destroy method as I have shown in my previous response(using Node.js). Deleting images will require your API key and API secret, exposing it front-end is not advisable. You can read more about the destroy API here.

However, there is a way to delete assets from front end. jQuery library supports using a delete token to delete assets on the client side for a limited time of 10 minutes after being uploaded. After 10 minutes have passed, the image cannot be deleted from the client side, only via the Destroy method of the Upload API or using the delete_resources method of the Admin API.

Hope this helps clear it up. Please let me know if you successfully implemented it.