Refreshing image after updating
Hello, I'm having trouble getting a refreshed image in my application after it is updated. Using the React SDK, the old image persists until I make a change to the transformation code which finally seems to trigger it to update. After reading around I've tried setting {invalidate:true} in the request params, but had no luck with that either.
Is there a way to accomplish this with built in functionality? or will I have to do something like save the new image url to my database and use that to display the image?
-
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,
Thomas0 -
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 -
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,
Thomas0 -
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 -
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,
Thomas0 -
Thomas, It should be "booklists/google-oauth2|108968739070494181045" Thanks!
0 -
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,
Thomas0 -
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 -
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.
Comments
9 comments