🟨 WebViewExtra - Upload/Download Files with webviewer

WebViewExtra wveicon

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 :smiley: , 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.
#####################################################################

12 Likes
  • 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.

1 Like

Is it possible to have a DownloadProgress event?

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

2 Likes
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

1 Like