Resize image using 'auto' in width or height not working

[Mennovandijk]

Thanks for reporting an issue! Spend 60 seconds reading this…

1. Before reporting, make sure you have the latest version of Wappler.
2. Make sure you have searched the forum first for similar issues being reported
3. If it is a general web related issue - do a Google Search first
4. Issue tracker is only for bugs and feature requests, in English only.
5. Learn how to report bugs effectively

======== TEMPLATE BUG FORM ========

Wappler Version : 3.6.1
Operating System : Mac OS Big Sur
Server Model: Node JS
Database Type: Maria/MySQL
Hosting Type: Docker

Expected behavior

Implementing the resize element and set the width to 800pixels and the height to ‘auto’, uploaded images should scale proportionally.
Using hard coded values in both fields does work, but this deforms the uploaded image if the proportions differ.

Actual behavior

the api gives an error

How to reproduce

• Detail a step by step guide to reproduce the issue
• A screenshot or short video indicating the problem
• A copy of your code would help. Include: JS, HTML.
• Test your steps on a clean page to see if you still have an issue

[psweb]

Just checking if this was fixed in a Wappler later than 3.6.1, a little nervous of updating mid project, but if needs must.

[patrick]

You can test following update, unzip it in lib/modules.

image.zip (2.2 KB)

[psweb]

After replacing the file, i restarted Wappler, redeployed, refreshed my browser, however on getting the folder listing now, before i even get to the crop, resize area, i get the following error

[patrick]

Could you show the start of the response, it probably shows an error message there

[psweb]

Not sure I added the response right, but i get this

[patrick]

Thanks, already see the error. Here a new file.

image.zip (2.2 KB)

[psweb]

A little strange, its just returning null, no error but a null Preview.

If I disable the repeat after the Folder List then it shows the folder list, so i am just testing if it is the Load Image step causing the problem possibly

[psweb]

Took my newly added response step out and now its working, just testing the resize and crop

[psweb]

Error on the cop and resize of

Here is my server action for that.

Resize is Width auto and height 1080
Crop is Center middle width: 1920, height: 1080

On a side not when testing with numbers in both fields, so without using auto then if i disable crop then resize works, and then disable resize and crop works, so it’s like they just do not work together.

[patrick]

What did you pass as options?

[psweb]

Here are all 3 steps

1. I upload some images from a drop zone
   

   
   
   They get added to my docker volume

2. Onsuccess of upload the next server action runs to show the folder listing
   

   
   
   I need to get more info about each image from my database so I add a repeat after the folder list, and get the data, then a load image step so i can get the image dimensions.

3. If a certain image i see while going through the list is too big or wrong proportions for what i want, i click a button that runs the server action to load image, resize, crop, and save back to the Docker volume,
   

   
   
   On Success of crop, resize, save, it reloads server action 2 to get the folder listing again and show the new sizes.

Hope this makes sense.

Edit, it takes a while to test, because no matter what I do I can not get it to reload the cache, so I have to redeploy even without making changes so the cache refreshes and i can see the new sizes, although i have used refresh cache in the appconnect side when loading my server actions, so not sure why.

[psweb]

Should I update Wappler Patrick from my 3.6.1 to the latest, and try again?

[patrick]

It shouldn’t matter for this specific module.

[patrick]

Here a new update.

image.zip (2.1 KB)

[psweb]

Same error i think

I did notice that the json now has no width while before it had "width": "",
Dont know if that helps at all.

[patrick]

Could you send me the full stacktrace of the error, have to trace back where the NaN is coming from.

[psweb]

{status: “500”, message: “Expected positive integer for width but received NaN of type number”,…}
message: “Expected positive integer for width but received NaN of type number”
stack: “Error: Expected positive integer for width but received NaN of type number↵ at Object.invalidParameterError (/opt/node_app/node_modules/sharp/lib/is.js:101:10)↵ at Sharp.resize (/opt/node_app/node_modules/sharp/lib/resize.js:214:16)↵ at App.resize (/opt/node_app/lib/modules/image.js:176:21)↵ at App._exec (/opt/node_app/lib/core/app.js:427:57)↵ at App._exec (/opt/node_app/lib/core/app.js:398:28)↵ at async App.exec (/opt/node_app/lib/core/app.js:367:9)↵ at async App.define (/opt/node_app/lib/core/app.js:357:9)”
status: “500”

[patrick]

Added an extra check for NaN value.

image.zip (2.1 KB)