How to show an updated image avoiding the browser cache

Wappler General How To
#1

I have an image which is dynamic and I’ve used the image manipulation features in Wappler to allow the person to rotate that image. It’s working perfectly but the result isn’t shown unless you clear the browser cache.

So, I’ve added +'?'+varNow.datetime to the src and created the Date and Time component and set it to update every second.

This works perfectly but it also means the image is being pulled from the server every second!

I only want to add something after the ? which I know is new and only once but I’m struggling with how to achieve this.

If I change the component to be every minute or longer, I’m back to having the cached version being displayed.

I’ve tried using the javascript Date.now() in the src but that’s not adding anything.

#2

What about if after the person does any manipulation it saves the image with a new file name and discards the old, then it cant be in the cache?

#3

Yep, I did wonder about that but it just seems a bit overkill. I’d have to update the database record every time, too, and delete the old image. Adding a random string to the src would be enough, I just thought that a datestamp was a good way of doing it.

#4

I would imagine so too, it’s the same way we get around the css cache issue, but just figured I would give you another possibility.

I suppose you could set a variable to say 0 and when the person does a manipulation set it to 1
Then make your date stamp conditional to only run when the var is 1.
Then on run that can set the var back to 0 so it only runs once.

#5

Perhaps you could use something like this:

image.jpg?v<?php echo filemtime('image.jpg');?>

#6

How would I get the ‘image.jpg’ to be the dynamic value? I still have problems with mixing javascript vars and PHP!

#7

With a static filename, this:
<img src="images/image.jpg?v<?php echo filemtime('images/image.jpg');?>">
would become:
<img src="images/image.jpg?v1307560119">
for example… which I think would solve the caching issue. I would have thought this would work in the same way for dynamic images. However…

It seems there is a problem with Wapper with this PHP. Saving a file with this code, Wappler replaces most of it like this:
<img src="images/image.jpg?v+++++++++++++++++++++++++++++++++++++++++++">

Unless this code is invalid for some reason (I wouldn’t have thought so - and it works as expected), it seems there are still a few issues with Wappler and PHP, so perhaps it’s not a good solution. I tested it by editing the code in a text editor after Wappler added the '+++'s.

#8

Can you test like this Tom

<dmx-value id="file1" value="<?php echo filemtime('{{imagebinding}}'); ?>"></dmx-value>

<img dmx-bind:src="imagebinding + '?v' + file1.value">

It’s out my head so syntax could be a bit off, but the concept is to run php inside the dmx variable, and when its php only use value="" rather than the standard dmx-bind:value=""

Just to complete this, I tried this when I got home and it does not work at all, please ignore it.

#9

Thanks @psweb and @TomD for all your help with this. I’ve managed a solution which was actually a lot simpler than I thought it would be.

I created a variable called ‘rotated’ with a value of 0. I then added that to the image src after the ?.

Then, as part of the success event I simply added 1 to the variable. And it works fine.

1 Like
#10

I am still working on this because I am a sucker for punishment, but now i am done, i give up, i can not get the filemtime appended to the filename, and I think its not much to do with the code, or idea, or syntax, it is just a case of timing, the php is trying to get the time of a file that only exists a few milliseconds later from the App Connect.
My brain is now fried from trying different things, but i at least think i know why, which is fine.

Glad you got it working though.

#11

I think it was a good idea and I think the code is correct. Eg if you create this variable:
<dmx-value id="file1" value="<?php echo filemtime('images/image.jpg'); ?>"></dmx-value>
… and display it on the page, it shows the correct value.

However, creating a variable wouldn’t work very well in a repeat for example, and adding the PHP where I initially added it should work. I think it’s a bug. Earlier there were quite a few cases where Wappler would overwrite PHP but there are not many now - but I think this is one of them.

#12

Would turning page caching off suffice?

     <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
     <meta http-equiv="Pragma" content="no-cache"/>
     <meta http-equiv="Expires" content="0"/>
Wappler + css with a parameter
#13

Those are all really good thoughts. I completely associate with the fried brain, @psweb!

Thanks again.

#14

That’s an interesting suggestion. I’ve never actually disabled caching on a page before despite knowing it can be done. As I’ve produced a working solution, I’m not going to think more on this but will remember that suggestion for the future.

#15

If it ain’t broke don’t fix it!

1 Like
#16

I had to close my test file and not save to stop myself, i was about to go down the rabbit hole again.

1 Like