How to upload a file (photo) to Xano via the input field?

Sean · 2024-06-03T17:34:13.244+00:00

I've used an input field and set its type attribute to "File". When test my form and upload a photo, I noticed that the value that this input event gives me is "C:\fakepath\photo.jpg". When I map my inputs to my API call (Xano), I get an error from Xano "Unable to locate input: photo". I'm using the file uploader input type in Xano, but how do I pass the file that I uploaded through my Toddle input field to Xano?

Sean
1 year ago
I've used an input field and set its type attribute to "File". When test my form and upload a photo, I noticed that the value that this input event gives me is "C:\fakepath\photo.jpg". When I map my inputs to my API call (Xano), I get an error from Xano "Unable to locate input: photo". I'm using the file uploader input type in Xano, but how do I pass the file that I uploaded through my Toddle input field to Xano?
✅2
tris
1 year ago
i really hope someone replies to this!!!! has been bugging me as well and i just cant seem to find help anywhere
👍2
Tod
1 year ago
Great energy @tris! Your continuous contribution to the toddle Community just made you advance to Community Level 3!
Lucas G
1 year ago
Are you using a Get node to specify the file from the upload?
Sean
1 year ago
Nope. Didn't think of that. I was simply accessing the event > target > value node from my input component that was emitting the event when a file was uploaded. Should I try using the Get node?
@Sean
Nope. Didn't think of that. I was simply accessing the event > target > value node from my input component that was emitting the event when a file was uploaded. Should I try using the Get node?
Lucas G
1 year ago
Try something like this
Lucas G
1 year ago
Also make sure the API call is set up accordingly. Ex: Content-type: multipart/form-data or whatever it needs to be
Sean
1 year ago
Thanks, Lucas. I'll give this a shot.
@Lucas G
DrHariri
1 year ago
Hello Lucas,
For this work, do I need to use a form submit or can I use it on an input change for a "file" type input?

I just tested the code on input change and I can't see anything populated in the set variable I've used to set what you suggested in the picture. Thanks!
@DrHariri
Hello Lucas,
For this work, do I need to use a form submit or can I use it on an input change for a "file" type input?

