Create a 'download' button for new QR code generator

Ask the community
,
1

Greetings and salutations,

I created a website using the new QR Code Generator example. I noticed that the users cannot actually download the generated QR code. Is there a way that I can add a “download” button so the users can download their created QR code?

Please and thank you,
Dale Kalber

1 Like
2

Hi Dale,

One way to accomplish this is to upload the SVG that is generated to the Media Manager upon creation of a QR Code. You can then generate a download link based on the fileUrl.

Using the example code you provided, we can add the following functions to qrCode.jsw :

import { mediaManager } from 'wix-media-backend';

export async function getDownloadUrl(fileUrl) {
  const getDownloadUrl = await mediaManager.getDownloadUrl(fileUrl);  
  return getDownloadUrl;
}

export function uploadImage(buffer,fileName) {
  //Ensures proper filename is established (no invalid characters)
  fileName = fileName.replace(/[/\\?%*:|."<>]/g, '-');
  return mediaManager.upload(
    "/QR",
    buffer,
    `${fileName}`,
    {
      "mediaOptions": {
        "mimeType": "image/svg+xml",
        "mediaType": "vector"
      },
      "metadataOptions": {
        "isPrivate": false,
        "isVisitorUpload": true
      }
    }
  );
}

uploadImage() will be used to upload the SVG that is generated via the ‘qrcode’ NPM Package. It returns a fileUrl once the SVG is successfully uploaded.

getDownloadUrl() will then be used to generate a link that will download the SVG to the users local computer.

Next we’ll add a download button to the Home Page:

2878×1638 204 KB

We will then modify the Page Code (Home) to look like the following snippet:

import { generateQRcode,uploadImage,getDownloadUrl } from 'backend/qrCode.jsw';

let fileUrl,downloadUrl;

$w.onReady(() => {
    $w('#generateButton').onClick(async () => {
        const qrValue = $w('#qrInput').value;
        const qr = await generateQRcode(qrValue);
        
        //Upload QR to Media Manager
        const upload = await uploadImage(qr,qrValue);
        fileUrl = upload.fileUrl;
        
        //Show QR Code on Client Side
        $w('#qrVector').src = qr;

        //Adds Download Link to Button
        downloadUrl = await getDownloadUrl(fileUrl);
        $w('#downloadQR').link = downloadUrl;
    });
});

If you need the SVG to be converted to another image file format, or if you would like to download the SVG fully client side, it may be possible via additional NPM Packages and/or a Custom Element.

3

And if you don’t want to upload each file to the servers, you can use a custom element with blob URL.
Something like:

//custom element file
class DownloadButton extends HTMLElement {
    constructor(){
    super().attachShadow({mode: 'open'});
    this.initiated = false;
    this.initiate = this.initiate.bind(this);
    }
    connectedCallback() {
        this.initiate();
    }
    static get observedAttributes() { return ['svg-string']; }
    attributeChangedCallback(name, _ ,newValue) {
        if (name === 'svg-string') {
            this.initiate();
            const button = this.shadowRoot.getElementById('download-button');
            button.setAttribute('href', window.URL.createObjectURL(new Blob([newValue])))
        }
}
initiate(){
    if(this.initiated){return;}
    this.initiated = true;
    const s = this.shadowRoot;
    const style = document.createElement('style');
    style.innerHTML = `#download-button{background-color:orange;padding:15px;padding-left:40px;padding-right:40px;color:white;border-radius:8px;text-decoration:none;}`;
    const a = document.createElement('a');
    [a.id, a.download, a.innerHTML] = ['download-button', 'qr.svg', 'Download QR'];
    s.appendChild(style);
    s.appendChild(a);
}
}
customElements.define('svg-download', DownloadButton);

And on the page put a custom element attach it to the file.
And have:

$w('#customElement').setAttribute('svg-string', qrSvgString);