Avatar image cache

Dear community,

I have problem with Cloudflare, we have on our website avatar and when user change avatar it is not changed because of Cloudflare cache i think :thinking:. I try to create Page Rules and setup Cloudflare to not cache the specific folder where is avatar location but it is still not working :frowning: it is only working when i open direct img link and click refresh button on the browser but on website when i click refresh not working. I try insert in my php in adressbar file something like ?nocache=true and also on the img link of avatar in html code but still not working.

Page Rules
websiteadress/admin/images/*

Please can someone assist me and help.
Thanks in advance

Is the new avatar replaced with old one, but contains the same filename and path? :thinking:

If so, I’d suggest you to implement some mechanism to add random string to the filename upon upload into your PHP app.

By default, it’s cached as far as Cache Level: Standard is set at the Caching tab → Configuration at Cloudflare dashboard for your domain name.

Otherwise, as you are suggesting to use Page Rule for the specific path websiteadress/admin/images/* and adding Cache Level: Bypass.

There might be some other workarounds, but currently I am out of ideas.

Kindly and patiently wait for another reply.

1 Like

Dear Fritex,

First of all many thanks that you reply :pray:

  1. Yes the avatar is replace with old one at the same folder location and same file name :frowning:

  2. But if I add random string to the filename upon upload then I will have everytime new image file at the server when user change avatar. Please reply if you mean something else.

  3. Yes i setup the PAge Rule with Cache Level: Bypass
    https://ibb.co/QQHP041

  4. And I also try to add ?nocache=true to the adressbar in php file and in the html code but still nothing help :frowning:
    https://ibb.co/fvmSXGp
    https://ibb.co/k3NbgZj

Thanks in advance
Kind Regards

You can set a shorter cache TTL for avatar image URL paths i.e. 24hrs and just in your web app add a notice to say avatar changes take effect after ~24hrs. Not ideal but a compromise to be made which still allows caching rather than a cache bypass. You can also set avatar cache ttl lower i.e. 6hrs, 12hrs etc.

As to the page rules not working, the order of the rules also matter, so make sure you have them ordered correctly.

1 Like

Dear Eva,

Many thanks for your reply.

It is possible to setup TTL cache (6hrs, 12hrs etc.) only for the specific image (avatar) on website not for the whole website?

What you mean with “As to the page rules not working, the order of the rules also matter, so make sure you have them ordered correctly.” can you explain to me little more.

Thanks in advance
Kind Regards

Page rules support Edge Cache TTL settings https://developers.cloudflare.com/cache/about/edge-browser-cache-ttl/

Edge Cache TTL

Edge Cache TTL (Time to Live) specifies how long to cache a resource in the Cloudflare edge network. Edge Cache TTL is not visible in response headers and the minimum Edge Cache TTL depends on plan type.

  • Free - 2 hours
  • Pro - 1 hour
  • Business - 1 second
  • Enterprise - 1 second

For more information on creating page rules, see Create page rules .

As to order of rules, if you have 2 rules operating on similar paths but one set to bypass and another set to cache, the order from top to bottom will determine which rule has priority.

1 Like

If you want to keep the filename the same, you could programatically do an API call to Cloudflare and remove the individual image from the cache when it’s updated (i.e. your user uploads a new one). Have a look at Purge Files by URL.

2 Likes

Dear jwsd,

Thanks for your reply.

The problem is that every user have own file for avatar 100 users = 100 image files.
But i can on free only create 3 Page Rules and the Purge Files by url with API is little too much for me I am not the programer :frowning:

With the Page Rules, there is some kind of bug or whatever. When I change avatar, finishing upload new image if I click on the homepage on my browser which is google.com and then click back button to go to my website everything is working the website show the new image of avatar what is uploaded :thinking:
5

Maybe some video tutorial link will be nice to have!

Thanks in advance
Kind Regards

For $5/month, you get 5 more, in case if needed → and Bypass not working? :thinking:

When you try access/open the URL of the avatar of that user in another Web browser, you see “old” or “new” one? :thinking:

It is the web browser cache I think if Bypass is set using a Page Rule for specified path “directory” where images are uploaded and replaced.

  1. Using Page Rule, make sure it’s on Bypass.
  2. Set Browser Cache TTL to “Respect Existing Headers” under the Caching tab → Configuration

Can you share an example URL of the avatar? Just so we could chech HTTP headers for it which your origin host/server is sending.

I see “radnik-1.jpg” in a filename, may I ask are you from Balkan states :croatia: :slovenia: :serbia: :bosnia_herzegovina: maybe or just a test / example? :thinking:

Are you limited somehow by the disk space or the count of the files on the origin host/server/hosting provider?
I assume the avatars pulled from database for the each user?
And I assume the web server doesn’t cache files or do you this kind of information maybe?

1 Like
  1. it is setup to bypass and the avatar img location is on the link websitelink/admin/images/*

  2. i never change Browser Cache TTL by default is Respect Existing Headers.

can you contact me over skype {REDACTED}

1 Like

Dodao sam te :slight_smile: :croatia:

1 Like

Feedback for anyone else who might have some idea …

Interesting:

It’s on a sub-domain.

Hosting provider ifastnet.com which offers Railgun connection → not active, disabled.

Caching Level: Standard
Borwser Cache TTL: Respect Existing Headers

Page Rule for assets on that sub-domain assets/* using 1 Page Rule:
Cache Level: Bypass

Transform Rule for HTTP Response Header Modification rule:
If hostname contains sub-domain
URI path contains assets/*
→ Set static: cache-control: max-age=0, no-cache, no-store, must-revalidate, private
→ Remove expires

Image resources gives:

cache-control: max-age=2592000, public, proxy-revalidate
cf-cache-status: DYNAMIC
expires: in 2 days
last-modified

Upon browser referesh - it shows correct, the “new” uploaded image (which is successfully replaced with the old one).

UPDATE:
And yet, no hosting access so I cannot provide more feedback in that terms.
Will post an update.

UPDATE 2:
When I disable Cloudflare, I am afraid caching configured on hosting provider (cPanel used) → Nginx used for “static files” cache as far as “.htaccess” file doesn’t contain any particular HTTP headers for it:

slika

UPDATE 3:
When htaccess file is modified and origin is sending the needed HTTP headers, working fine (despite above settings on Cloudflare):

# Tomislav Skype Fritex Cloudfalre, 2022 - fix
RewriteEngine On
<FilesMatch "\.(jpe?g|png|gif|webp)$">
  FileETag None
  <IfModule mod_headers.c>
    Header unset ETag
    Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
    Header set Pragma "no-cache"
    Header set Expires "Wed, 12 Jan 1980 05:00:00 GMT"
  </IfModule>
</FilesMatch>

No issue when new image is uploaded and replaced, it shows the new uploaded one immediately in the web browser.

Somehow I believe Nginx’s default config was sending those HTTP headers, which I overwritten by the htaccess file.

Working now.

Conclusion:
And, somehow Page Rule “bypass” (okay, returns DYNAMIC - good) and Transform Rule for “no-cache” at Cloudflare does not seem to override them (those sent via Nginx “by default” I believe) :thinking:

2 Likes

This topic was automatically closed 3 days after the last reply. New replies are no longer allowed.