I critically need direct upload to Xano. Ive used tutorial but still have a problem - 400 from 1st Action with custom Js code…
Please help to fix.
message: “Request failed with status code 400”
The 400 error indicates a bad request. Most probably an incorrect url or something like that.
First, check to see if your endpoint is a post type. That JavaScript looks for a post at that endpoint. If it’s a get, it won’t work.
Are you sure that the endpoint accepts the variables you are sending it?
Also, side note… you are running that action on click, but I notice that you have a required tag on the upload field. If that upload is required for button click, you may want to use a form, and use an onsubmit workflow. This will ensure that the form validation runs, which looks at that required tag.
3 Likes
Thank you @kevinwasie !
Yes this is POST and it works when I test it in Xano.
It accepts file as image I guess… but not sure
So error is somewhere in Javascript but I’ve just copied it from tutorial so no idea what is wrong…
Are you getting that error on the workflow or just the individual upload action?
Try to run the action alone and see if the upload works.
Error is exactly in the first action where Js code runs…
That endpoint requires authentication. Are you sending along any authentication data?
You’re going to need something like this if you are authenticating the upload:
return await axios.post(‘https://xano … /trend-image’, formData, {
headers: {
‘Content-Type’: ‘multipart/form-data’,
‘Authorization’: ‘Bearer {$pluginVariables[‘f5856798 … 1c64e1’][‘accessToken’]}’
}
})
For the authentication variable, navigate to your Xano plugin, and just click on accessToken in the variable navigator.
Let me know if that solves it.
Nope still same error…
Error:
stack: “Error: Request failed with status code 400 at e.exports (https://editor-cdn.weweb.io/ww_front/public/js/chunk-vendors.262b3c7d.js:7:36313) at e.exports (https://editor-cdn.weweb.io/ww_front/public/js/chunk-vendors.262b3c7d.js:21:125394) at XMLHttpRequest.k (https://editor-cdn.weweb.io/ww_front/public/js/chunk-vendors.262b3c7d.js:59:17685)”
@Joyce I have copied your code with correct changes, and this still returns error…
Is trend_id also required field in Xano? If so, you also need to send the trend-id to that endpoint:
formData.append(‘tren_id’, trend-id-variable);
return await axios.post(‘https://xano … /trend-image’, formData, {
headers: {
‘Content-Type’: ‘multipart/form-data’,
‘Authorization’: ‘Bearer {$pluginVariables[‘f5856798 … 1c64e1’][‘accessToken’]}’
}
})
**sorry, you also need a comma in the headers area, after ‘multipart/form-data’
Thanks, Ive added second param & credentials.
Ive checked this endpoind via cdn upload and all works when I link these params.
I have no idea whats wrong and where is a bug…
In JavaScript, you include strings in quotes, and variables either need to be concatenated or as a literal.
So, your pluginVariables[“accessToken”] is being read as a string right now.
Try concatenating it or what I had above…
“Authorization”: “Bearer “ + pluginVariables…[“accessToken”]
EDIT: Remove : after Bearer
1 Like
Also, have you used the api endpoint request history in Xano? That is also a a great tool to use to debug errors.
1 Like
One other tip…. Have you clicked on more details for the error? On the right side in WeWeb error pane, click on the arrow next to response, then data, then message.
1 Like
SO problem fixed after I removed authorisation in endpoint… need to play with that headers to send authorized request
1 Like
Awesome! Make it like this if you are going to authorize the user…
And, what is that second action in your workflow doing? I dont think you need that, as you are handling the whole request here with this one action step.
2 Likes
Nicely done!