🟨 WebViewExtra - Upload/Download Files with webviewer

TIMAI2 · February 10, 2023, 1:49pm

WebViewExtra

An extension for AI2 that extends the features of the native webviewer.

The extension, by default, will provide the following features:

allow for uploading of files from within a webviewer. (Developers will need to provide suitable html solutions...)
allow for downloading of files from within a webviewer, even from Google Drive shared folders! Files are saved to the Download directory in Shared storage.
sets READ and WRITE permissions in the app / aia project, enabling the setting of Legacy as a default filescope for storage of files in Shared directories. This is useful for providing access to files in the ASD (which would need to be copied to a shared directory location for uploading).
allow for file access from the webviewer.
allow for some control over zoom in the webviewer.
allow for the use of localStorage and sessionStorage in html/javascript in a webviewer.
modifies the userAgent of the webviewer, removing the ; wv, which then enables (for example) Google 0Auth activities, such as authorising web apps with a user's google account.

DETAILS

Latest Version: 1.0 release.
Tested: This has been tested, companion and compiled, on App Inventor 2 using Android 9, 10 and 13 devices, companion 2.65u. It may work on other derivatives....e.g. Kodular/Niotron/etc.
Released: 10 Feb 2023.
Last Updated: 10 Feb 2023.
Built: Using the Rush Extension Builder by @Shreyash.

BLOCKS

Supply the SetWebviewer block with the component block from a webviewer component.
In the FileType block, provide a filetype filter in mimetype format. The default is "/" (all files). A list of mimetypes is provided in the FileTypes property block. This is intended for uploading files selection.
SetZoom block to true or false.
The event blocks should be self-explanatory...

EXTENSION

WebViewExtra

MORE INFORMATION

WebViewExtra on AI2 Metricrat

CREDITS

I have @JuanAntonio to thank for creating the basis of this extension, and for additional code, suggestions, bug fixing and testing. It would not have happened without him!
@vknow360 and Luke Gackle for their open sourced extensions on the same subject.
All the Questioners and Answerers on StackOverflow, and howto/tutorial/guide providers on the internet

.
.
Enjoy , and all feedback and comments welcome.

Available for use in any MIT AppInventor projects or competitions

#####################################################################
This work by Juan Antonio Villalpando & TIMAI2 is licensed under a
Creative Commons Attribution-ShareAlike 4.0 Unported License with attribution.
Please use name = Juan Antonio Villalpando & TIMAI2 and link to this source page when giving credit.
#####################################################################

Juan_Antonio · February 11, 2023, 10:07am

Through this extension we can upload and download files from a web page displayed with the WebViewer component.

UploadDownload.aia (20.1 KB)

- Upload file from a web page.
visorwebextra4

visorwebextra1

In this example the web page is a PHP:

PHP code: upload_file.php

<html><head>
</head>

<body>
<font size="5" face="Arial">- Select file and click Send button. Size max. 10 KB</font>
<br><br><br>
<form action="upload_file.php" method="post" enctype="multipart/form-data">
<input name="filename" type="file" style="font-size:24px; font-family: arial;"><br><br>
<button type="submit" style="font-size:24px; font-family: arial;">Send</button></font>
</form>
<br><br><br>
<?php
$directory = "subidos/"; 
$filename = basename($_FILES['filename']['name']);
$filepath = $directory.$filename;  
$filesize = filesize($_FILES['filename']['tmp_name']);

if($filesize < 10000){
   if(move_uploaded_file($_FILES['filename']['tmp_name'], $filepath)) { 
	 echo "<font size='5' face='Arial'>- The".$filename." file uploaded to the server. <br><br>";                   
echo "<a href='http://kio4.com/appinventor/php/subidos/".$filename."'>http://kio4.com/appinventor/php/subidos/".$filename."</a>";
					} else { 
						echo "------"; 
					} 
} else {
echo "- The ".$filename." cannot upload because it is larger than 10KB. It is ".$filesize," B. ";
}
?> 
</body></html>

- Download file from a web page and Google Drive.

Kevinkun · February 11, 2023, 10:13am

Is it possible to have a DownloadProgress event?

TIMAI2 · February 11, 2023, 10:25am

For larger files, you should see an animated arrow in the notifications area.

Juan_Antonio · February 14, 2023, 10:22am

Upload file to Google Drive using a web page and WebViewer component. Script Google.
On this website you can see a code to upload files to Google Drive and also save data in Google Sheets:
https://codewithcurt.com/create-file-loader-google-web-app-to-google-drive/
We are going to simplify the code just to upload file to Google Drive.
Script Google:

googledrive281146×679 140 KB

UploadFile.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  <script>
  function LoadFile(event)  {
    var file = event.target.files[0];
    var reader = new FileReader();
    reader.onload = function(e) {
      var fileData = e.target.result.substr(e.target.result.indexOf(",")+1);
      var mimeTypeStart = e.target.result.indexOf("data:") + 5;
      var mimeTypeEnd = e.target.result.indexOf(";");
      var mimeType = e.target.result.substr(mimeTypeStart, mimeTypeEnd - mimeTypeStart);
      var fileName = file.name;
      document.getElementById("fileData").value = fileData;
      document.getElementById("mimeType").value = mimeType;
      document.getElementById("fileName").value = fileName;
    };    
    reader.readAsDataURL(file);
  }
  </script>
  </head>
  <body>
    <h1>Web App File Loader</h1>
    <?var url = getUrl();?>
    <form method="post" action="<?= url ?>" >
      <table cellpadding="5px">
      <tr>
      <td>File:</td>
      <td><input type="file" name="file" onchange="LoadFile(event)" />
      <input type="hidden" id="fileData" name="fileData" />
      <input type="hidden" id="mimeType" name="mimeType" />
      <input type="hidden" id="fileName" name="fileName" /></td>
      </tr>
      <tr>
      <td colspan="2"><input type="submit" value="Load File" /></td>
      </tr>
      <tr>
      <td colspan="2"><span><?= message ?></span></td>      
    </form>
  </body>
</html>

code.gs

function doGet(e) {
  var htmlOutput =  HtmlService.createTemplateFromFile('UploadFile');
  htmlOutput.message = '';
  return htmlOutput.evaluate();
}

function doPost(e) {
  // Logger.log(JSON.stringify(e));
  
  var destination_id = '1tFhDzSWbcExampleT5Xdd7NZ_r';  // ID OF GOOGLE DRIVE DIRECTORY;
  var destination = DriveApp.getFolderById(destination_id);
  
  var data = Utilities.base64Decode(e.parameter.fileData);
  var blob = Utilities.newBlob(data, e.parameter.mimeType, e.parameter.fileName);
  destination.createFile(blob);
  
   listRecord(e.parameter.username, e.parameter.fileName); 
  
  var htmlOutput =  HtmlService.createTemplateFromFile('UploadFile');
  htmlOutput.message = 'File Uploaded';
  return htmlOutput.evaluate();
  
}

function listRecord(username, filename)
{
  var url = 'https://docs.google.com/spreadsheets/d/18tlBCVwsi2giDcTg7GFvYH-CyvOxKqPkwLHBntrdXRc/edit?usp=sharing';  //URL OF GOOGLE SHEET;
  var ss= SpreadsheetApp.openByUrl(url);
  var recordsSheet = ss.getSheetByName("Sheet1");
  recordsSheet.appendRow([username, filename, new Date()]);
}

function getUrl() {
 var url = ScriptApp.getService().getUrl();
 return url;
}

googledrive31