Hi Thunkers,
I have been working on a file picker to allow Thunkable to select pdf (and all other file types) from sources such as local device, google drive, Onedrive, Facebook shutter stock etc…
I have been able to accomplish this on both Android and IOS. Here is where I am up to and how I have done it so far…
What you will need:
- Free tier Cloudinary account
- Free tier Firebase account
- Simple editor (I like Visual Studio Code but Note++ will do.)
The Thunkable modules we will use are the web viewer “set url” and “when web viewer receives message”.
First, set up your Cloudinary account and an Upload preset (there is a lot of existing instructions on this so I won’t get into it here)
Create the following file using an editor (I have slightly edited this but I am not a programmer so I am waiting for the experts to have a look.
<–!DOCTYPE html>
<–html lang=“en”>
<–head>
<–meta charset=“UTF-8”>
<–meta name=“viewport” content=‘width=device-width, initialscale=1.0, maximum-scale=1.0, user-scalable=0’>
<–title>JavaScript File Upload
<–/head>
<–body>
<–!--button id=“upload_widget” class=“cloudinary-button”>Upload files
<–script src=“https://thunkable.github.io/webviewer-extension/thunkableWebviewerExtension.js” type=“text/javascript”><–/script>
<–script src=“https://widget.cloudinary.com/v2.0/global/all.js” type=“text/javascript”><–/script>
<–script type=“text/javascript”>
var myWidget = cloudinary.createUploadWidget({
cloudName: ‘replace this with yours’,
uploadPreset: ‘ml_default’ //I used the default but changed to unsigned.
}, //currently using unsigned Preset
(error, result) => {
if (!error && result && result.event === “success”) {
console.log('Done uploading…: ', result.info);
ThunkableWebviewerExtension.postMessage(result.info.secure_url);
myWidget.close();//
myWidget.open()
}
});
myWidget.open();
/*
document.getElementById(“upload_widget”).addEventListener(“click”, function(){
ThunkableWebviewerExtension.postMessage(“hello eddies world”);
}, false);
*/
<–/script>
<–/body>
<–/html>
Note: I suggest you research and produce you own file but if you do decide to play around using the above code then remove all ‘–’ that I have included to enable code to be displayed in this post.
save the file and call it anything you like but with a .HTML extension.
Upload the file to Firebase Storage. (I mean the STORAGE and not the realtime database)
Get the download link from Firebase Storage for this file. (File location - access Token).
placing this link into any browser will open the html file and hence the widget.
I have managed to open and use the widget successfully from within Thunkable simply by using the Web viewer and setting the link to the access token of my firebase stored html file.
I am able to select any file type from local or cloud sources and it uploads to my Cloudinary account. I can also preset transformations but that’s another thread I think. I have added a post message on success in my html javascript which returns the url of the uploaded file in Cloudinary. I can now do what I like with the file including setting up Node JS functions in Firebase to tidy up the assets into users folders although most of you will use Thunkable blocks to manipulate this which is also fine. The widget will also handle video.
From here I am seeking some input from the experts out there.
I hope this has helped some of you who have been battling with uploading pdf files into Thunkable. Using the Cloudinary widget does this and much much more 