I just tested the code on input change and I can't see anything populated in the set variable I've used to set what you suggested in the picture. Thanks!
Lucas G
1 year ago
You don’t see anything but an empty array in the editor
That’s how it is for now
@Lucas G
You don’t see anything but an empty array in the editor
DrHariri
1 year ago
I see! But for now, it seems my Backend (Xano) is also receiving an empty value or is not sending it at all.
Sorry to ask this but just want to confirm, is there a requirement as to where I attach the "event" that will handle sending the information/API? For example, currently, I just trigger it on input change on the file upload field. Thanks!
Lucas G
1 year ago
The change event is correct
👍1
@Lucas G
The change event is correct
DrHariri
1 year ago
I still have a null variable "On Change" if I used the file upload input. In console, the network request is not sending any value as well.
Any ideas what could be wrong or where I could assess/diagnose? Thanks!
Tod
1 year ago
Great energy @DrHariri! Your continuous contribution to the toddle Community just made you advance to Community Level 2!
@DrHariri
I still have a null variable "On Change" if I used the file upload input. In console, the network request is not sending any value as well.
Any ideas what could be wrong or where I could assess/diagnose? Thanks!
Lucas G
1 year ago
Are you able to share the project?
The variable right there isn't actually empty
That's just how it looks
If the call isn't sending anything, I'd start by taking a look at the call's body
@Lucas G
Are you able to share the project?
DrHariri
1 year ago
Thanks a lot. Sure can share, no secrets yet, just need to figure that and be able to send you the URL 😅 .
Would publishing and then sharing the URL to the page work?
@DrHariri
Thanks a lot. Sure can share, no secrets yet, just need to figure that and be able to send you the URL 😅 .
Would publishing and then sharing the URL to the page work?
Lucas G
1 year ago
You can share the editor URL either here or by DM
@Lucas G
You can share the editor URL either here or by DM
DrHariri
1 year ago
Thanks a lot 🙏 sent in a DM.
Please let me know if you need any clarifications/information.
DrHariri
1 year ago
Note to others, thanks to @Lucas G he informed me that Toddle.dev's proxy doesn't support file upload. Therefore, you need to disable "Proxy" for the API request handling the file upload.
👍1
Lucas G
1 year ago
And make sure it has the proper headers like Content-type
👍1
Sean
1 year ago
Here's the API config in Toddle for a request where you want to upload a file
👍2
DrHariri
1 year ago
@Sean Is this working for you? I am noticing that the sent data doesn't include full path or full URL 😖
Sean
1 year ago
Yes, its working for me. What happens when you make the request?
@Sean
Yes, its working for me. What happens when you make the request?
DrHariri
1 year ago
It seems that the "full path/url" is not available, I get part of a path.
@DrHariri
It seems that the "full path/url" is not available, I get part of a path.
Lucas G
1 year ago
What are you hoping to see?
If you are needing a folder structure type of thing in the path, then I imagine you would set that at the time of upload
@Lucas G
If you are needing a folder structure type of thing in the path, then I imagine you would set that at the time of upload
DrHariri
1 year ago
Xano accepts the file itself or the full working URL I believe. In other no code tools (like Weweb), the file upload would usually pass the correct data. Honestly never had to tweak upload code to build one for Xano yet 😅 I am quite sure I am not the only one using Xano so hopefully others went through this could help us understand this 😎
Lucas G
1 year ago
But what are you expecting to see
DrHariri
1 year ago
So the Xano team was asking if the path/url works for me, then I noticed it didnt had the longer path usually other tools would have. I can share a Weweb sample that is working with Xano.
DrHariri
1 year ago
Perhaps I can look into constructing and then writing over the path. Would be ideal if someone already did 😁 but I don’t mind exploring I guess (or delay upload for now 😳)
Sean
1 year ago
I think you'll need to tweak some things on the Xano side. Something to alter your response to the full URL not just the path
Sean
1 year ago
So as you can see, I get both the path and the full URL of the image file in my API response.
Sean
1 year ago
I remember when I initially set it up, I too only got the path in the API response. I can't remember what I did exactly, but tweaking around the API, I started getting the full URL. If memory serves me right, I think it had something to do with that field (featured_image in your case), being set to public or something...
Sean
1 year ago
Or let me retrace my understanding... it's possible I've misunderstood the issue.
1. You are able to upload the file to Xano, i.e. the CREATE API is successful, correct?
2. You have checked in the database table that the file exists in that field, right?
3. It's just that the API response for that endpoint, upon file creation, doesn't include the full URL back to you, correct?
@Sean
I remember when I initially set it up, I too only got the path in the API response. I can't remember what I did exactly, but tweaking around the API, I started getting the full URL. If memory serves me right, I think it had something to do with that field (featured_image in your case), being set to public or something...
DrHariri
1 year ago
Thanks for your response. So, Xano is accepting whatever I am passing to the featured_image input which is (file_resource type). However, you have to pass that within the function stack to "Create Image metadata". This action is not recognizing the path as a correct path. So yes, I could modify from the front-end or from the Xano back-end. Since Weweb handled it correctly I thought I'd check first if Toddle can do that.

