Resize and crop image before upload

Wappler General Need Help
1

Hi
i’m trying to resize a photo before crop it but it doesn’t work. Can someone tell me where It is wrong?

Capture d’écran 2021-01-04 à 13.42.33
Capture d’écran 2021-01-04 à 13.42.33688×736 58.6 KB

Capture d’écran 2021-01-04 à 13.42.56
Capture d’écran 2021-01-04 à 13.42.56686×800 46 KB

Capture d’écran 2021-01-04 à 13.43.06
Capture d’écran 2021-01-04 à 13.43.06704×326 18.3 KB

Capture d’écran 2021-01-04 à 13.43.15
Capture d’écran 2021-01-04 à 13.43.15700×382 16.6 KB

Capture d’écran 2021-01-04 à 13.43.23
Capture d’écran 2021-01-04 à 13.43.23698×662 33 KB

Capture d’écran 2021-01-04 à 13.43.29
Capture d’écran 2021-01-04 à 13.43.29702×298 16.3 KB

Capture d’écran 2021-01-04 à 13.43.37

Capture d’écran 2021-01-04 à 13.43.43
Capture d’écran 2021-01-04 à 13.43.43690×636 33.2 KB

I can’t select the path of the cropped image but only the original uploaded image

Capture d’écran 2021-01-04 à 13.44.11
Capture d’écran 2021-01-04 à 13.44.11900×1196 68.3 KB

Thanks

2

Hi.
Do you see any error in the response? You can check the network & console tabs in browser developer tools.

3

Capture d’écran 2021-01-04 à 14.28.19
Capture d’écran 2021-01-04 à 14.28.193276×388 131 KB

if i disable the file upload the status is OK but the database is not updated

I use a form in datadetails container that bind informations from a database.
When i select a row from a bootstrap table, the form is filled with informations.
Maybe could be this the problem?

4

Data details & bootsrap tables are part of the client side setup.
To check if there is any issue with that, take a look at the network tab in browser dev tools and look at the form body part of it. Something like this:

image
image638×816 25.5 KB

If you see all the relevant information being passed, your client side setup is fine.
Next in the server side setup, i.e. the server action, disable all the steps and re-enable them one by one to check which step leads to failed response.

5

Hi sid
thanks for your reply. Now it works but I cant get the cropped uploaded image path. I can select only the original uploaded file.

Capture d’écran 2021-01-04 à 13.44.11
Capture d’écran 2021-01-04 à 13.44.11900×1196 68.3 KB

As you can see in the above picture, the only path I ca select is the file original file uploaded.
What I need is the path of the cropped image, so i can update the image field.

6

I have not really used this. So not sure if I can help correctly.
What you can try is set the output on for crop image, check in the browser for response of the server action. If you see it in the JSON, you can try to use that directly in the binding. Use the CODE tab for writing bindings manually.

You can also try to check if save image returns anything by setting output on.
This could also be a bug or possible enhancement.

7

ok thanks sid

8

Your Save Image step should have a name:
image
Just to make sure it is saved before the insert/update I have a condition step but it is optional.
image
Then in the field you are updating, you should be able to click the saveImage step to add it.
image
If it doesn’t work through the picker, you can add the name in the handlebars:

image
image1160×230 20.9 KB

@george, the SC data picker doesn’t show the assigned name to the Save Image step, perhaps it could be added to help identify it in complex API files.

9

Please file a separate issue

1 Like
10

Hi George
I missed the word “crop” and “upload” in the title, so I change to better understand.

11

Feature request created here: