Upload a file to Xano with custom JavaScript - WeWeb error

I’ve been following the “Upload a file to Xano with custom JavaScript” YouTube video and instructions here, but I keep getting the same error when trying to configure the custom JavaScript in WeWeb to upload files directly to Xano.

The error is “Failed :rotating_light: TypeError: Cannot read properties of null (reading ‘files’)”.

Some things I’ve tried

  • Re-copy and pasting the code from the docs
  • Trying different HTML IDs
  • Adding a different upload element
  • Trying different different files
  • Refreshing and hard refreshing the page the page
  • Trying my Xano POST endpoint vs WeWeb’s (though the error isn’t related to the API)

I can’t for the life of me figure out why it’s not working. :thinking: Does anyone have any ideas? Am I missing something obvious?

Thank you,

Wes


I saw the same problem a few days ago, hoping to find a fix soon!

1 Like

clearly you are not selecting any element.
I’m on my phone now but if I recall correctly for the weweb input element the id is applied directly on the input element in tge dom. Try using only #ver-upload as selector. If it does not work inspect the dom looking for the id and then figure out the right selector path. Or use a custom plugin XD

Thanks for chiming in, @foliodc. Maybe it’s a bug, then!

@dorilama thanks for the suggestions. I didn’t have any luck removing “input” from the selector, however.

I’ve also tried getting the file by the name with some variation of document.querySelector('[name="ver-upload-name"]') instead of document.querySelector('#ver-upload-id input') or document.querySelector('#ver-upload-id')

Here’s a screenshot of what I can see if it helps :thinking:

You managed to get the right selector, well done! :slight_smile:

Be sure that you only have one element with that name atrribute or you may select the wrong element.

To be clear—I’m still running into the same error. Which selector did you believe was correct? Are you basing this on what you believe should work based on the screenshot?

I thought you managed to get it with '[name="ver-upload-name"]'. I just misunderstood your last post.
I’m from my phone now.
Try to find the element from the console, it can be quicker to test selectors (just select the right frame in the dev tools, you will not find any element in the top)

1 Like

For the record: if you add an id to a short answer input the html input element gets the id, with a file input the container div gets the id.

I tried on a brand new app and I can access the html input element as described in the tutorial you mentioned (document.querySelector('#template-image input')). I guess something strange is happening in your app.

Have you tried to add a new input element and see if the error persists?

Probably the weweb team can have a look into your app and see your specific problem.

1 Like

Thank you for the input, @dorilama. It turns out, the issue wasn’t necessarily the selector, but rather, trying to use the selector within the workflow editor.

I recorded a ~2 minute video explaining what happened here. It looks like this may be a bug caused by the new workflow editor. :thinking:

If it’s helpful to others, I found setting up quite a few console.log statements along the way really helpful to debug this. I also received help to adjust the code towards the bottom as I received a different error with the default code. I’ll leave that code below with the comments and with my API endpoint removed.

// console.log("starting");
var formData = new FormData();
var imagefile = document.querySelector('#verUpload input');
// console.log("imagefile is ",imagefile,imagefile.files);

// console.log("file 0 is ",imagefile.files[0]);

formData.append("content", imagefile.files[0]);
console.log("formData is ",formData);
var result = axios.post("your-xano-endpoint.com/upload/etc", formData,{
    headers:{
        "Content-Type": "multipart/form-data"
    }
})
// console.log("result is ",result);
var waitResponse = await result;
// console.log("waitResponse is",waitResponse);
return waitResponse
2 Likes

I missed that the error was only in the editor.
Basically what happens is that in preview mode the code is executed by the preview iframe inside the editor. In the editor instead the code lives in the main editor page that does not have the elements of your app page because they are inside the preview iframe.
This is one tricky thing to remember when you add custom javascript in weweb.
There are some unofficial helpers in wwLib for this.

This is definitely a good lesson here. It was a bit deceiving for me as this video with the previous workflow editor shows the custom JS working inside the preview iframe.

Thanks again for offering your help here, @dorilama!