Supabase storage querySelector null

Ask us anything
1

Hi everyone :wave:

I would like to upload a file on my supabase storage but it’s really difficult for me :sweat_smile:

I have the element uploadFile in my editor

image
image1902×703 93 KB

I have this js code to upload the file

image
image1880×786 119 KB 

console.log("Starting");
var formData = new FormData();
var fileSource = document.querySelector('#uploadFile input');
console.log(fileSource);
var fileName = variables[/* fileUpload - value */ '3eabe2ea-aaa1-409d-870d-c8d7cd2c3cf2-value']['name'];

formData.append("content", fileSource.files[0]);
return await axios.post("https://xxx.supabase.co/storage/v1/object/enterprise/"+fileName, formData,{
    headers:{
        "Content-Type": "multipart/form-data",
        "Authorization": "Bearer xxx"
    }
})

But my querySelector return null and i don’t know why :sweat_smile:
If someone will help me, really thank you !

1 Like
2

wwLib.getFrontDocument().querySelector('#uploadFile input')

3

Oh really thank you, that’s good !
Thank you ! :grin:

1 Like
4

Hey @dorilama, where could I find more info about functions like wwLib.getFrontDocument()?

It is not in the API Guide API Reference | weweb.io developer documentation, for example.
I have seen you comment quite a few useful answers using, say, getFrontDocument() and I would love to learn more about it.

Many thanks.

5

You probably need only getFrontDocument.
There is some mention in the docs.
You can inspect and read the code with the developers tools.
You can ask the weweb team.

6

Hi,
a quick explanation: inside the editor, the preview application is load inside an iframe. Depending on where you code is executing, document can refer to the editor main document, or the document of the iframe.
As dorilama said, you probably want to always target the app document, so wwLib.getFrontDocument(), which will work in all context (in published app as well) :slight_smile: