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)?


<script src="[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">
                <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>
                            <button type="submit" class="btn btn-light save" data-action="save">Save</button>
                            <div class="signature-pad--footer">
                                <div class="signature-pad--actions">
                                        <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>
                        <input type="hidden" name="hidden_field" value="" id="signInput">

<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();



 * @Route("/save/sign/{id}", name="save_sign", methods={"POST"})
public function saveSign(Request $request)

    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.


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 *



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

input.value = signaturePad.toDataURL();