I didn't try the built-in Toddle upload but should I assume that uploading anything there will give me the base URL?
Thanks!
@Sean
2. You have checked in the database table that the file exists in that field, right?
DrHariri
1 year ago
So no to this, as I am unable to use the "Create image metadata" which you then can use to update a Xano DB record.
Sean
1 year ago
Hmm, I'm wondering if what is being passed into the featured_image input (from the front-end) is actually a file object then.
Here's the set up I used
Sean
1 year ago
I created an event on the input (type file) element to get the file object (from {target: {files: {}}} )
Sean
1 year ago
And sent that to the API with the key "file". In your case I guess this would be "featured_image". And with this, I'm able to create the image metadata for the incoming file resource field on the Xano side.
Lucas G
1 year ago
From what I saw, it was set up correctly
@Sean
Here's the set up I used
DrHariri
1 year ago
Thanks! Does this send the full path/url? Do you have anything done on Xano's side or it accepts it?
Could I ask if you are using on submit or input change for the image?
@Lucas G
From what I saw, it was set up correctly
DrHariri
1 year ago
Mine is jsut missing the target, not sure if it is needed. And his approach is not using the value in the event.
Tod
1 year ago
Great energy @DrHariri! Your continuous contribution to the toddle Community just made you advance to Community Level 3!
@DrHariri
Mine is jsut missing the target, not sure if it is needed. And his approach is not using the value in the event.
Lucas G
1 year ago
Event - Target
It's the same thing
You don't use the value
👍1
Lucas G
1 year ago
That's the same as having target in the Get path
Sean
1 year ago
I believe I got this after some hit and trial. I tried logging to the console what the event object even contained for a file input, and saw that the file object resided within target > files > first element (0) and so that's what I passed on as the input to Xano and it worked.
@Sean
I believe I got this after some hit and trial. I tried logging to the console what the event object even contained for a file input, and saw that the file object resided within target > files > first element (0) and so that's what I passed on as the input to Xano and it worked.
DrHariri
1 year ago
Thanks! So do you have access to something like an actual full path/url?
DrHariri
1 year ago
I will try moving the action from the input to the form itself to see if submit makes any difference.
Lucas G
1 year ago
That wouldn't make a difference
There's no path to be set from the file upload itself
Lucas G
1 year ago
The file is just a file. When it's uploaded to the input element, it'll have a hidden path which is where it is being uploaded from in your computer but that wouldn't affect a path where it is being uploaded to
That would be done either in the call itself or as a setting in the backend
Like where the file is being saved to
Sean
1 year ago
No. You get a file object. Here I've console.log the event when I select a file using the input element
DrHariri
1 year ago
I understand, but we are both using Xano, for some reason, the object he's sending is being accepted.
Sean
1 year ago
@DrHariri
I understand, but we are both using Xano, for some reason, the object he's sending is being accepted.
Sean
1 year ago
What is the file object that you're passing as an input to the API request? As Lucas said it doesn't need a URL as the input, rather a file object
Tod
1 year ago
Great energy @Sean! Your continuous contribution to the toddle Community just made you advance to Community Level 8!
Sean
1 year ago
The suspicion being is that if Xano cannot create the image metadata from the featured_image input being passed in, then what's being passed in might not be a file object
Lucas G
1 year ago
No he's passing a file I believe. In his earlier screenshot that was a file
@Sean
The suspicion being is that if Xano cannot create the image metadata from the featured_image input being passed in, then what's being passed in might not be a file object
DrHariri
1 year ago
True. Thanks for sharing your console output, was a bit shy to ask for it 😅 to compare. Will test and share my console output.
Yes it is an image file.
Sean
1 year ago
Okay, another area which I think I initially overlooked
Sean
1 year ago
"Thanks for your response. So, Xano is accepting whatever I am passing to the featured_image input which is (file_resource type). However, you have to pass that within the function stack to "Create Image metadata". This action is not recognizing the path as a correct path." --- For the Create Image metadata step in the function stack, what are you passing as the input to this -- it should be the entire file object (not a file url), so you'd be passing the entire "featured_image" (that you received as input to the api) as an input to this "Create image metadata" step. Is that what you're passing to the "Create Image Metadata" step?
@Sean
"Thanks for your response. So, Xano is accepting whatever I am passing to the featured_image input which is (file_resource type). However, you have to pass that within the function stack to "Create Image metadata". This action is not recognizing the path as a correct path." --- For the Create Image metadata step in the function stack, what are you passing as the input to this -- it should be the entire file object (not a file url), so you'd be passing the entire "featured_image" (that you received as input to the api) as an input to this "Create image metadata" step. Is that what you're passing to the "Create Image Metadata" step?
DrHariri
1 year ago
Thanks. Yes, that is correct. I am passing the input itself to the "Create Image metadata". This worked everytime with Weweb without issues. But for some reason, it didn't work directly with Toddle. I am going to test the output to the console to see if I also have the file there.
👍1
DrHariri
1 year ago
This is the console output which seems to have a file correctly like your output.
Sean
1 year ago
Can you show a little more of this structure, like a level above. I don't see the "files" property...
Lucas G
1 year ago
That is a file object
DrHariri
1 year ago
OK. For some reason it started working now 😅 I think for some reason it wasn't accepting whatever (optional name) I was setting with the image but the error said nothing about that lol.
👍1
I decided to get rid of the name and re-added the step on Toddle and everything seems to be working now.
@Sean
Can you show a little more of this structure, like a level above. I don't see the "files" property...
DrHariri
1 year ago
Yes as Lucas said I am already drilling down to 0. That's why it looks slightly different.
Thank you @Sean @Lucas G 🙏 Sorry I took some of your time
Much appreciated 😍
👍1
Sean
1 year ago
No problem. My pleasure. Glad its working now. 🙏
🤩1

How to upload a file (photo) to Xano via the input field?

Sean

tris

Tod

Lucas G

Sean

Lucas G

Lucas G

Sean

DrHariri

Lucas G

DrHariri

Lucas G

DrHariri

Tod

Lucas G

DrHariri

Lucas G

DrHariri

DrHariri

Lucas G

Sean

DrHariri

Sean

DrHariri

Lucas G

DrHariri

Lucas G

DrHariri

DrHariri

Sean

Sean

Sean

Sean

DrHariri

DrHariri

Sean

Sean

Sean

Lucas G

DrHariri

DrHariri

Tod

Lucas G

Lucas G

Sean

DrHariri

DrHariri

Lucas G

Lucas G

Sean

DrHariri

Sean

Sean

Tod

Sean

Lucas G

DrHariri

Sean

Sean

DrHariri

DrHariri

Sean

Lucas G

DrHariri

DrHariri

Sean