Current set-up : SPA Pages, Windows 10, MySQL, PHP
I am trying to add simple buttons to edit images, in this example a left rotate and right rotate button. I want the user to press the button, and then the image refreshes in the rotated position.
Whatever I try doesn’t seem to work. What are the basics of what I need to do? This is always an action separate from the upload and therefore NOT part of the upload script.
You need a separate server action, containing load image, rotate image (left/right) and save image steps.
Run it on button click and then onsuccess run the file list server action, so you can see the changes on the page.
I did exactly this on a site where people uploaded their own photos and it works perfectly. One thing to bear in mind, though, is the browser cache. You will likely find that the image is rotated but the browser shows it as it was. I got round this by adding ?timestamp (where timestamp is the number) so it was always a fresh URL so the browser showed the updated image.
Btw - how are the images uploaded? Using a phone?
Have you tried using the Auto Orient option for the load image step in the upload server action - probably it will solve the wrongly rotated images.
Many thanks Teodor, just what I wanted.
Yes, I use the Auto Rotate and it works well.
The issues I have are that images for this particular system are uploaded from all different devices, a large majority from desktop and laptop computers. These images can come from phones saved to desktop, or digital camera saved to laptop, or even images saved out of PDF documents and other computer generated documents. A real mix of sources and so not always a known source, sometimes already manipulated or edited in a graphics programme. Also, my client sometimes wants to use an image in a report at a different rotation to that when taken because it makes more sense in relation to the report. All reasons to give the system user the tools to change the image.
The other issue is that the PDF generator I use (html2pdf.fr) puts the image back to the original orientation even though I have used the Auto Orient function, and this is why I want to see a Wappler integrated PDF generator Pdf generator/export
More and more images will come from mobile devices but never exclusively, and that is why I am still desperate to see Client-side image resizing before upload - Megapixels (Mb) rather than Image Resolution (pixels) implemented ASAP 
to ensure images uploaded are no larger than needed.
Thanks Jon, I read one of your posts this afternoon talking about this and have already saved the idea for use in this functionality. Cheers.
Hi Teodor,
I’m sorry to come back to you again for this but I need further guidance.
<button id="btn_counter_clockwise" class="btn btn-sm btn-link" dmx-on:click="sc_rotate_img_left.load({img_path: directory+'/'+image})"></button>
On saving the image, how do I ensure the image is saved in the same location as the original image if the original image came from a dynamic location like this?
Why not use the same path there?
Even though it doesn’t have a dynamic picker? That was the only reason why I didn’t put that in.
That's confused me, too. Could really do with a dynamic picker there.
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 
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?
Can anybody help with this?
You can force image src to reload adding something like:
<img dmx-bind:src="serverconnect1.state.executing ? '' : ('..' + directory + '/' + image + '?' + <?php echo Date('U') ?>)" height="auto" style="max-width: 125px;">
where serverconnect1 is the server action which lists the data on the page. It will cause images to flick, but that’s how to force it reload the src, without the data being changed.
the logic here - while server action is executing, replace the src with an empty string ' ' , then put the image path back after the server action loads.
Hi @Teodor, that works brilliantly, thank you.
I am happy to use that as it is, it works great, but I have one question…
This refreshes all the images in a list and so if I rotate one image in a list of 20, it will reload all 20 images. Is there a simple way to reload just the one rotated image? Something like
<img dmx-bind:src="serverconnect1.state.executing && (this.img) ? '' : image">
or
<img dmx-bind:src="serverconnect1.state.executing && (buttonID.clicked) ? '' : image">
If not then I am happy to use your initial solution.
You can do this. Add a variable on your page, and on click of the button pass the image ID to it, in the same onclick event as you are using to run the rotate.
Then in the expression use:
<img dmx-bind:src="serverconnect1.state.executing && var1.value == imgID ? '' : image">
where var1 is your variable and imgID is the image ID returned by your query/repeat.
Superb!
That works really well, I am so pleased with the result of this. Might only be a small feature but it will make such a big difference.
@teodor I’m trying to do the same thing. Image will rotate but have to manually refresh the page to get it to rotate on page. I know my variables are being passed correctly. The image that was just processed blinks but it still doesn’t update the image to the rotated one.
<img dmx-bind:src="conn_existingPhotos.state.executing && varImage_id.value == image_id ? '' : '/boats/'+boat_id+'/thumb_'+image" class="img-fluid rounded" dmx-class:img-thumbnail="(primay_image == 'true')">
In above example you have ‘image’ as a variable in the expression. I have the whole path. Do I need to set the path to an ‘image’ variable for that to work?