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