How to upload an image to my server?

Questions about Thunkable
10

In your screen you need to have the following block from the web viewer
image

I’m displaying the name in a label but you can do whatever.

The web viewer needs to load the file

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://thunkable.github.io/webviewer-extension/thunkableWebviewerExtension.js" type="text/javascript"></script>
  </head>
  <body>
      <h1>File Selector</h1>
    <label for="uploadFile">Choose a file:</label>

    <input type="file"
           id="uploadFile" name="uploadFile">
    
    <script type="text/javascript">
        const fileInput = document.getElementById('uploadFile');
        fileInput.onchange = () => {
        const selectedFile = fileInput.files[0].name;
        console.log(selectedFile);
        ThunkableWebviewerExtension.postMessage(selectedFile);
        }

    </script>
</body>
</html>

Once you select the file, the name of the file will be returned by this code.

1 Like