Pricing Blog

Custom Action and Events

  • francomelanieh-1350056653592068177

    Nico

    4 months 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.ulian4976-1350552126639571054

    J.ulian

    4 months 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?
  • francomelanieh-1351148237834158092

    Nico

    4 months 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.ulian4976-1351202174197305397

    J.ulian

    4 months 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.
  • lucasg-1351216853783019560

    Lucas G

    4 months ago

    Just pass the blob back via custom action event
  • ctx.triggerActionEvent(‘file’, blob)
  • j.ulian4976-1351270029022331084

    J.ulian

    4 months ago

    Well that is interesting and very simple. Haven't used this before myself
  • francomelanieh-1351466503102267453

    Nico

    4 months 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.kayr-1351471108850843670

    Max

    4 months 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
  • francomelanieh-1351471558744473643

    Nico

    4 months 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)
  • max.kayr-1351472598696853504

    Max

    4 months ago

    Just like Lucas said. You can trigger a callback in an action. The you can store it in a variable
  • francomelanieh-1351475404883628176

    Nico

    4 months ago

    but can i also call a function in different action that way?
  • max.kayr-1351476336098807909

    Max

    4 months ago

    No. And why would you? You can chain actions, if you like
  • francomelanieh-1351485429832224829

    Nico

    4 months 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)
  • nocodeprocode-1351534786749010003

    NoCode ProCode

    4 months ago

    Needed to be done in Nico’s example - he is building a custom coded inpainting canvas.
  • nocodeprocode-1351536961080393851

    NoCode ProCode

    4 months 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)
  • lucasg-1351629012400869468

    Lucas G

    4 months 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
  • lucasg-1351629395567186002

    Lucas G

    4 months ago

    I didn't understand why window was needed here but it's likely there are other ways of setting things up