Database Image Update not working

Bruno

Question

Hi,

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.

Bruno

09 Mar 2016

Kilian Hekhuis

MVP

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.

09 Mar 2016

Bruno

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?

09 Mar 2016

Kilian Hekhuis

MVP

That might indeed be the cause. If you reload the page, I take it the new image is properly displayed?

09 Mar 2016

Bruno

yes, exactly

09 Mar 2016

Kilian Hekhuis

MVP

So what happens if you set the caching to "No Cache"?

09 Mar 2016

Bruno

I will try it today and let know of any results

10 Mar 2016

cgabriel

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

15 Jul 2016

Aurelio Junior

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.

07 Sep 2016

Kilian Hekhuis

MVP

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

07 Sep 2016

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.

See the full guidelines