Skip to main content

Refreshing image after updating

Comments

9 comments

  • Thomas Gurung

    Hi Justin,

    Thank you for reaching out. 

    Just to confirm, you overwrite existing images but the derived versions of the images are not getting updated with the new image? 

    If so, then you will need to overwrite the existing derived versions which you can do using the Explicit API

    So after overwriting the original asset, run the explicit call with the transformation strings (you can add multiple, separated by a pipe)  as part of the `eager` parameter, set `overwrite=true` and `invalidate=true` as well.

    Let me know if that helps.

    I'm looking forward to your response.

    Kind Regards,
    Thomas

    0
  • Justin Howard

    Thanks for your help Thomas! That's correct, I'm overwriting with a new image but the images are not updated. 

    Okay great so the Explicit API looks to be exactly what I need. I think I am close to getting it working, but I'm getting an error reponse: {"error":{"message":"Unknown API key "}}
    Here is my code, I'm getting my signature from the backend, successfully update the image, but my explicit call is failing. Do I need to generate a second signature or am I missing something else?

     

    // generating signature from backend
    api.get(`/images`).then((res) => {
    const {signature,timestamp} = res.data;

    const formData = newFormData();
    formData.append('file',localFile);
    formData.append('api_key',process.env.REACT_APP_CLOUD_API_KEY);
    formData.append('timestamp',timestamp);
    formData.append('signature',signature);
    formData.append('eager','c_pad,h_300,w_400|c_crop,h_200,w_260');
    formData.append('folder','booklists');
    formData.append('public_id',user.sub);

    // updating image
    fetch(url, {
    method:'POST',
    body:formData,
    })
    .then((response) =>response.text())
    .then((data) => {
    console.log('res from cloudinary',JSON.parse(data));

    // explicit call
    fetch(
    `https://api.cloudinary.com/v1_1/${process.env.REACT_APP_CLOUD_NAME}/image/explicit`,
    {
    method:'POST',
    body: JSON.stringify({
    public_id:user.sub,
    type:'upload',
    signature,
    api_key:process.env.REACT_APP_CLOUD_API_KEY,
    eager: {
    overwrite:true,
    invalidate:true,
    },
    }),
    },
    );
    });
    });

    Thanks again for helping!

    0
  • Thomas Gurung

    Hi Justin,

    Thanks for getting back. 

    So yes when you make the explicit call the parameters are different so you will need to generate another signature based on that. 

    Having said that, looking at your workflow, you don't even need to use the Explicit API actually. So when you overwrite the asset using the Upload API, just specify the transformations with the eager flag, along with `overwrite:true` and `invalidate:true`. Make sure the transformations match the existing derived for that asset or else we will just create a new one and existing ones won't be invalidated.

    So something like:

    // generating signature from backend

    api.get(`/images`).then((res) => {
    const {signature,timestamp} = res.data;
    const formData = newFormData();

    formData.append('file',localFile);
    formData.append('api_key',process.env.REACT_APP_CLOUD_API_KEY);
    formData.append('timestamp',timestamp);
    formData.append('signature',signature);
    formData.append('eager','c_pad,h_300,w_400|c_crop,h_200,w_260');
    formData.append('folder','booklists');
    formData.append('public_id',user.sub);
    formData.append('invalidate',true);
    formData.append('overwrite',true);

    // updating image
    fetch(url, {
    method:'POST',
    body:formData,
    })

    .then((response) =>response.text())
    .then((data) => {
    console.log('res from cloudinary',JSON.parse(data));

    Make sure overwrite and invalidate parameters are included when generating your signature as well.

    I'm looking forward to your response.

    Kind Regards,
    Thomas

    0
  • Justin Howard

    Thanks again for your help. I've followed your example and added those invalidate and overwrite params to the formData, but unfortunately the old image is still persisting after a successful image update. I've removed the upload transformations to simplify and I can confirm the image is uploaded in my Cloudinary Media Library. Refreshing doesn't help, but if I make a change to the advanced image transformation it will finally trigger it to fetch the updated image. For instance if I change the width argument here

    const cld = new Cloudinary({
    cloud: { cloudName: process.env.REACT_APP_CLOUD_NAME },
    });

    const myImage = cld
    .image(`booklists/${user.sub}`)
    .resize(thumbnail().width(40).height(40).gravity(focusOn(FocusOn.face())))
    .backgroundColor('#FFFFFF')
    .roundCorners(max())
    .effect(outline().mode(outer()).width(4).color('#195885'));

    0
  • Thomas Gurung

    Hi Justin,

    Thanks for getting back.

    Do you have the public_id of the image(s) where you tested this and didn't work? I want to check if we received all the parameters for it.

    I'm looking forward to your response.

    Kind Regards,
    Thomas

    0
  • Justin Howard

    Thomas, It should be "booklists/google-oauth2|108968739070494181045" Thanks!

    0
  • Thomas Gurung

    Hi Justin,

    Thanks for sending that.

    I checked and all the parameters are getting through to us. 

    Upon testing further, when you overwrite an existing image, you don't even need to pass the eager parameters. If your call has `invalidate=true`, then we will update the derived versions as well. 

    Are you testing with the same image? If so then, that may be why you're not seeing the cache clearing. 

    Can you test and overwrite with a totally unique image and specify the same public_id?

    I'm looking forward to your response.

    Kind Regards,
    Thomas

    0
  • Justin Howard

    Yes I was alternating between two images, but just tried again with another unique image and it still doesn't update my image. Thanks!

    0
  • John Roco

    Hi Justin,

    There seems to be nothing unusual with the logs for your upload of image booklists/google-oauth2%7C108968739070494181045.jpg.

    Accessing the delivery URL I am able to view the latest image uploaded (Shiba Inu). Perhaps you are accessing a version cached in your browser? 

    Can you please try to clear the cache or open the URL in an incognito window?

    If it is still showing the old image, can you please provide the old image?

    Looking forward to your response.

    0

Post is closed for comments.