Upload a file to Xano with custom JavaScript - WeWeb error

Ask us anything
1

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

Screen Shot 2022-08-08 at 8.01.23 PM
Screen Shot 2022-08-08 at 8.01.23 PM2738×834 255 KB

Screen Shot 2022-08-08 at 8.11.16 PM
Screen Shot 2022-08-08 at 8.11.16 PM724×1390 55.6 KB

2

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

1 Like
3

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

4

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:

Screen Shot 2022-08-09 at 9.37.28 AM
Screen Shot 2022-08-09 at 9.37.28 AM1912×422 145 KB

5

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.

6

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?

7

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
8

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
9

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
10

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.

11

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!

12

I am extremely lost with the same issue. And when I run it outside of workflow editor, in the preview mode while looking at the developer tools console, I still see the same error.

13

Hi,

@caffeinatedwes I think I found the issue. The file input component is just badly designed…
When you find the dom element by the ID, you don’t get the reel input type file element…

The best way to accomplish this is with the name tag.

I managed to get it with

document.querySelector('[name="nameOfYourElementInWeweb"]');
formData.append("content", imagefile.files[0]);

if that can help someone :slight_smile: