🟨 WebViewExtra - Upload/Download Files with webviewer (and much more...)

I am building a File Compressor App using Kodular and the WebViewExtra extension.

​My App's Logic:

  1. ​The user selects a file (Image, PDF, etc.) inside my HTML interface.
  2. ​The JavaScript compresses the file in the browser's memory and creates a blob: URL.
  3. ​I need to download this compressed result to the phone's storage (e.g., if I compress a PDF, it should save as .pdf; if an image, as .jpg).

​The Problem:

My HTML triggers the download using a blob: URL. Since this file doesn't exist on a server (it's only in RAM), the standard download fails.

​My Request:

Could someone please share a screenshot of the Blocks?

I need to see exactly how to set up the DownloadNeeded event in WebViewExtra to:

  1. ​Intercept the blob: URL.
  2. ​Save it to the Downloads folder with the correct extension (PDF, JPG, ZIP, etc.).

​I would really appreciate a screenshot of the blocks to see how to wire up the url, mimetype, and contentDisposition correctly

blobs can only be downloaded to the Download directory (now fixed in V2.3)

To get the file, the html has to be on a server - somewhere (although in more recent testing, things did appeaar to be working correctly for a local (in assets) html file on companion)

I used my text-doc-saf extension to read the file, the download happens "outside" the app so the app does not have any rights to view the file, unless you use saf. media files may behave differently.

html:

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="https://www.w3schools.com/w3css/5/w3.css" rel="stylesheet">

<title>Demo Blob Download</title>
<style>
</style>


<body class="w3-content w3-padding-large">

<script>
const data = "Hello, world!";  
const blob = new Blob([data], { type: "text/plain" });

const blobUrl = URL.createObjectURL(blob);

const link = document.createElement("a");
link.href = blobUrl;
link.innerHTML = "Download Blob";
link.download = "downloaded-blob.txt";
document.body.appendChild(link);


</script>
</body>
</html>

getBlob.aia (43.8 KB)

If localhost is used (assets) for the same html file, it fetches the text directly to the browser. Not sure how this would work with other file formats.

UPDATE V2.3 and V2.31

  1. In this update it is now possible to download bloburls to Download, Documents or ASD.
  2. V2.31 removes camera and microphone permissions settings, for those that do not require it.
1 Like

Hi,

Thank you very much for the WebViewExtra extension — it's an excellent piece of work.

As shown in the image, I'm changing the default name of the downloaded file. I have 2 questions, and if it's not too much trouble, a small request as well.

1- Is it possible to change the name of the downloaded file only through your extension? (Perhaps this could be added as a new feature?)

2- Without using SAF, is it possible to first let the user pick the save location, and then trigger the actual save afterwards?

No, and not a feature I will be working on, this can be done after the file is downloaded.

The wve extn allows you to set one of three download locations (Download/Documents/ASD). You can move the downloaded file wherever you want after it is downloaded.

1 Like

Downloads cause app freeze / "App isn't responding"

Hi everyone,

I'm using the latest version of WebViewExtra (by TIMAI2) with a WebViewer that loads https://acap.one/

What works:

  • File upload / choosing files (BeforePicking / AfterPicking)
  • Normal page navigation

Problem:
When I click on a download link (acap.one/meme), the app freezes and shows the Android message: "App isn't responding" (Wait / Close app). And the file never downloads.

Will you help me understand how to implement file downloads using WebViewExtra/WebViewer?

I have included the aia file:

acap.aia (6.3 MB)

 and a screenshot of my blocks:

Thanks in advance for any help you can provide to help me understand this process.

Can you say where in acap.one and what (on what page/what "meme") you are attempting to download?

OK, found you are using a meme generator at acap.one/meme.

The download link appears to be a base64 datauri image, in the format:

data:image/png;base64,iVBORw0KGgoAAAAN.....

which to webviewextra appears as a string, not a fully qualified path to a file, and therefore does not know how to handle it (as far as I can tell), the DownloadManager has no native method to deal with datauris. I have not come across this yet as a download format/method, will have to see if it is possible to include it.

By the by:
Latest version of webviewextra is in fact V2.32, unless of course you want to be using camera and microphone access, in which case V2.3 is correct..

1 Like

Hopefully have a solution, need to finish coding and testing tomorrow (UK time)

1 Like

Could you please test with this version of the extension:

webviewextra

It will only save your datauris (memes) to the Download directory, and will give a file name like this:
datauri_1778746072615.png

Working OK for me testing on the site you provided.

1 Like

It worked, thank you!

I appreciate your help. Sorry for the confusion about posting twice earlier, I am still a forum noob. :slight_smile:

1 Like

UPDATE V2.33

  1. In this update it is now possible to download datauris to Download, Documents or ASD. Downloaded files are given a timestamped (thus sequential) filename like this: datauri_1778746072615.ext. The file extension should be provided by the downloading site. You will get a toast message about the download, but no notifications.

webviewextra

UPDATE V2.34

  1. In this update it is now possible to return the url for an image if it is long pressed on a webpage in the webviewer. This can then be used to view the image or download it to the app. It will also return the base64 for images that are datauri base64. Image types of jpg, png and webp are generally the most useful for further processing in an Appinventor app.

Additional Blocks:

Use this block to set/unset the long click functionality on the web page:
blocks (1)

Use this event to return the image url:

Grateful thanks and credits to @Kumaraswamy for their help in getting all the correct code in the correct places!

webviewextra

1 Like