Call API for each item in an array?

  • neville9288-1281949898060595221

    Neville

    5 months ago

    I need to call an API for each item in an array. I understand the Toddle way is to use Map to iterate over the array, but I can't quite figure out how to do it.

    Context: I need to upload a list of images to Xano. I want to do this for each image individually so I can show the user how many images have been uploaded and how many remain. (And also because I can't figure out how to upload multiple images to Xano in a single API call.)

    Here's what I (think) I know:
    - The images live in an array populated from a file input.
    - Each API call is a POST
    - I obviously need to wrap each image in an object in the body of the post

    The attached image shows what I think is the right approach, but I'm not even sure if this is the right approach.

    Am I heading in the right direction?
    Thanks!
    1281949898354200618-Screenshot_2024-09-07_at_7.00.10_AM.png
  • andreasmoller-1281950892899303504

    Andreas Møller

    5 months ago

    Create a component for uploading an image and repeat the component for each image
  • neville9288-1281957523393613946

    Neville

    5 months ago

    thanks Andreas - checking it out now...
  • neville9288-1282019970489909299

    Neville

    5 months ago

    @Andreas Møller this is not urgent (especially not on a Saturday!) - just so you know:

    in the process of building the file upload component I discovered that the file input field has to be wrapped in a form for the Xano API to see it. I initially tried just with an input field and my API call kept barfing... Wrapping it in a form correctly encoded the multipart/form-data.

    This behaviour is correct, but it led me down some rabbit holes. Something for the Obscure Things That Almost Never Happen department 😄
  • andreasmoller-1282020637992554613

    Andreas Møller

    5 months ago

    You can do it without a form, but it is definitely easier with 🙂
  • neville9288-1282023505910562897

    Neville

    5 months ago

    😄 yes indeed. The more I learn about Toddle, the more I love it - and I've been programming since the 80's (really). Great product and incredible support, thank you!
  • andreasmoller-1282023823981678734

    Andreas Møller

    5 months ago

    Glad to hear it.
  • neville9288-1283384314444255348

    Neville

    5 months ago

    @Andreas Møller thanks for the hints - I now have a component that uploads an image and repeats over an array of images.
  • neville9288-1283384574952603690

    Neville

    5 months ago

    Follow-up question: some of the images are quite large and take some time to upload. Any hints on how to implement an "upload queue" so I can call the API sequentially instead of all at the same time?
  • neville9288-1283385225069592678

    Neville

    5 months ago

    the only thing I can think of is some custom Javascript that checks the array to see if something is uploading. If not, set the next one in the queue to "uploading", and when it's done, remove it from the queue and set the next one.
  • neville9288-1283385892618113025

    Neville

    5 months ago

    the tricky bit (I think) is waiting until the previous upload is completed...
  • prettycold_-1285572562549608528

    Sam B

    4 months ago

    @Neville @Andreas Møller I need to upload an image along with other inputs (text, select, etc.,). I gave the content type as multipart/form-data. Nothing is passed to the backend. In Xano, I've given the column type as File/Image. Any pointers?
  • neville9288-1285572956902133821

    Neville

    4 months ago

    hey @Sam B Make sure your API call is done on Form Submit - this will correctly encode the data. Are you wrapping the body in an object?
  • prettycold_-1285574716500738153

    Sam B

    4 months ago

    Yep, I call the API on form submit and all input parameters to the API are wrapped in an object and set in the body in toddle
  • neville9288-1285575316391071806

    Neville

    4 months ago

    and I assume you're looking at the Xano API requests?
  • Tod-1285575323726905374

    Tod

    4 months ago

    Great energy @Neville! Your continuous contribution to the toddle Community just made you advance to Community Level 5!
  • neville9288-1285575481391054962

    Neville

    4 months ago

    remember the Xano API request log is not immediate - it can take a few seconds to update
  • prettycold_-1285576439617552476

    Sam B

    4 months ago

    Yep, I tried doing it from the beginning (I mean from login) and checked the API request in Xano, it's the same. Should I modify anything from Xano end ?
  • neville9288-1285725181414740071

    Neville

    4 months ago

    When I run into problems like this, I usually go to my sandbox, create a new, blank page, and then do the absolute minimum I need to test whatever I'm doing. In this case, a single API get endpoint, and a button that will call the API when clicked. If that works (I can see the request in Xano), I move up from there.

    Not sure if that helps - it's a fairly basic debug / troubleshooting technique, but it may help to resolve the problem.

    Another big help: in Toddle you can set the API call to auto-fetch - toggling that on and off a few times will quickly tell you what it's getting back from Xano.
  • prettycold_-1285826628156391444

    Sam B

    4 months ago

    Thanks! Yep, that's one of my debugging technique too, creating a minimal page and test. Somehow was feeling lazy yesterday 🤣 , will take that approach today and see what happens. Thanks again for the tips @Neville
  • tinsoldiers-1330857124187607055

    Tinsoldier

    19 days ago

    @Neville @Sam B sorry for the ping. Am facing same issue. How did you overcome this issue. At present am stuck at a point where am not seeing request history in xano and get an error code that parameter missing file.path

Stop scrolling. Start building.

toddle is a visual web app builder that rivals custom code — but accessible to your entire team!

Try toddle — it's free!

© Copyright 2024 toddle. All rights reserved.