Custom Action and Events

Nico · 2025-03-14T10:43:09.056+00:00

hey guys, quick question here. I use a custom action to create a JPG Mask of a drawing (using HTML Canvas).My Script allready has a function to download the jpg on button click build in.But now i need to send it this image to a API using a "Submit" Event on a form. I cant wrap my head around the concept of Events in Actions.. any ideas on this?

Nico
1 year ago
hey guys, quick question here. I use a custom action to create a JPG Mask of a drawing (using HTML Canvas).
My Script allready has a function to download the jpg on button click build in.

But now i need to send it this image to a API using a "Submit" Event on a form.

I cant wrap my head around the concept of Events in Actions.. any ideas on this?
J.ulian
1 year ago
Not sure what you mean...
The form submit event can trigger a workflow that calls your API with a POST method and the image as payload in a format that is suitable for your backend/cdn? What part exactly is causing the confusion?
@J.ulian
Not sure what you mean...
The form submit event can trigger a workflow that calls your API with a POST method and the image as payload in a format that is suitable for your backend/cdn? What part exactly is causing the confusion?
Nico
1 year ago
sorry, i think the problem is that i dont know what my problem is. Let me make it more clear:

1. Page loads: a custom Action initializes a HTML Canvas
2. the user can draw on that canvas
3. when the user presses the "download" button it should download the drawn image

so far this works! All within one action.. the js script generates the downloadbutton, all good.

my problem now is that i want the script to set a Variable inside toddle once the download button is hit. The Value of this needs to be the Blob of the drawn image.

Maybe my setup is incorrect, but i dont know how to do it better..
J.ulian
1 year ago
Interesting puzzle, Nico. I am in no way an expert in this area. What I do know is such async actions do take a tiny bit of time to populate a variable value. Could it be a timing issue that you are trying to submit some payload that does not (yet) exist?

Try console log the blob and see if there is any value immediately after setting the variable and after some time.
Lucas G
1 year ago
Just pass the blob back via custom action event
ctx.triggerActionEvent(‘file’, blob)
J.ulian
1 year ago
Well that is interesting and very simple. Haven't used this before myself
Nico
1 year ago
@NoCode ProCode told me this solution yesterday but using base64. Works pretty good so far! The hole concept of ctx and how actions can trigger windowfuntction in other actions is super interesting, thanks @Lucas G
Max
1 year ago
I would avoid writing to the window object whenever possible. It is usually not needed and it can cause issues that are hard to debug
Nico
1 year ago
@Max Interesting, how would you write the base64 code from the function to a variable? (or trigger the function inside a different action in the first place)
@Nico
@Max Interesting, how would you write the base64 code from the function to a variable? (or trigger the function inside a different action in the first place)
Max
1 year ago
Just like Lucas said. You can trigger a callback in an action. The you can store it in a variable
Nico
1 year ago
but can i also call a function in different action that way?
Max
1 year ago
No. And why would you? You can chain actions, if you like
Nico
1 year ago
hmm maybe i dont understand things right but my first action initialises a html canvas where the user can draw a mask, it also contains a function to extract that mask into a jpeg file

but this should only happen when a button is pressed. Thats why i use a different action i can call in a workflow to trigger the function inside the first action (that i cant initialise again or else my canvas is gone :D)
@Max
I would avoid writing to the window object whenever possible. It is usually not needed and it can cause issues that are hard to debug
NoCode ProCode
1 year ago
Needed to be done in Nico’s example - he is building a custom coded inpainting canvas.
@Lucas G
ctx.triggerActionEvent(‘file’, blob)
NoCode ProCode
1 year ago
Last time I checked he was using that for callback of data - window was only used to adjust the brush size for the sake of ease of use (for adjustment while the code was already running). Like window.brushSize(25)
@Nico
hmm maybe i dont understand things right but my first action initialises a html canvas where the user can draw a mask, it also contains a function to extract that mask into a jpeg file

but this should only happen when a button is pressed. Thats why i use a different action i can call in a workflow to trigger the function inside the first action (that i cant initialise again or else my canvas is gone :D)
Lucas G
1 year ago
I have a signature pad and a pair of clear/submit buttons. The event listeners for those buttons are set within the function that I'm using to setup the canvas and when the submit button is clicked, it sends the base64 encoded SVG to a variable after which it is saved to a database
It doesn't use window
👍1
Lucas G
1 year ago
I didn't understand why window was needed here but it's likely there are other ways of setting things up

Custom Action and Events

Nico

J.ulian

Nico

J.ulian

Lucas G

J.ulian

Nico

Max

Nico

Max

Nico

Max

Nico

NoCode ProCode

NoCode ProCode

Lucas G

Lucas G