qr - data path to vcard about svelte-put

[extensionteamhq]

Hi @vnphanquang, thanks for the quick reply.

It's not encoding the contents of the file /vcard.vcf but instead encoding the literal string of /vcard.vcf.

The examples I've seen are using a URL (e.g., https://example.org/) and that works fine, or as intended, passing a URL as the string of data to encode.

I would, however, like to encode the contents of the file at /vcard.vcf, which is just a text file—similar to this:

BEGIN:VCARD
VERSION:3.0
REV:2024-04-08T00:00:00Z
PROFILE:VCARD
SOURCE:http://personaldomain.com/vcard.vcf
CLASS:public
FN:Alex Suprun
ORG:Company Name
LOGO;TYPE=PNG:http://workdomain.com/logo.png
ADR;TYPE=WORK;TYPE=PREF:Company Name;Ste 100;7900 4th St N;St. Petersburg;FL;33702;USA
URL;TYPE=WORK;TYPE=PREF:https://workdomain.com/
TEL;TYPE=WORK;TYPE=VOICE:[phone]
EMAIL;TYPE=INTERNET;TYPE=WORK;TYPE=PREF:[email protected]
TITLE:Avatar
ROLE:Member
N:Suprun;Alex;;;
NICKNAME:Spuns
PHOTO;TYPE=PNG;VALUE=URI:http://personaldomain.com/photo.jpg
ADR;TYPE=HOME:;;1234 Main St N;St. Petersburg;FL;33701;USA
TEL;TYPE=CELL;TYPE=VOICE;TYPE=PREF:[phone]
TEL;TYPE=OTHER;TYPE=VOICE:[phone]
EMAIL;TYPE=INTERNET;TYPE=HOME:[email protected]
EMAIL;TYPE=INTERNET;TYPE=OTHER:[email protected]
URL;TYPE=HOME:https://personaldomain.com/
URL;TYPE=OTHER:https://otherdomain.com/
TZ:-0500
X-SOCIALPROFILE;TYPE=Facebook:alexsuprun
X-SOCIALPROFILE;TYPE=Twitter:alexsuprun
X-SOCIALPROFILE;TYPE=LinkedIn:alexsuprun
X-SOCIALPROFILE;TYPE=Instagram:alexsuprun
X-SOCIALPROFILE;TYPE=YouTube:alexsuprun
X-SOCIALPROFILE;TYPE=TikTok:alexsuprun
CATEGORIES:avatar,persona,mockup
NOTE:I'm Alex Suprun, a connoisseur of the subtle art of connection. I weave the mundane into the magical with ease, turning pet whispers into the talk of the town. My knack for reading a room's vibe rivals ancient oracles, and my adventures often involve epic quests for legendary late-night snacks.
END:VCARD

I hope that examples my scenario better.

[extensionteamhq]

Hi @vnphanquang, Thanks again for the quick reply. What you provided was very helpful and informative. Also, thank you for building out the two examples; they helped me understand what was being said.

[vnphanquang]

Hello @extensionteamhq. A couple of things:

If I use the relative path /vcard.vcf the result is search "/vcard.vcf".

Data is encoded as is, and I believe that is how it should be with any QR. @svelte-put/qr cannot assume any external context, i.e it cannot automatically prepend the current origin, if any, to your relative path, if that is what you mean.

---

If I use a full path, https://example.com/vcard.vcf, the result is a link to https://example.com/.

Can you provide a reproduction for this? Here is a REPL using https://example.com/ as the data for enconding.

[vnphanquang]

Hello @extensionteamhq, thanks for the clarification. Just so we are on the same page, you want to encode the content of your vcard.vcf file in the QR code yes?

As I've mentioned, whatever passed to the data option is the QR-encoded data; @svelte-put does not automatically fetch the file for you. In other words, if you want to encode the file content, you need to pass that content as the data option. There are multiple ways to do this:

• if your file is completely static, just import using Vite '?raw' syntax (assume you are using Svelte with Vite).
• if your file is dynamic or has to live in the /static directory, do a fetch and pass the response text as data.

I've put together an example here showing both of the methods above. Please take a look and let me know if that's what you are looking for.

Important

The content of your vcard.vcf is quite a lot in size. Notice, in the given example, I had to change the error correction level to either S or M to be able to fit the data in the generated QR. You can check out the QR capacity and play around more using this demo site.