File to Base64 with JavaScript

App Showcase
,
1

To convert a String to/from Base64 in JavaScript, we use the btoa and atob commands.

Here is another code to convert a file to Base64:

ToBase64.htm

<script>
async function readTextFileAsBlob(file) {
    const response = await fetch(file);
    const blob = await response.blob();
    return blob;
}

const blobToBase64DataURL = blob => new Promise(  
    resolvePromise => {
        const reader = new FileReader();
        reader.onload = () => resolvePromise(reader.result);
        reader.readAsDataURL(blob);
    }
);

my_file = AppInventor.getWebViewString(); // INPUT
readTextFileAsBlob(my_file).then(
    async blob => {
        const base64URL = await blobToBase64DataURL(blob);
	 //	  document.write(base64URL);
	      AppInventor.setWebViewString(base64URL); // OUTPUT
    }
);
</script>

p70_base64_javascript.aia (11.4 KB)

base64javascript1

2

This has promise :slight_smile:
Does the readTextFileAsBlob function also work for other file types, e.g. image, pdf, zip?

3

I think so, in the app I have put a .png file.

Now trying to return base64 to readable string wit atob.

my_file = AppInventor.getWebViewString(); // INPUT
readTextFileAsBlob(my_file).then(
    async blob => {
        const base64URL = await blobToBase64DataURL(blob);
	 //	  document.write(base64URL);
	  // AppInventor.setWebViewString(base64URL); // OUTPUT
	  var my_file2 =  atob(base64URL.substring(23));
      AppInventor.setWebViewString(my_file2); // OUTPUT
    }
);
4

1.- Image in asset. JavaScript encode image ToBase64 String. Return String. String to Files by Canvas Block and extension. Files in ASD.

p70_base64_javascript_v3.aia (33.9 KB)

base64javascript2
base64javascript2957×399 31.8 KB

ToBase64.htm

<script>
async function readTextFileAsBlob(file) {
    const response = await fetch(file);
    const blob = await response.blob();
    return blob;
}

const blobToBase64DataURL = blob => new Promise(  
    resolvePromise => {
        const reader = new FileReader();
        reader.onload = () => resolvePromise(reader.result);
        reader.readAsDataURL(blob);
    }
);

my_file = AppInventor.getWebViewString(); // INPUT
readTextFileAsBlob(my_file).then(
    async blob => {
        const base64URL = await blobToBase64DataURL(blob);
               // .split("base64,")[1]) to remove data:image/png;base64,
	     AppInventor.setWebViewString(base64URL.split("base64,")[1]); // OUTPUT    
    }
);
</script>
1 Like
6

Try using UriEncode block available in Web component.

7

Look at @Juan_Antonio 's last example above

8

failed to save, bad base64 when saving using canvas.

image

please understand my question, that:
the data I want to save is a blob that has been converted to base64 with an example url is:

