Filament•4mo ago

Help Needed with Real-Time QR Code Display in Filament Form Modal

Hi everyone, I'm working on a Filament project where I need to generate and display a QR code in real-time within a form modal. The QR code should be dynamically updated when the user inputs an original_url and displayed as an SVG. While the QR code is being generated correctly as the user types, I'm having trouble getting this QR code to be included in the form submission data. Here's a quick overview of my setup: The form has fields for title, original_url, and qr_code. The QR code is generated in real-time when the user types in the original_url field using SimpleSoftwareIO\QrCode. The QR code is displayed correctly in the modal, but it doesn't seem to persist during form submission. Here’s the relevant part of my form setup:

                Action::make('create')
                    ->modalHeading('Create New')
                    ->form([
                        \Filament\Forms\Components\Placeholder::make('qr-code')
                            ->label(false)
                            ->content(function (Get $get): ?HtmlString {
                                return is_null($get('original_url')) ?
                                    null :
                                    \SimpleSoftwareIO\QrCode\Facades\QrCode::format('svg')
                                    ->style('square')
                                    ->size(250)
                                    ->generate($get('original_url'));
                            }),
...

                Action::make('create')
                    ->modalHeading('Create New')
                    ->form([
                        \Filament\Forms\Components\Placeholder::make('qr-code')
                            ->label(false)
                            ->content(function (Get $get): ?HtmlString {
                                return is_null($get('original_url')) ?
                                    null :
                                    \SimpleSoftwareIO\QrCode\Facades\QrCode::format('svg')
                                    ->style('square')
                                    ->size(250)
                                    ->generate($get('original_url'));
                            }),
...

The Issue: Although the QR code is generated and displayed correctly in the modal, its data isn't being included in the form submission as expected. Has anyone faced a similar issue or have any suggestions on how to ensure the QR code data is properly handled during form submission? Any help would be greatly appreciated! Thanks in advance!

18 Replies

Dennis Koch•4mo ago

its data isn't being included in the form submission as expected.

You are using a Placeholder that only displays data. If you want some data either you need to write it to a Hidden field or make a custom field What "data" do you even want to save?

MadAgosOP•4mo ago

I need the generated svg so I can save it on the server and the filename in DB

Dennis Koch•4mo ago

Why don't you generate the file on the backend when saving? Instead of trying to send the image to the backend? OR generate the QR code as an image an then display the image in the modal?

MadAgosOP•4mo ago

the idea is to let the user see the generation of the QrCode in real time, as he/she types in the original_url field, on the on-change the code is regenerated

Dennis Koch•4mo ago

Is there anything special happening "in real time"? Or how could this not be done by generating an image and showing it? Do you even need to store the image? Why can't you just regenerate the QR code when rendering?

MadAgosOP•4mo ago

this is how it should look, and the svg should be saved so as to link the image to a link in DB

MadAgosOP•4mo ago

imagine typing in the url field, where you see www.google.it and with each character the qrcode is regenerated

Dennis Koch•4mo ago

Yes. That's how I understood it. So what's against my suggestions? 1. Why do you need to store it? Generating it should be fast 2. If you absolutely need an image file, why not generate it, store it and show it to the user in real time?

MadAgosOP•4mo ago

1. Because in dashboard table i want to show the qrcode instead to regenerate (is this a bad idea in your opinion?) 2. I think answer 1 also answers this

MadAgosOP•4mo ago

the qrcode should be in the square box

Dennis Koch•4mo ago

So just render it in that box?

MadAgosOP•4mo ago

I had thought of this, but I wanted to avoid, in the case of many rows in the table, generating the codes

Dennis Koch•4mo ago

Is it an expensive task? If it is then just store the file during generation

MadAgosOP•4mo ago

could be a solution, but this application will also have an API part and from the request I would like to be able to retrieve the qrcode consequently I need to save the image

Dennis Koch•4mo ago

You could still render it on that request 😅 But it's okay if you want to store it. Just put the storage logic inside of ->action(). People will submit the form, right?

MadAgosOP•4mo ago

yes, and this is where my problem comes from, in the action the field where the qr-code is is not passed but you said it depends on the placeholder component

Dennis Koch•4mo ago

Yes, because QR Code is not a field. But you generate QR codes from the URL. So why don't you just generate the QR code and save it?

MadAgosOP•4mo ago

because I thought I could retrieve the html string by means of the placeholder to be used in the submit, but actually I could generate it again during the submit, let me explain better, the placeholder I only use to show the qr-code and with the submit I regenerate it or I use a variable however you have enlightened me 😊

Gaming

Programming

Help Needed with Real-Time QR Code Display in Filament Form Modal