I generated a QR code using the WIX example (https://www.wix.com/velo/example/qr-code-generator) and there is a line - $w(“#qrvector”).src = qr - that replaces a placeholder vector image on my screen with the generated QR code.
Great. Now I want to save that QR code to a collection using the insert() function. But when I run this code a new row is created in the collection, and instead of inserting the qr code it inserts the original placeholder image into the qrCode field.
//Collection name is “QRCodeImages” and its qrCode field is set to image type
let fileName = “TestQRCode”
let qrImage = $w(“#qrvector”).src
let toInsert = {
“fileName”: fileName
“qrCode”: qrImage
};
wixData.insert(“QRCodeImages”, toInsert)
So I start with a vector graphic called placeholder.svg on the screen as “#qrvector”.
When I generate a QR code, its value is assigned as $w(“#qrvector”).src = qr where qr is:
The QR has now visibly replaced the placeholder image on the screen at #qrvector. Now to add it to the collection.
I press a button to insert the data. When I check the value of #qrvector.src it is:
wix:vector://v1/11062b_b7dd5e6c02d849f0a0f97fce855820de.svg/placeholder
After running the insert code, I find a new row has been created in the Collection with the correct filename, but the file that appears in the qrImage field is either:
a) The original placeholder.svg file that was on the screen before the QR code was generated.
b) A thin red slash indicating a file that cannot be opened. However, when I download this file it is invariably a 1055KB file called “true.htm.”
I love the clever simplicity of your explanation, and it almost works.
After running the amended line of code I checked the collection and found a new row had been successfully inserted, but as before the qrImage field contains a thin red slash. So I tried changing the field type from image to “text” and it became apparent that qr – the long chunk of text in the image above – had indeed saved into the collection’s qrImage field.
The problem then, is that it is saved verbatim – as a line of text. What I need is the generated QR code that is displayed on the screen as #qrvector to save to the collection image field as a .svg file.
Just found the solution to this so worth posting if anyone needs this in the future.
Here are the steps:
Install the qrcode npm library from Packages & Apps.
In Public and Backend create a new .jsw file. I’ve named it codeGenerator.jsw
In the editor, drag an image component, a text input, and a button. I’m keeping the IDs of the image to qrImg, button as generateButton and the input box as qrInput.
Now, copy and paste the below code in the the backend file codeGenerator.jsw:
import * as QRCode from 'qrcode'
export async function makeQr(text) {
try {
let qr = await QRCode.toDataURL(text)
return qr
} catch (error) {
console.log(error)
}
}
And finally, copy and paste this code in the frontend:
import wixData from 'wix-data';
import { makeQr } from 'backend/codeGenerator.jsw';
const collectionId = "qrTest";
var qr;
$w.onReady(function () {
console.log("Page ready");
$w('#generateButton').onClick(async () => {
console.log("Generating QR...");
const toGenerate = $w('#qrInput').value;
qr = await makeQr(toGenerate);
$w('#qrImg').src = qr;
console.log("Saving to database...");
let toSave = {
title: $w('#qrInput').value,
qrImg: qr
};
wixData
.save(collectionId, toSave)
.then((results) => {
console.log("QR Saved successfully", results);
})
.catch((err) => {
console.log("Error while saving QR", err);
});
})
});
And there you have it, your QR code will be saved inside the CMS.
POINTS TO NOTE:
Make sure to update the collectionId and field IDs to the ones in your database.
If the QR code is not getting saved, check your CMS permissions and make sure they’re set correctly or use suppressAuth.
Make sure the QR Placeholder on the editor is an Image and not an SVG.
Make sure that the field in your collection where you’re saving the QR is an Image field.
The only workaround I thought about is to generate QR code every time I need it… not efficient, but works…
Would appreciate any help or workarounds! Also, if you know how I can change the rounding of the dots, and have an image in the middle, that would be great too!
Hmm that’s weird. The code that I’ve provided is tried and tested, and works with an image element as well. As is the case in MasterProgramming’s video too, which uses an image element.
Here’s a test site I’ve created which also uses an Image element, and not an SVG, and works well. Check it out:
Worth noting that both these sites are classic Wix editor sites. The editor shouldn’t be a problem here but just curious: are you using the standard Wix editor or Studio?
And to answer your other questions:
.web.js is the new norm now, however .jsw should continue to work just fine. Read more
I’m not sure if this particular NPM package supports that, you can check it out in the docs. If not, there are tons of NPM QR Code packages that will allow you to do that.
