Wrapping SignaturePad and storing base-64 with Alpine.js and Laravel Livewire

signature-example.blade.php

<x-background>
    <div  class="relative shadow-xl bg-white rounded-lg p-6 flex flex-col gap-4">
        <x-signature-pad wire:model.defer="signature">

        </x-signature-pad>
        <x-tallui::app.button.primary wire:click="submit" class="text-white">
            Submit
        </x-tallui::app.button.primary>
    </div>

</x-background>

signature-pad.blade.php

<div x-data="signaturePad(@entangle($attributes->wire('model')))">
    <h1 class="text-xl font-semibold text-gray-700 flex items-center justify-between"><span>Signature pad</span><x-branding.logo class="w-8 h-8"></x-branding.logo> </h1>
    <div>
        <canvas x-ref="signature_canvas" class="border rounded shadow">

        </canvas>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/signature_pad.umd.min.js"></script>

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('signaturePad', (value) => ({
            signaturePadInstance: null,
            value: value,
            init(){
                this.signaturePadInstance = new SignaturePad(this.$refs.signature_canvas);
                this.signaturePadInstance.addEventListener("endStroke", ()=>{
                   this.value = this.signaturePadInstance.toDataURL('image/png');
                });
            },
        }))
    })
</script>

SignatureExample.php

<?php

namespace App\Http\Livewire;

use Illuminate\Support\Str;
use Livewire\Component;

class SignatureExample extends Component
{
    public $signature;

    public function submit()
    {
        \Storage::put('signatures/signature.png', base64_decode(Str::of($this->signature)->after(',')));
    }

    public function render()
    {
        return view('livewire.signature-example');
    }
}