I am trying to have a file upload image to xano. I have tried folllowing the tutorials and these threads but can not get past the same error.
https://docs.weweb.io/file-upload/
Extremely lost as to what’s going wrong.
Any help is appreciated.
It looks like you have a problem with the document.queryselector.
Right after your queryselector line do
console.log(imageFile);
If you get something other than null then try
console.log(imageFile.files);
I had this problem as well so I used
var file = variables[/* template-image - value */ ‘9c5a773b-bd5c-4ba8-8ef2-262d8f4f5021-value’][0];
I was able to get that by clicking on the value in the ‘var’ area
Next, let’s talk about your endpoint in Xano.
A) Is this endpoint secured? If so then you need to add security to the headers.
B) Does your endpoint expect to receive a file with an input named ‘content’?
1 Like
Thanks a lot for the response!! It wasn’t the exact solution but what it made me realize was that my image upload is a single file and not an array. so the imagefile.files[0] was the null reading the whole time. I thought it was the document query selector this whole time too.
Either solution, the document query selector or the variable select from the weweb variable editor works.
Edit: This is not the solution
Do note that an input element expose a FileList (Using files from web applications - Web APIs | MDN) and the imagefile.files[0] is there for a reason.
It’s likely you get the error because you are testing the action in the editor workflow instead of preview mode.
Check this Filtering Issues - #11 by dorilama and the post after.
I see what you’re saying. Solution NOT completed. I still get the same error in the preview mode. let me read through your other posts and see if I can figure it out.
My form is in a modal, so I’m wondering if that’s the reason.
It depends. If you are in preview mode and you trigger the workflow after a file is selected, the input should be ready to be found.
If you need to access an element and you don’t know if it’s already available there are other methods you can use (What's Recommend Method For Setting Focus On Elements? - #2 by dorilama), but unless you start the workflow when the input in the popup is not visible you shouldn’t need it.
Hmm then I don’t see why the modal should affect it. I took it out of the modal and tested it in preview mode and still doesn’t work either. I’m really lost here.
I tried using the wwlib and the specific weweb variable selector.
The only difference when I use wwlib is that it gives me a different error. ‘TypeError: Cannot read properties of undefined (reading ‘0’)’
When people have suggested using console.log to t/s, where am I supposed to be able to see the log to t/s?
if you are using Chrome or a variant of Chrome (MS Edge) then you see the developer’s console by pressing F12 on the keyboard then you will need to click on the ‘console’ button
This site may be of some help with the console in Chrome
This can have a lot of information in it I suggest that you press the clear button
and then try the workflow out.
I really do think that on line #4 if you put
console.log('Image file = ' + imageFile);
console.log('Image.files = ' + imageFile.files);
You will get useful information in the console log.
If this is null then it will say null, otherwise, it will have some sort of value.
1 Like
getFrontDocument (called without parameters) will get you the document, you still need to call querySelector from it with the selector as parameter.
1 Like
Thank you for showing me that.
So it looks like the problem is still with the document query selector. I can confirm it’s not the modal or the workflow editor. I tried setting the variable with the weweb var selector and still the same error. imagefile not defined, which I understand as it is not setting the var imagefile and can’t grab the file for some reason.
I’ve added logs at each step and some reason I’m able to get past the document query selector now. So that’s good news. Not it looks like my API is wrong.
I don’t think this endpoint is secured, but I’m not exactly sure how to check. I don’t see where in xano I’d find these settings.
I thought this was like an arbitrary upload to my xano domain. Do I need to create an API upload of some sort?
Thank you so much, this made me realize I needed to create a xano api endpoint specifically for the image upload. This was not clear in the original tutorial. I’m able to get my api to post, but now I’m confused as to how I grab the return result in the workflow editor, if testing the JS code in the workflow editor doesn’t work.
I see it in the console.
I’m confused as how to grab the results from the upload to xano if workflow editor only throws errors when I test it.
I tried using the wwLib.getFrontDocument(); to make it work in the workflow editor to no success.
Is there another method possibly you are aware of? I want to reference the result from the original upload.
If you want to test your action in the editor (not in preview mode) you need to use getFrontDocument instead of document in your code. Just calling it on a random line will have no effect.
If you want to use the response from axios in other steps of the workflow you can simply return the value and it will be available as result of that action. Just be sure to await the axios call.
If you struggle testing a workflow because it’s not easy to reproduce some actions you can always break the workflow in smaller global workflows, each one accepting input parameters. When you test the global workflow you can pass test input values for the parameters.
Appreciate the help, I still have the issue however.
- I was able to change the current document to frontdocument then use it in the workflow editor.
- I get a return result and see it in WeWeb on the left now, not just in the console.
- I still can’t seem to reference it in WeWeb still. It only shows whether the result is true.
Are you sure you are selecting the right action’s result?
Conditions, true/false,switch, they all count as actions.
1 Like
Oh, thanks for pointing that out. It seems that the action doesn’t show up if it’s nested within a true/false filter. Once I take the action out of the filter it works.
I figured it out. The action if it’s nested in a conditional goes to the bottom of the action list, not in it’s normal order.
Thanks for all of your help!!!
1 Like