data:application/vnd.openxmlformats-officedocument.wordprocessingml.document;base64,UEsDBAoAAAAAADMe2laWJXaW0QEAANEBAAATAAAAW0NvbnRlbnRfVHlwZXNdLnhtbDw/eG1sIHZlcnNpb249IjEuMCIgZW5jb2Rpbmc9IlVURi04IiBzdGFuZGFsb25lPSJ5ZXMiPz4KPFR5cGVzIHhtbG5zPSJodHRwOi8vc2NoZW1hcy5vcGVueG1sZm9ybWF0cy5vcmcvcGFja2FnZS8yMDA2L2NvbnRlbnQtdHlwZXMiPgogIDxEZWZhdWx0IEV4dGVuc2lvbj0icmVscyIgQ29udGVudFR5cGU9CiAgICAiYXBwbGljYXRpb24vdm5kLm9wZW54bWxmb3JtYXRzLXBhY2thZ2UucmVsYXRpb25zaGlwcyt4bWwiIC8+CiAgPE92ZXJyaWRlIFBhcnROYW1lPSIvd29yZC9kb2N1bWVudC54bWwiIENvbnRlbnRUeXBlPQogICAgImFwcGxpY2F0aW9uL3ZuZC5vcGVueG1sZm9ybWF0cy1vZmZpY2Vkb2N1bWVudC53b3JkcHJvY2Vzc2luZ21sLmRvY3VtZW50Lm1haW4reG1sIi8+CiAgPE92ZXJyaWRlIFBhcnROYW1lPSIvd29yZC9hZmNodW5rLm1odCIgQ29udGVudFR5cGU9Im1lc3NhZ2UvcmZjODIyIi8+CjwvVHlwZXM+ClBLAwQKAAAAAAAzHtpWAAAAAAAAAAAAAAAABgAAAF9yZWxzL1BLAwQKAAAAAAAzHtpWD8Iv5UoBAABKAQAACwAAAF9yZWxzLy5yZWxzPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/Pgo8UmVsYXRpb25zaGlwcyB4bWxucz0iaHR0cDovL3NjaGVtYXMub3BlbnhtbGZvcm1hdHMub3JnL3BhY2thZ2UvMjAwNi9yZWxhdGlvbnNoaXBzIj4KICA8UmVsYXRpb25zaGlwCiAgICAgIFR5cGU9Imh0dHA6Ly9zY2hlbWFzLm9wZW54bWxmb3JtYXRzLm9yZy9vZmZpY2VEb2N1bWVudC8yMDA2L3JlbGF0aW9uc2hpcHMvb2ZmaWNlRG9jdW1lbnQiCiAgICAgIFRhcmdldD0iL3dvcmQvZG9jdW1lbnQueG1sIiBJZD0iUjA5YzgzZmFmYzA2NzQ4OGUiIC8+CjwvUmVsYXRpb25zaGlwcz4KUEsDBAoAAAAAADMe2lYAAAAAAAAAAAAAAAAFAAAAd29yZC9QSwMECgAAAAAAMx7aViI/IeAICAAACAgAABEAAAB3b3JkL2RvY3VtZW50LnhtbDw/eG1sIHZlcnNpb249IjEuMCIgZW5jb2Rpbmc9IlVURi04IiBzdGFuZGFsb25lPSJ5ZXMiPz4KPHc6ZG9jdW1lbnQKICB4bWxuczp3PSJodHRwOi8vc2NoZW1hcy5vcGVueG1sZm9ybWF0cy5vcmcvd29yZHByb2Nlc3NpbmdtbC8yMDA2L21haW4iCiAgeG1sbnM6bT0iaHR0cDovL3NjaGVtYXMub3BlbnhtbGZvcm1hdHMub3JnL29mZmljZURvY3VtZW50LzIwMDYvbWF0aCIKICB4bWxuczpyPSJodHRwOi8vc2NoZW1hcy5vcGVueG1sZm9ybWF0cy5vcmcvb2ZmaWNlRG9jdW1lbnQvMjAwNi9yZWxhdGlvbnNoaXBzIgogIHhtbG5zOndwPSJodHRwOi8vc2NoZW1hcy5vcGVueG1sZm9ybWF0cy5vcmcvZHJhd2luZ21sLzIwMDYvd29yZHByb2Nlc3NpbmdEcmF3aW5nIgogIHhtbG5zOmE9Imh0dHA6Ly9zY2hlbWFzLm9wZW54bWxmb3JtYXRzLm9yZy9kcmF3aW5nbWwvMjAwNi9tYWluIgogIHhtbG5zOm5zNj0iaHR0cDovL3NjaGVtYXMub3BlbnhtbGZvcm1hdHMub3JnL3NjaGVtYUxpYnJhcnkvMjAwNi9tYWluIgogIHhtbG5zOmM9Imh0dHA6Ly9zY2hlbWFzLm9wZW54bWxmb3JtYXRzLm9yZy9kcmF3aW5nbWwvMjAwNi9jaGFydCIKICB4bWxuczpuczg9Imh0dHA6Ly9zY2hlbWFzLm9wZW54bWxmb3JtYXRzLm9yZy9kcmF3aW5nbWwvMjAwNi9jaGFydERyYXdpbmciCiAgeG1sbnM6ZGdtPSJodHRwOi8vc2NoZW1hcy5vcGVueG1sZm9ybWF0cy5vcmcvZHJhd2luZ21sLzIwMDYvZGlhZ3JhbSIKICB4bWxuczpwaWM9Imh0dHA6Ly9zY2hlbWFzLm9wZW54bWxmb3JtYXRzLm9yZy9kcmF3aW5nbWwvMjAwNi9waWN0dXJlIgogIHhtbG5zOm5zMTE9Imh0dHA6Ly9zY2hlbWFzLm9wZW54bWxmb3JtYXRzLm9yZy9kcmF3aW5nbWwvMjAwNi9zcHJlYWRzaGVldERyYXdpbmciCiAgeG1sbnM6ZHNwPSJodHRwOi8vc2NoZW1hcy5taWNyb3NvZnQuY29tL29mZmljZS9kcmF3aW5nLzIwMDgvZGlhZ3JhbSIKICB4bWxuczpuczEzPSJ1cm46c2NoZW1hcy1taWNyb3NvZnQtY29tOm9mZmljZTpleGNlbCIKICB4bWxuczpvPSJ1cm46c2NoZW1hcy1taWNyb3NvZnQtY29tOm9mZmljZTpvZmZpY2UiCiAgeG1sbnM6dj0idXJuOnNjaGVtYXMtbWljcm9zb2Z0LWNvbTp2bWwiCiAgeG1sbnM6dzEwPSJ1cm46c2NoZW1hcy1taWNyb3NvZnQtY29tOm9mZmljZTp3b3JkIgogIHhtbG5zOm5zMTc9InVybjpzY2hlbWFzLW1pY3Jvc29mdC1jb206b2ZmaWNlOnBvd2VycG9pbnQiCiAgeG1sbnM6b2R4PSJodHRwOi8vb3BlbmRvcGUub3JnL3hwYXRocyIKICB4bWxuczpvZGM9Imh0dHA6Ly9vcGVuZG9wZS5vcmcvY29uZGl0aW9ucyIKICB4bWxuczpvZHE9Imh0dHA6Ly9vcGVuZG9wZS5vcmcvcXVlc3Rpb25zIgogIHhtbG5zOm9kaT0iaHR0cDovL29wZW5kb3BlLm9yZy9jb21wb25lbnRzIgogIHhtbG5zOm9kZ209Imh0dHA6Ly9vcGVuZG9wZS5vcmcvU21hcnRBcnQvRGF0YUhpZXJhcmNoeSIKICB4bWxuczpuczI0PSJodHRwOi8vc2NoZW1hcy5vcGVueG1sZm9ybWF0cy5vcmcvb2ZmaWNlRG9jdW1lbnQvMjAwNi9iaWJsaW9ncmFwaHkiCiAgeG1sbnM6bnMyNT0iaHR0cDovL3NjaGVtYXMub3BlbnhtbGZvcm1hdHMub3JnL2RyYXdpbmdtbC8yMDA2L2NvbXBhdGliaWxpdHkiCiAgeG1sbnM6bnMyNj0iaHR0cDovL3NjaGVtYXMub3BlbnhtbGZvcm1hdHMub3JnL2RyYXdpbmdtbC8yMDA2L2xvY2tlZENhbnZhcyI+CiAgPHc6Ym9keT4KICAgIDx3OmFsdENodW5rIHI6aWQ9Imh0bWxDaHVuayIgLz4KICAgIDx3OnNlY3RQcj4KICAgICAgPHc6cGdTeiB3Onc9IjEyMjQwIiB3Omg9IjE1ODQwIiB3Om9yaWVudD0icG9ydHJhaXQiIC8+CiAgICAgIDx3OnBnTWFyIHc6dG9wPSIxNDQwIgogICAgICAgICAgICAgICB3OnJpZ2h0PSIxNDQwIgogICAgICAgICAgICAgICB3OmJvdHRvbT0iMTQ0MCIKICAgICAgICAgICAgICAgdzpsZWZ0PSIxNDQwIgogICAgICAgICAgICAgICB3OmhlYWRlcj0iNzIwIgogICAgICAgICAgICAgICB3OmZvb3Rlcj0iNzIwIgogICAgICAgICAgICAgICB3Omd1dHRlcj0iMCIvPgogICAgPC93OnNlY3RQcj4KICA8L3c6Ym9keT4KPC93OmRvY3VtZW50PgpQSwMECgAAAAAAMx7aViKj6h8LDQAACw0AABAAAAB3b3JkL2FmY2h1bmsubWh0TUlNRS1WZXJzaW9uOiAxLjAKQ29udGVudC1UeXBlOiBtdWx0aXBhcnQvcmVsYXRlZDsKICAgIHR5cGU9InRleHQvaHRtbCI7CiAgICBib3VuZGFyeT0iLS0tLT1taHREb2N1bWVudFBhcnQiCgoKLS0tLS0tPW1odERvY3VtZW50UGFydApDb250ZW50LVR5cGU6IHRleHQvaHRtbDsKICAgIGNoYXJzZXQ9InV0Zi04IgpDb250ZW50LVRyYW5zZmVyLUVuY29kaW5nOiBxdW90ZWQtcHJpbnRhYmxlCkNvbnRlbnQtTG9jYXRpb246IGZpbGU6Ly8vQzovZmFrZS9kb2N1bWVudC5odG1sCgo8aHRtbCB4bWxuczpvPTNEJ3VybjpzY2hlbWFzLW1pY3Jvc29mdC1jb206b2ZmaWNlOm9mZmljZScgeG1sbnM6dz0zRCd1cm46c2NoZW1hcy1taWNyb3NvZnQtY29tOm9mZmljZTp3b3JkJyB4bWxucz0zRCdodHRwOi8vd3d3LnczLm9yZy9UUi9SRUMtaHRtbDQwJz48aGVhZD48bWV0YSBjaGFyc2V0PTNEJ3V0Zi04Jz48dGl0bGU+U0lBUCB+IGFidSBtdXNhIGNvbXB1dGVyPC90aXRsZT48L2hlYWQ+PGJvZHk+PHAgc3R5bGU9M0QidGV4dC1hbGlnbjogY2VudGVyOyI+PHN0cm9uZz5EQUZUQVIgS0lUQUIgS1VOSU5HIFlBTkcgRElBSkFSS0FOPGJyPgogICAgICAgICAgICAgIERBTiBNRU5KQURJIFJVSlVLQU4gS0VJTE1VQU48YnI+CiAgICAgICAgICAgICAgUE9ORE9LIFBFU0FOVFJFTiBDT05UT0g8YnI+CiAgICAgICAgICAgICAgVEFIVU4gUEVMQUpBUkFOIDIwMjIvMjAyMzwvc3Ryb25nPjwvcD4gPHRhYmxlIGJvcmRlcj0zRCIxIiBzdHlsZT0zRCJib3JkZXItY29sbGFwc2U6IGNvbGxhcHNlOyI+PHRib2R5Pjx0cj48dGQgc3R5bGU9M0Qid2lkdGg6IDQ1cHg7IHRleHQtYWxpZ246IGNlbnRlcjsiPjxwPjxzdHJvbmc+Tm88L3N0cm9uZz48L3A+PC90ZD4gPHRkIHN0eWxlPTNEIndpZHRoOiAxNTBweDsgdGV4dC1hbGlnbjogY2VudGVyOyI+PHA+PHN0cm9uZz5CaWRhbmcgU3R1ZGk8L3N0cm9uZz48L3A+PC90ZD4gPHRkIHN0eWxlPTNEIndpZHRoOiA0NXB4OyB0ZXh0LWFsaWduOiBjZW50ZXI7Ij48cD48c3Ryb25nPk5vPC9zdHJvbmc+PC9wPjwvdGQ+IDx0ZCBzdHlsZT0zRCJ0ZXh0LWFsaWduOiBjZW50ZXI7Ij48cD48c3Ryb25nPkp1ZHVsIEtpdGFiIEt1bmluZyBkYW4gUGVuZ2FyYW5nPC9zdHJvbmc+PC9wPjwvdGQ+IDx0ZCBzdHlsZT0zRCJ3aWR0aDogMTI2LjYwOXB4OyB0ZXh0LWFsaWduOiBjZW50ZXI7Ij48cD48c3Ryb25nPkplbmphbmc8L3N0cm9uZz48L3A+PC90ZD48L3RyPjwvdGJvZHk+PHRib2R5Pjx0cj48dGQgcm93c3Bhbj0zRCIxIiBzdHlsZT0zRCJ0ZXh0LWFsaWduOiBjZW50ZXI7IHBhZGRpbmc6IDVweDsiPjE8L3RkPiA8dGQgcm93c3Bhbj0zRCIxIiBzdHlsZT0zRCJwYWRkaW5nOiA1cHg7Ij5GSVFIPC90ZD4gPHRkIHN0eWxlPTNEInRleHQtYWxpZ246IGNlbnRlcjsgcGFkZGluZzogNXB4OyI+MTwvdGQ+IDx0ZCBzdHlsZT0zRCJwYWRkaW5nOiA1cHg7Ij48Yj5GQVRIVUwgUU9SSUI8L2I+PGJyPjxpPi08L2k+PC90ZD4gPHRkIHN0eWxlPTNEInBhZGRpbmc6IDVweDsiPnVsYTwvdGQ+PC90cj48dHI+PHRkIHJvd3NwYW49M0QiMiIgc3R5bGU9M0QidGV4dC1hbGlnbjogY2VudGVyOyBwYWRkaW5nOiA1cHg7Ij4yPC90ZD4gPHRkIHJvd3NwYW49M0QiMiIgc3R5bGU9M0QicGFkZGluZzogNXB4OyI+SEFESVRTPC90ZD4gPHRkIHN0eWxlPTNEInRleHQtYWxpZ246IGNlbnRlcjsgcGFkZGluZzogNXB4OyI+MTwvdGQ+IDx0ZCBzdHlsZT0zRCJwYWRkaW5nOiA1cHg7Ij48Yj5BbC1KYW1p4oCZdXNoIFNoYWhpaDwvYj48YnI+PGk+SW1hbSBBbC1CdWtoYXJpIChTaGFoaWggQnVraGFyaSk8L2k+PC90ZD4gPHRkIHN0eWxlPTNEInBhZGRpbmc6IDVweDsiPnVsYTwvdGQ+PC90cj48dHI+PCEtLS0tPiA8IS0tLS0+IDx0ZCBzdHlsZT0zRCJ0ZXh0LWFsaWduOiBjZW50ZXI7IHBhZGRpbmc6IDVweDsiPjI8L3RkPiA8dGQgc3R5bGU9M0QicGFkZGluZzogNXB4OyI+PGI+QWwtSmFtaeKAmXVzaCBTaGFoaWg8L2I+PGJyPjxpPkltYW0gTXVzbGltPC9pPjwvdGQ+IDx0ZCBzdHlsZT0zRCJwYWRkaW5nOiA1cHg7Ij51bHlhPC90ZD48L3RyPjx0cj48dGQgcm93c3Bhbj0zRCIyIiBzdHlsZT0zRCJ0ZXh0LWFsaWduOiBjZW50ZXI7IHBhZGRpbmc6IDVweDsiPjM8L3RkPiA8dGQgcm93c3Bhbj0zRCIyIiBzdHlsZT0zRCJwYWRkaW5nOiA1cHg7Ij5BS0hMQVE8L3RkPiA8dGQgc3R5bGU9M0QidGV4dC1hbGlnbjogY2VudGVyOyBwYWRkaW5nOiA1cHg7Ij4xPC90ZD4gPHRkIHN0eWxlPTNEInBhZGRpbmc6IDVweDsiPjxiPtin2YTYo9iu2YTYp9mCINin2YTYp9iz2YTYp9mF2YrYqSDZiNij2LPYs9mH2Kc8L2I+PGJyPjxpPiDYudio2K8g2KfZhNix2K3ZhdmGINit2KjZhtmD2Kkg2KfZhNmF2YrYr9in2YbZijwvaT48L3RkPiA8dGQgc3R5bGU9M0QicGFkZGluZzogNXB4OyI+dWx5YTwvdGQ+PC90cj48dHI+PCEtLS0tPiA8IS0tLS0+IDx0ZCBzdHlsZT0zRCJ0ZXh0LWFsaWduOiBjZW50ZXI7IHBhZGRpbmc6IDVweDsiPjI8L3RkPiA8dGQgc3R5bGU9M0QicGFkZGluZzogNXB4OyI+PGI+QWtobGFxIExpbCBCYW5pbjwvYj48YnI+PGk+U3llaWtoIFVtYXIgYmluIEFobWFkIEJhcmFkamE8L2k+PC90ZD4gPHRkIHN0eWxlPTNEInBhZGRpbmc6IDVweDsiPnd1c3RobzwvdGQ+PC90cj48dHI+PHRkIHJvd3NwYW49M0QiMSIgc3R5bGU9M0QidGV4dC1hbGlnbjogY2VudGVyOyBwYWRkaW5nOiA1cHg7Ij40PC90ZD4gPHRkIHJvd3NwYW49M0QiMSIgc3R5bGU9M0QicGFkZGluZzogNXB4OyI+QVFJREFIPC90ZD4gPHRkIHN0eWxlPTNEInRleHQtYWxpZ246IGNlbnRlcjsgcGFkZGluZzogNXB4OyI+MTwvdGQ+IDx0ZCBzdHlsZT0zRCJwYWRkaW5nOiA1cHg7Ij48Yj5BcWlkYXR1bCBBd2FtPC9iPjxicj48aT5TeWFpaCBBaG1hZCBNYXJ6dWtpPC9pPjwvdGQ+IDx0ZCBzdHlsZT0zRCJwYWRkaW5nOiA1cHg7Ij53dXN0aG88L3RkPjwvdHI+PHRyPjx0ZCByb3dzcGFuPTNEIjEiIHN0eWxlPTNEInRleHQtYWxpZ246IGNlbnRlcjsgcGFkZGluZzogNXB4OyI+NTwvdGQ+IDx0ZCByb3dzcGFuPTNEIjEiIHN0eWxlPTNEInBhZGRpbmc6IDVweDsiPkhBRElUUzwvdGQ+IDx0ZCBzdHlsZT0zRCJ0ZXh0LWFsaWduOiBjZW50ZXI7IHBhZGRpbmc6IDVweDsiPjE8L3RkPiA8dGQgc3R5bGU9M0QicGFkZGluZzogNXB4OyI+PGI+THViYWJ1bCBIYWRpdHM8L2I+PGJyPjxpPmphbGFsdWRkaW4gYmluIGthbWFsdWRkaW4gYXMtc3V5dXRoaTwvaT48L3RkPiA8dGQgc3R5bGU9M0QicGFkZGluZzogNXB4OyI+dWxhPC90ZD48L3RyPjwvdGJvZHk+PC90YWJsZT48L2JvZHk+PC9odG1sPgoKCgotLS0tLS09bWh0RG9jdW1lbnRQYXJ0LS0KUEsDBAoAAAAAADMe2lYAAAAAAAAAAAAAAAALAAAAd29yZC9fcmVscy9QSwMECgAAAAAAMx7aVlkhU5oyAQAAMgEAABwAAAB3b3JkL19yZWxzL2RvY3VtZW50LnhtbC5yZWxzPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/Pgo8UmVsYXRpb25zaGlwcyB4bWxucz0iaHR0cDovL3NjaGVtYXMub3BlbnhtbGZvcm1hdHMub3JnL3BhY2thZ2UvMjAwNi9yZWxhdGlvbnNoaXBzIj4KICA8UmVsYXRpb25zaGlwIFR5cGU9Imh0dHA6Ly9zY2hlbWFzLm9wZW54bWxmb3JtYXRzLm9yZy9vZmZpY2VEb2N1bWVudC8yMDA2L3JlbGF0aW9uc2hpcHMvYUZDaHVuayIKICAgIFRhcmdldD0iL3dvcmQvYWZjaHVuay5taHQiIElkPSJodG1sQ2h1bmsiIC8+CjwvUmVsYXRpb25zaGlwcz4KUEsBAhQACgAAAAAAMx7aVpYldpbRAQAA0QEAABMAAAAAAAAAAAAAAAAAAAAAAFtDb250ZW50X1R5cGVzXS54bWxQSwECFAAKAAAAAAAzHtpWAAAAAAAAAAAAAAAABgAAAAAAAAAAABAAAAACAgAAX3JlbHMvUEsBAhQACgAAAAAAMx7aVg/CL+VKAQAASgEAAAsAAAAAAAAAAAAAAAAAJgIAAF9yZWxzLy5yZWxzUEsBAhQACgAAAAAAMx7aVgAAAAAAAAAAAAAAAAUAAAAAAAAAAAAQAAAAmQMAAHdvcmQvUEsBAhQACgAAAAAAMx7aViI/IeAICAAACAgAABEAAAAAAAAAAAAAAAAAvAMAAHdvcmQvZG9jdW1lbnQueG1sUEsBAhQACgAAAAAAMx7aViKj6h8LDQAACw0AABAAAAAAAAAAAAAAAAAA8wsAAHdvcmQvYWZjaHVuay5taHRQSwECFAAKAAAAAAAzHtpWAAAAAAAAAAAAAAAACwAAAAAAAAAAABAAAAAsGQAAd29yZC9fcmVscy9QSwECFAAKAAAAAAAzHtpWWSFTmjIBAAAyAQAAHAAAAAAAAAAAAAAAAABVGQAAd29yZC9fcmVscy9kb2N1bWVudC54bWwucmVsc1BLBQYAAAAACAAIAOEBAADBGgAAAAA=

