no response from destroy method of cloudinary

0
votes

I am trying to delete the images from the client-side but destroy method not working, does not delete the images and at the same not giving me any error.

I am working with React.js and this is my method:

    deleteProductHandler = id => {

db.collection("products")
  .doc(id)
  .delete()
  .then(() => {

    // update the UI
    const products = [...this.state.products];
    let images = [];
    products.forEach((product, index) => {
      if (product.id === id) {
        products.splice(index, 1);
        images = [...product.images];
        this.setState({ show: false, products: products });
      }
    });

    // delete images from  cloudinary
    let links = images
      .map(link => {
        return link.match("products/");
      })
      .map(link => {
        const newlink = link.input.slice(link.index);
        const newlink2 = newlink.slice(0, -4);
        return { publicId: newlink2 };
      });

    let publicIds = [];
    for (let key in links) {
      publicIds.push(links[key].publicId);
    }

    console.log(publicIds);  
    // i got all publicIds here without any problem.
    // so dont wory about the code above.
    
    publicIds.forEach(publicId => {
      console.log(publicId);
      window.cloudinary.v2.uploader().destroy(publicId, (err, res) => {
      console.log(err, res);
      });
    });
  })
  .catch(err => {
    this.setState({ error: err });
  });
  };

this is the documentation of destroy method: https://cloudinary.com/documentation/image_upload_api_reference#destroy_method

what I am trying to get in here is that when the user deletes a product, automatically its images will be deleted from cloudinary.

2
javascriptreactjscloudinary
How are you providing authentication to the Cloudinary API? With the notable exception of the upload API which supports unsigned uploads in some cases, you can't generally use the API from client-side code like React (because there's no safe way to create a signature in client-side code, and if you're making a server-side call to fetch a signature from your backend, your backend could also just call the Cloudinary API directly) – Igy
Also, do you see a request made to the API in your browser's network tab? Is there a response being sent but not appearing in your React code, or no call is actually made? – Igy
as far as I know, destroy method does not need a signature it will be generated automatically and in my case, it's an unsigned upload. – Hawre Kamal
and no call is made at all. – Hawre Kamal
The destroy method certainly needs to be authenticated, and that authentication is based on a signature generated by the SDK using your account's API secret, which cannot be used in client-side code directly. That said, if no HTTP request is made, the first problem is likely in the Javascript code itself and you'll see the authentication error if that's resolved. In general, if you're trying to calling methods from the NodeJS SDK in frontend code, it's probably not going to work due to missing dependencies, but I'd expect an error to be shown somewhere - you don't see anything in the console? – Igy

2 Answers

1
votes

I think the extra () after uploader might be the problem.

It should be

window.cloudinary.v2.uploader.destroy(publicId, (err, res) => {
      console.log(err, res);
      });
0
votes

It's not possible to delete images from the client-side directly because there's no way to authenticate such a request using details stored in the client - if you had your account's API secret available to the client, any of your users could use that secret to make arbitrary API calls to your account.

In my app, I don't have any server-side component because I was working with firebase firestore, and what I am trying to do in the code above is to render destroy method in the client-side code, which is not possible.

instead, you need a server-side component probably in node.js. that's a logical place to add a controller to handle deletion or other similar actions.