Signature Pad with Ajax

Posted 4 days ago by joshblevins

I have been attempting to follow advice from https://laracasts.com/discuss/channels/general-discussion/signature-pad to set up a signature pad.

When I click submit the page goes to a white screen and I am unable to locate and errors being saved in the log.

Controller

/**
     * Save Signature
     *
     * @param Request $request
     * @return \Illuminate\Http\RedirectResponse
     */
    public function saveSignature(Request $request)
    {
        if($request->ajax()){
        
        $user = $request->session()->get('user');

        $signature = DrivingAssessments::find($request->assid);
       
        $data_uri = $request->signature;
        $encoded_image = explode(",", $data_uri);
        //$decoded_image = base64_decode($encoded_image);

        $sig = sha1($request->session()->get('user.first_name').$request->session()->get('user.last_name')).$request->addid. "_driver_signature.png";
        $folder = '/signatures/';

        Storage::put($folder, $sig);


        $signature->signature = $encoded_image;
        $signature->save();

        $request->session()->put('user', $user->load('account', 'signature'));
        //return back();
        return response('ajax ran');
        }else{
            return response('ajax did not run');
        }
        
    }

Form

<!--Panel-->
                <form  method="post" enctype="multipart/form-data" class="ansform"> <!--Panel-->

                    {{ csrf_field() }}
                    <div class="wrapper">

                        <canvas id="signature-pad" class="signature-pad" width=400 height=200></canvas>
                    </div>
                    <div>
                        <input type="hidden" name="assid" value="{{$da->id}}">
                        <button id="save">Save</button>
                        <button id="clear">Clear</button>
                    </div>
                    <!--/.Panel-->
                </form>

js/ajax

<script>

$(function () {

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            var signaturePad = new SignaturePad(document.getElementById('signature-pad'), {
              backgroundColor: 'rgba(255, 255, 255, 0)',
              penColor: 'rgb(0, 0, 0)'
            });
            var saveButton = document.getElementById('save');
            var cancelButton = document.getElementById('clear');


            saveButton.addEventListener('click', function (event) {
                if (signaturePad.isEmpty()) {
                    sweetAlert("Oops...", "Please provide signature first.", "error");
                } else {

                    // do ajax to post it
                    $.ajax({
                        url : '{{route('driving.signature')}}',
                        type: 'POST',
                        data : {
                            signature: signaturePad.toDataURL('image/png'),
                            position: $('#position').val()
                        },
                        success: function(response)
                        {
                            swal({
                              title: "Signature Saved",
                              text: "Your signature has now been stored.",
                              icon: "success",
                            });
                            window.setTimeout(function(){window.location.reload()}, 3000);
                            //data - response from server
                            console.log(response);
                        },
                        error: function(response)
                        {
                            
                            console.log(response);
                        }
                    });
                }

            });

            cancelButton.addEventListener('click', function (event) {
                signaturePad.clear();
            });

        });
 </script>

route

Route::post('da/signature', '[email protected]')->name('driving.signature');

Please sign in or create an account to participate in this conversation.

Reply to

Use Markdown with GitHub-flavored code blocks.