How to download a file using base64 string

Ask the community
,
1

I have an API that returns a base64 string on calling. How do I allow the user to download the image generated using it?

2

You can convert the base64 to blob, create a blob url and assign it to the html property of a text element.

For example:

  1. Put a text element on the page

  2. Install the blob-utl NPM

  3. Use the following code:

import {base64StringToBlob, createObjectURL} from 'blob-util';
const contentType = 'image/png';
const blob = base64StringToBlob(b64Data, contentType);
const blobURL = createObjectURL(blob);
$w.onReady(() => {
$w('#text1').html = `<a href=${blobURL} download>DOWNLOAD</a>`;
});

Maybe there’re easier ways to do it, but I’ve tested it and it worked for me.
(Some browser will automatically download it, others will ask whether or not to download).

3

Hi J.D.

Thank you so much for your answer!
I had one more question: is it possible to convert an image to base64 string using a wix library?

4

You can install an NPM for that. There’re several packages for that. for example: image-to-base64, but there’re more.
You can search the web for which is the most popular package,

5

Nice one J.D.! Works!
Google-Chrome do the DOWNLOAD automaticaly.

6

J.D. i did a quick testing to get the BASE-64-String out of an IMAGE-URL, but get an error when doing this, do you have a quick-tip what’s wrong?

import imageToBase64 from 'image-to-base64/browser'

$w.onReady(()=> {$w('#btnDownload').onClick(()=>{get_BASE64();});});

function get_BASE64() {
   imageToBase64(
     "https://static.wixstatic.com/media/57da6c_6827cffec78041aeb2c5779b0fdfe9aa~mv2.png")
    .then((response)=> {console.log(response); // "iVBORw0KGgoAAAANSwCAIA..."
    })
    .catch((error)=> {console.log(error);});
}

I get this one…


…telling me → Window not defined.

BTW: I used your suggestion…
You can install an NPM for that. There’re several packages for that. for example: image-to-base64, but there’re more.
You can search the web for which is the most popular package,

7

To elaborate a little bit more…

Like mentioned by Bruno in the shown post, i am using nothing else as the mentioned file-url…
“https://static.wixstatic.com/media/57da6c_6827cffec78041aeb2c5779b0fdfe9aa~mv2.png”

What i am doing wrong here?

8

Velo-Ninja, I haven’t tried it, the error you posted indicates that the package you selected requires an access to the window object, therefore you can only use it in a custom element file. So either use the custom element or select a different package.

9

@jonatandor35
Ok, understood. Damn! Than this NPM is useless for me. I am searching for an HTML-FREE-SOLUTION :grin: (How it can be done using HTML-Code-Parts → i already know :laughing:).

Can you suggest an NPM which would also work without the need of creating an Custom element or usage of HTML-Coponents?

10

@russian-dima I don’t know. The other way around (from base64 to image) can be done by buffer package. You’ll have to make a research.

11

Thanks JD! The data download link works in my older site (been running since 2016), but not the newer one (2022). How can I get this working now that they block this type of link?

<a href="data:image/png;base64,iVBORw0KGgoEXAMPLE..." download>download</a>

The line above works perfectly in the older site, but in the newer one I get a “unsupported link type” error from Wix. Any ideas on how to get around that now and have similar functionality as before?

12

I haven’t tried it recently, and can’t say if it can work (sometimes Wix change their api and it affects the supported links)…
But you can always create this html node in a custom element and it should work there.