Storing signature safe in database with szimek / signature_pad

In my application you can generate an pdf file and the pdf file must be signed.
I am using szimek/signature_pad bundle

My question:

  1. How to save the signature in a safe way.
  2. How to implement the signature in the pdf.

Currently im trying something like this to catch the signature in php: How to Capture Szimek/Signature_Pad with PHP (Capture Javascript into PHP Variable)?

sign.html.twig

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

<div class="container-fluid">
    <div class="col-sm">
        <div class="row mt-3">
            <div class="card h-100">
                <div class="card-header font-weight-bold">
                    Sign
                </div>
                <div class="card-body">
                    <form action="{{ path('save_sign', { 'id': id }) }}" method="post" id="signForm">
                        <div id="signature-pad" class="signature-pad">
                            <div class="signature-pad--body">
                                <canvas class="border"></canvas>
                            </div>
                            <button type="submit" class="btn btn-light save" data-action="save">Save</button>
                            <div class="signature-pad--footer">
                                <div class="signature-pad--actions">
                                    <div>
                                        <button type="button" class="btn btn-light clear" data-action="clear">Wissen</button>
                                        <button type="button" class="btn btn-light" data-action="undo">Stap terug</button>
                                    </div>
                                    <div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <input type="hidden" name="hidden_field" value="" id="signInput">
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="{{ asset('js/signPad.js') }}"></script>

signPad.js (only the code for saving)

var form = document.getElementById("signForm"),
input = document.getElementById("signInput");

saveButton.addEventListener("click", function (event) {
    if ( signaturePad.isEmpty() ) {
        input.value = '';
    } else {
        input.value = signaturePad.toDataURL();
        form.submit();
    }

});

Controller.php

    /**
 * @Route("/save/sign/{id}", name="save_sign", methods={"POST"})
 */
public function saveSign(Request $request)
{
    dump($_POST['hidden_field']);
    die();

    return $this->redirectToRoute('index');
}

I tried to dump the hidden field but the value is not set.
The dump is empty.

Controller.php on line 165:""

Im new to saving signatures and javascript, so maybe there is an simple explanation.
First i’d like to save the signature into the database so i can implement it in an pdf.

Thanks!

Edit:
When i put console.log(input.value); in signPad.js I see the image in the console but when i dump the field or get the postdata from the form the returned value is null.

Source: Symfony Questions

Was this helpful?

0 / 0

Leave a Reply 1

Your email address will not be published. Required fields are marked *


Eduardo

Eduardo

Everything looks fine. I suggest you try this little change:

FROM
input.value = signaturePad.toDataURL();

TO
input.val(signaturePad.toDataURL());