Read Text Files Directly into Thunkable

Statment of the problem
As others have discussed, there is no native way to import a text file into Thunkable. Using the Webviewer Component and Thunkable(ReactNative) WebExtension I was able to create a file upload feature with a simple HTML file hosted on the Firebase’s free Web Hosting

Setup
You could do this on any hosting site. But experienced Thunkers will already have a free Firebase account. Just enable hosting and you now have a site. I set up the site following by deploying hosting as well as my NodeJS functions.

Blocks
The blocks are actually super simple. The Live Test Web app can access the emulated firebase site (which is great for testing). Devices obviously cannot use the emulated site, so my start event controls which buttons are visible.

The button set the URL to my simple file upload page and shows/hides the appropriate components.

The magic is in the Receive Message event. This is a message sent from the WebViewer HTML/javascript code.

Hosted html
For those who know HTML and/or Javascript, the page is very simple. There is just one button (input). The button fires the file dialog, which works on the web, iOS, and Android. The javascript creates a addEventListener to the input button. That means when a file is selected the event triggers and sends the contents of the selected file to Thunkabl using the ThunkableWebviewerExtension.postMessage function.

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Send GPX File Contents to Thunkable</title>
    <script src="https://thunkable.github.io/webviewer-extension/thunkableWebviewerExtension.js" type="text/javascript"></script>
  </head>
  <body>
    <form 
        enctype="multipart/form-data" 
        action="/upload" 
        method="POST"
    >
      <input type="hidden" name="MAX_FILE_SIZE" value="100000" />
      <input accept=".gpx" type="file" id="input" mulitple /> 
      <pre id="output"></pre> 
    </form>
    <script>
    const inputElement = document.getElementById("input");
    inputElement.addEventListener("change", handleFiles, false);
    function handleFiles() {
        const fileList = this.files; 
        document.getElementById('output').textContent=`Transfering to Thunkable...Please wait...`; 
        var fr=new FileReader(); 
        fr.onload=function(){ 
            ThunkableWebviewerExtension.postMessage(fr.result);
        } 
        fr.readAsText(this.files[0]); 
    }
    </script>
  </body>
</html>

Output
note: the verision displayed below did not update the status as indicated in the HTML above.

Remix Project
https://x.thunkable.com/copy/0d4059bdbd4255c8a421514c42a76dff

8 Likes

Really nice work, Ted!!

I finally am able to gap my thunkable and bubble projects using the realtimeDB and nodeJS!

Make that magic!

3 Likes

hey @drted i love this but when i click on the link it says error copying shared project via link

I just edited the original post with a new link. Try it now. If it doesn’t work, send me a direct message and we will figure it out.

1 Like

hey @drted what type of text files it support

This is awesome @drted - thanks for sharing!

1 Like

Anything readable as text can be imported using this technique

like word document?