New Plugin: Barcode Generator (FREE)

Unfortunately, no. Bubble.io uses {{Website Home URL}}/fileupload to actually upload files. I discovered this later, but this is actually an unprotected file upload, and a severe vulnerability (Critical Bubble Vulnerability (Terms of Service Violation) They Don't Seem To Care Enough About). However, it is also the only way for a Bubble plugin to easily upload a file to the file manager (and its also the way Bubble recommends doing it for whatever reason).

Thanks for your thorough answer!

1 Like

@nicholasrbarrow is it possible to generate vCard QR Codes with this plugin?

Thank You in advance,
Sérgio

@sergio.luis.santos90 that’s not a feature that’s currently built in by default; you can encode whatever data you’d like into the QR Code, and theoretically you’d be able to encode the data formatted per the various vCard RFC specifications (basic overview of the difficulties with the various specifications is seen here, how there seems to be multiple and overlapping RFCs: vCard - Wikipedia). We may be able to code something custom for you if this is an urgent need; feel free to shoot me an email nbarrow@inspiretmstech.com if that’s something you’d like to explore or talk through.

@nicholasrbarrow thank you for the quick reply. I’ve just sent you an email with a bit more context of what is intended for the app that I’m developing.

Hi Nicholas, is it possible to change the file type from svg for both the barcode and qr code generated to either a png or jpg file and create a width/height for a qr code?

Hi @bailey , thanks for reaching out. The reason I had to switch to SVG was to be able to support 100% compatibility on the backend. Bubble’s custom AWS backend does not support node-canvas, the library needed to render images in more modern formats (i.e., png, jpeg, etc), so the only image formats I can render are text/xml-based, such as SVG. SVG’s are compatible with Bubble’s built-in image displayer, so you should be able to show them on screen at least. What is your use case? Any particular reason why only PNG/JPEG will work? If it’s a hardship, I can probably create something to convert from SVG => desired file type, but this would only work on the frontend and would not be backend-compatible.

Edit: @bailey if you use the QR Code with Logo generator (shown here: https://nrb-tester.bubbleapps.io/version-test/server-side-qr-code), that outputs as a PNG, just front-end only for the reasons mentioned above.

Thanks for the detailed response @nicholasrbarrow. I’m using your barcode generator in a backend workflow to generate a barcode and qr code for certain database entries. After the codes are generated, I then create a pdf using pdf conjurer of that entry for the user to print. pdf conjurer only renders jpg/png images in pdfs. Given the limitations with bubble backend not supporting node-canvas I might reach out to pdf conjurer and see if it’s possible for them to also use svg files when generating pdfs.

@bailey I think @vini_brito might know more than me about whether PDF Conjurer can handle SVG image embeds, he handles the plugin’s development.

1 Like

Yes, I just reached out to him. He’d need to investigate this further and doesn’t have the resources to do this at the moment. In the interim we’ll implement a conversion api service to convert the svg to png/jpg

Hi @bailey

I am trying the axact same thing. 1. Generating a Barcode 2. Insert Barcode on a PDF… As a third step i am sending the PDF to PrintNode with API.

Did you get any news from @vini_brito ? Any chance to insert SVG to PDF Conjurer now at this point?

Or any other idea how to solve the issue?

Thanks for any advice

PDF Conjurer doesn’t support SVG yet, sorry. Maybe one day!

Thanks for fast reply and your massive effort you put into this great plugin!!

People like you make bubble the best place in web :+1::heart:

1 Like

Hi @nicholasrbarrow

Regarding your answer to @bailey i wanted to ask if it’s possible to add a Barcode generator funtionallity (like the QR Code with Logo generator) wich renders on the front-end only, to be able to get a PNG output as well.

Also i wanted to thank you for the great Plugin and help to all of us (no slime:)!

Hey @store, thanks for reaching out. The plugin was originally a front-end only plugin that did output other than SVG; the issue is that I get a lot of emails from people because their users are experiencing issues generating content and getting errors (especially on mobile devices and older browsers) that had nothing to do with the plugin itself and everything to do with the less-than-ideal runtime conditions client-side. Ergo, the only way to 100% eliminate these errors is to use server-side actions.

Bubble, for whatever reason, has decide that it does not want to support the necessary server-side requirements for node-canvas to be able to work. To be brief, node-canvas is the go-to standard for rendering content server-side; without it, we (as developers) are limited to formats that can be rendered without a virtual canvas object; SVG, which is based on an XML-style format and not a rendered-pixel format, does not need node-canvas.

Hence, I made the tough choice to go with SVGs. Honestly, I prefer SVGs myself because you never lose any quality in the image.

The way I see it, the best path forward is
(a) to leave the existing plugin as it is, because it meets the criteria I outlined above (which were my original design goals/philosophy with the rebuild).
(b) to find a way to convert the SVG to PNG/JPEG at run-time, i.e., client-side and in the browser. This might be doable with some custom plugin work, and if you’re interested in a custom plugin, I can get you a quote. Otherwise, you’ll want to turn to an API service like this one, for a very quick example (warning, I’ve never used it before, it was just the first reputable-looking one that Google popped up): https://www.convertapi.com/svg-to-png.

Edit: if you just need barcodes @store you can also downgrade the plugin to a previous version, as the Barcode component of previous versions, if my memory serves me, were all PNGs that were generated client-side, but it’s been quite a while since I worked on that legacy code-base.

1 Like

You can use sharp to convert SVG to PNG. Feed it with Buffer.from(svgString) followed by png().toBuffer(). Don’t forget to add corresponding dependency.

1 Like

@vladimir.pak thanks for sharing that library. I’d never heard of it before. I’ll try and see if it will work for this use case. I can probably add a quick action to convert SVGs to PNGs and push an update.

Thanks to @vladimir.pak for pointing out the amazing sharp library! I was able to push v3.0.1 which not only upgrades to Plugin API v4 (required by Bubble), but it also introduces a svg to png converter in a single workflow step (working on backend and frontend).

CC: @vini_brito and @store and @bailey

2 Likes

Amazing news! Huge merci to you @nicholasrbarrow and @vladimir.pak (again!).

1 Like

Hello,

When I’m on your demo page nothing happens. I’m interested in this plugin and would like to try it out.

Thanks!