🟨 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