I have decoded it using javascript, but the decoded results are not as expected, where if the above link is opened using a windows web browser (chome) the results can be opened, but if opened using app inventor via webstring it cannot, as for the javascript file to open is as follows :

<script>
function decodeBase64BlobToText(base64Blob, encoding) {
  var binaryString = atob(base64Blob);
  var decoder = new TextDecoder(encoding);
  var decodedText = decoder.decode(new Uint8Array([...binaryString].map(char => char.charCodeAt(0))));
  return decodedText;
}

var base64Blob = AppInventor.getWebViewString(); // Base64-encoded blob yang akan didekodekan
const base64 = base64Blob.split(',')[1];
var encoding = 'windows-1252';
var decodedText = decodeBase64BlobToText(base64, encoding);
AppInventor.setWebViewString(decodedText);
</script>

above javascript I provide additional character encoding, but still failed to decode base64 above. Is it my fault from the decode, or is it true that Android can't decode base64 with full characters, because I open the decode file from the Chrome webbrowser, there are different characters from the decode results using the application + javascript

Please help

9

Is your example datauri just an empty word document ?

Why can you not just download the file ?

10

the file I want to download is the result of converting from json to docx done by javascript, therefore it starts with blob.

when I want to download it directly, an error message "only http/https" appears, or if not the error immediately closes the application, this is because the url that I want to download does not start with http or https, but starts with a blob

I was looking for references, it turns out that Android can't download using the download manager, so I tried the trick to change the blob to base64data again.

11

the point is, those who want to help, please copy the entire code section below, and paste it in the pc web browser url, it will download automatically;

12

Could you please answer my questions above ?

13

With this extension you can convert a Base64 String to a file in the ASD.

dsfererere
dsfererere854×225 14.9 KB

borrar_dcosx.aia (26.5 KB)