Update image in modal, won't update

I have an image in a modal and the src comes from a text-input.
When I update the image using another modal which saves the image as the same file name as the first one, it will not update the image in the original modal.

However if I delete the g out of the .jpg in the text input and then retype it will update the image.
Is there a way to get this to do it automatically. ?
I have tried added model update, but this does nothing.

Sounds like a caching issue?

1 Like

I got round this by adding a value to the end of the src like this:

myimage.jpg?value=12345

and make sure the number is different each time.

Are you uploading files of the same file name or different file names? If it’s the same name it is most likely a caching issue.

it if a different name but it get renamed to the original file.

ok will have a look at this and see if it will work

That would be caching, then, as the page is still looking at the same filename. Adding ?var=something should fix that. Just make sure the value after the = changes.

2 Likes

Yep, that worked what I did was on the image upload at the end I added a set value=timestamp (with an output)
On the image input I have included the ?v= which works perfectly.
Thanks for pointing me in the right way @sitestreet

1 Like

Glad that worked for you. Can you share the code used to put the timestamp there? I wanted to do that so it guaranteed a unique value but the only way I found was using the DateTime component to get the current time but it meant the image was re-downloaded every second!

I’d be keen to know how you got a static timestamp which wasn’t constantly updating.

@sitestreet here you go:

  1. On the action steps make your last step a set Value unq={{TIMESTAMP}}
  2. On the action for the form for success, add an update Filename+’?v=’+unq

Simple as that. Every time the upload action steps run, then it gives you a new timestamp. As the image only really needs to be updated if it’s changed.

Hope that helps.

Screen Shot 2020-04-22 at 05.49.57

1 Like

Brilliant. Thanks @gunnery - it was the {{TIMESTAMP}} I wasn’t aware of. Should have guessed it existed, though!

I shall now change my own implementation to use that instead as it’s much more reliable. At the moment I have set a variable to 0 and then add 1 to it every time an image is edited (I’ve given site members the facility to rotate images). But if the page is refreshed then the value goes back to 0 again and the cache does some odd things!

1 Like

Another reason why Wappler and this community is so great. People can be experts in one area but still need help in others (sounds like I’ve self-proclaimed myself as an expert… sorry, I definitely am NOT!)

1 Like

Many heads working on a problem is always better than one :slight_smile:

1 Like

Hmm, I’ve just realised your solution is using server actions whereas I want it App Connect. I don’t want to store the value but just use it when displaying the image.

So my page would have something like:

<img dmx-bind:src="imagefilename+'?'+TIMESTAMP">

but that doesn’t work.

Can anyone help with this?

You can use PHP for this:

<img dmx-bind:src="imagefilename + '?' + <?=Date('U')?>">
1 Like

Perfect. And I’ve taken it slightly further and set the value of my variable to:

<? echo Date('U')?>

which means I can still increment it after rotating and it updates the page automatically. :slight_smile:

1 Like

Morning @sitestreet and @Teodor, why does this not work on my page?

<img dmx-bind:src="'..' + directory + '/' + image + '?' + <?=Date('U')?>" height="auto" style="max-width: 125px;">

Nor does this…

<img dmx-bind:src="'..' + directory + '/' + image + '?' + <? echo Date('U') ?>" height="auto" style="max-width: 125px;">

The above two variations fail to show an image.

And yet my original does works without the added date part…

<img dmx-bind:src="'..' + directory + '/' + image" height="auto" style="max-width: 125px;">

Should I be escaping the <, > and ? ?
Should I be using <?php and ?> ?
Any ideas?

EDIT
This worked

<?php echo Date('U') ?>

Morning @sitestreet and @Teodor, I cannot get the file list on the page to refresh. I have added php date to the img src like this

<img dmx-bind:src="'..' + directory + '/' + image + '?' + <?php echo Date('U') ?>" height="auto" style="max-width: 125px;">

which is adding a unique number like this

/web_upload/web_upload_1/20190830_113455.jpg?1596017690

but the image is not refreshing. If I press F5 on the page then the image will refresh.

I have a Server Connect / Server Action which goes off,
finds the image,
rotates it,
saves by overwriting the original file,
On-Success loads the Server Connect / Server Action which is used to display the list

But the file list on the page does not refresh.

LIGHT BULB :bulb: MOMENT ?!?!

I am not uploading or updating anything into the Database, therefore nothing is changing in the Server Connect / Server Action and therefore nothing has changed to update, so the page will not refresh. Only the image file in the directory has changed.

Is my thinking correct?

So I cannot refresh using On-Success. Or can I?

HELP? :smile:

Hi @gunnery, I know this is 9 months old but it maybe just what I need. My problem sis that I don’t know what you mean by item 2. as highlighted here. Can you explain a little more?

I am trying to refresh the image when a ‘rotate’ button is pressed as per

image

Rotate left button is like this

<button id="btn_update" class="btn btn-sm btn-link" dmx-on:click="var_btn_type.setValue('left');var_rotate_id.setValue(instr_img_id);sc_rotate_img_left.load({img_path: file_path, img_file: file_name+'.'+file_ext})" name="btn_update_left" type="submit" value="lefty"><i class="far fa-undo fa-fw fa-lg"></i></button>

When this button is pressed the file is rotated in it’s Windows explorer folder but is not shown on the browser page. If I press F5 then the image refreshes.

I assume your ‘on-success’ sets a variable but what is that variable doing?
I couldn’t tell what was happening in your second screenshot.

Hopefully you remember that far back :slight_smile:

from memory all it was doing was adding something different in the url, If I remember correctly I ended up adding a timestamp on the end of the url, so each time it was different.
Its basically a cache issue.