I have a web screen in my application where I want to display some pictures previosly uploaded by the user in a table (think, like a small "picture album" online). After uploading the pictures and refreshing the table the images are displaying fine.

However, I've noticed that pictures have different sizes and the table that displays them gets weird after a while or if many pictures with different sizes are uploaded.

As such, I thought of 2 approaches to this and implemented the second one:

Approach 1)
Force the image to keep its aspect ratio and reduce its size after its uploaded (eg. I want ALL uploaded pictures to have EXACTLY 300px x 300px ), even before its saved in the database. So Id save only the "fixed" image in the database. I would like to know how to do this.

Approach 2)
I've added an "edit photo" button, where I can crop/resize the image using the Cropper Component available in Forge. This works but, for example, I cant "update" the cropped picture. For some reason it performs the update, the value gets updated in the DB, but its never displayed to the end-user. To fix this, I ended up deleting the old image and simply creating a new DB entry with the cropped image. I know this is not elegant.

So if you could guide me on how to implement Approach 1 and/or fixing Approach 2, I'd be very glad.

Thanks in advance.

Hi Bruno,

For approach one, you need a server side component that can check the image's dimensions. I don't think you can access the image data before it's sent to the server, so JavaScript wouldn't work.

For approach two, I'm not sure what you mean by not being able to "update" the cropped picture. It looks like a bug in your code somewhere.
What I meant is that, after the Update is performed (using the CRUD actions available with each entity) and "updating" the picture (aka a binary data attribute with the new value), even though that the value gets updated in the database table, even after performing an AJAX refresh the page isnt updated... while if I add a new entry in that table (Create instead of Update action) the image appears as expected... Maybe its related to the image cache attribute?
That might indeed be the cause. If you reload the page, I take it the new image is properly displayed?
yes, exactly
So what happens if you set the caching to "No Cache"?
I will try it today and let know of any results

I am having the same problem now. Any solution proven to be working?

I was having the same issue, and in my case it was caused by the browser cache. So the problem was that the browser was showing the cached image instead of requesting the updated one.

I solved it by adding an expression to my WebScreen with the following value:

"<meta http-equiv='cache-control' content='no-cache' />"

This tells your browser not to cache any content on that page. Don't forget to set the expression's "Escape Content" property to "No", so that it gets rendered as html.

The downside being that sensible caching, e.g. of style sheets and javascript, is also out the window. So use it with care!