File picker/selector

Ask us anything How do I?
1

Hi, many api endpoint handling files requiere the path to the file on the system. However I can`t figure out how to get the path to a file with weweb!?

chrome_Ih7Me3AaJA
chrome_Ih7Me3AaJA849×191 6.36 KB

2

Hi @Lars, some bad news, you CANNOT :relieved:. It’s not you or Weweb, it’s just the limitation of web browsers for security reasons, they CANNOT access the file system.

But not to worry. Your endpoint is a multi-part form I see. so the data you should send to it is the content of the file uploader element variable (so when you add a file uploader element to a page it has a ‘file’ variable), that’s what you should pass to your endpoint.

Explanation: to overcome this limitation of access the file system, what file uploader elements do is that once they pick a file they immediately load its content [uno the binary 10000111000010010 that actually makes up the file], they load that into the browser’s memory store. So you can access it from there

3

Thanks! Gonna try it out!

4

It seems like I am doing something wrong here, but I cant figure what

chrome_inDaQkaGvj
chrome_inDaQkaGvj1920×955 166 KB

5

Thats the curl

chrome_3u1FxpGMaH
chrome_3u1FxpGMaH1285×770 43.5 KB

6

You could try doing something like this, but with Axios instance that is exposed in WeWeb, or maybe even with the REST API plugin.

I’m not sure if this would work, as instead of the path, you’re using the FormData to pass the file.

// First, you need to select or provide the audio file
// This can be done via a file input in your HTML

document.getElementById('yourFileInput').addEventListener('change', function(event) {
    const file = event.target.files[0];

    // Create a FormData object and append the file to it
    const formData = new FormData();
    formData.append('file', file);
    formData.append('model', 'whisper-1');

    // Define the fetch options
    const fetchOptions = {
        method: 'POST',
        headers: {
            'Authorization': 'Bearer YOUR_TOKEN' // Replace YOUR_TOKEN with your actual token
        },
        body: formData
    };

    // Make the fetch request to the OpenAI API
    fetch('https://api.openai.com/v1/audio/transcriptions', fetchOptions)
        .then(response => response.json())
        .then(data => console.log(data))
        .catch(error => console.error('Error:', error));
});