🟨 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 and MEDIA 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.
turns zoom on and off 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.3 release.
Tested: This has been tested, companion and compiled, on App Inventor 2 using Android 7, 9, 10 and 13 devices, companion 2.68u. It may work on other derivatives....e.g. Kodular/Niotron/etc.
Released: 10 Feb 2023.
Last Updated: 14 Sep 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.
Set ZoomControls block to true or false.
The event blocks should be self-explanatory...

1.2release Update

It seems that simply removing ; wv from the default useragentstring is now not enough, and we also need to remove Version/4.0 and Mobile . Also, not all android devices present the same webview useragentString, e.g. Samsung, Asus, Redmi, Motorola..., therefore it may be necessary to modify the useragent presented in those webview, hence the provision of the get and set useragent blocks. A useful link for native browser user agents: Device Atlas. See below from posts 24 - 45 for the workthrough following reports from @TxSolve .

1.3 release update

added the three new media permissions (image/audio/video)
tidied up zoom controls to one method (although it seems it does not work on all devices?)

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

VED_INFOTECH · March 26, 2023, 4:32am

Great extension.local storage support helps but I can't remove zoom control in webview.my blocks are in below image

TIMAI2 · March 26, 2023, 7:57am

Are you still able to zoom with two fingers?

The zoom buttons will still be visible.

VED_INFOTECH · March 26, 2023, 4:41pm

Zoom button is displaying after set zoom to false.any way to hide zoom button.

TIMAI2 · March 26, 2023, 4:50pm

Is it your web page (or can you get it edited) ?

If so, add this meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

VED_INFOTECH · March 26, 2023, 5:13pm

Thanks

Limaj_Francisco · June 25, 2023, 1:58pm

How ca we upload multiple file ?

Juan_Antonio · June 25, 2023, 4:00pm

Where do you want to upload them? In case you have a server with PHP, you could convert your files to zip and upload it.

https://puravidaapps.com/zip.php

Limaj_Francisco · June 25, 2023, 4:05pm

yes but my php look like this.

Juan_Antonio · June 25, 2023, 4:08pm

If you want to upload it via FTP you need an FTP client.

Limaj_Francisco · June 25, 2023, 4:13pm

do you have solution just to able multiple file.. just single file is working.. i need multiple file to be uploaded.

Juan_Antonio · June 25, 2023, 4:18pm

You can use a Clock and upload a file automatically every 4 seconds (for example).

Limaj_Francisco · June 25, 2023, 4:21pm

how?

Juan_Antonio · June 25, 2023, 4:24pm

Do you want to upload files from the app to a hosting?
Do you have an FTP server in your hosting?
How do you want to upload the files via FTP or via PHP?

Limaj_Francisco · June 25, 2023, 4:27pm

i have a php file that is working to upload files but when i use this webview extra extension i can only select 1 file to be uploaded but when i use google chrome i can upload more than one
file

TIMAI2 · June 25, 2023, 4:56pm

Show the html for the web page you are using to select the files to upload (as in your image above), specifically the <form> structure.