Saving Canvas Image to Server with Javascript+PHP

Question

I have implemented a system where people can report from when to when they have visited a customer, and what they have done there. Now i want to add a function that lets the customers sign the specified service. They can rewiew the reported data, and under this overview i have implemented an HTML5 canvas with signature_pad (https://github.com/szimek/signature_pad), so they can accept the data.

Under the signature pad there are two buttons. One to clear the signature, and one to save the signature.

What i want to implement now is, that when you click the SAVE button, the content of the canvas is stored as a file on the website, after a fresh signature ID has been pulled from the database, and then the user is forwarded to the page with the overview over his reports.

I am handling all database operations in a central handlers.php file, that is loaded with the base system.php framework, and checks for required activities with "if (isset($_POST['NameOfTheFunction']))".

A little background to how the website works:
Overview of the filesystem:
.\system.php <- provides the framework with database connection, languaegesettings, and loads all content
.\content\addsignature.php <- is one content that can be loaded. If provided an existing report-id shows a signature form to sign a service
.\content\handlers.php <- Is loaded by system.php and "listens" for actions it should take
.\js\signature.js <- Is supposed to handle for example the clicking of the save button

Here's the part that created the canvas (addsignature.php):

echo "
<div class=\"row vdivide\">
    <div class=\"col-sm-2 text-center\"><input type=\"hidden\" name=\"rid\" id=\"rid\" value=\"".$_GET['rid']."\"></div>
    <div class=\"col-sm-8 text-center\">
        <div id=\"signature-pad\" class=\"signature-pad\">
            <div class=\"signature-pad--body\">
                <canvas></canvas>
            </div>
        </div>
    </div>
    <div class=\"col-sm-2 text-center\"></div>
</div>
<div class=\"row vdivide\">
    <div class=\"col-sm-2 text-center\"></div>
    <div class=\"col-sm-4 text-center\">
        <div class=\"btn-group\">
            <button type=\"button\" class=\"btn btn-primary\" aria-haspopup=\"true\" aria-expanded=\"false\" data-action=\"clear\">".$clear."</button>
        </div>
    </div>
    <div class=\"col-sm-4 text-center\">
        <div class=\"btn-group\">
            <button type=\"button\" class=\"btn btn-primary\" aria-haspopup=\"true\" aria-expanded=\"false\" data-action=\"save\">".$save."</button>
        </div>
    </div>
    <div class=\"col-sm-2 text-center\"></div>
</div>
<script src=\"./js/signature_pad.umd.js?v=".time()."\"></script>
<script src=\"./js/signature.js?v=".time()."\"></script>
";

And here is the relevant part of the signature.js to save the file:

var saveButton = document.querySelector("[data-action=save]");
    saveButton.addEventListener("click", function (event) {
  if (signaturePad.isEmpty()) {
    alert("Please provide a signature first.");
  } else {
    var dataURL = signaturePad.toDataURL("image/jpeg");
    //alert("RID: " + rid + "DataURL:" + dataURL);
    $.ajax({
      type: "POST",
      url: "../system.php",
      data: {
         imgBase64: dataURL,
         rid: rid,
         SaveSignature: true
      }
    });
  }
});

And here is the content of the handlers.php file:

if (isset($_POST['SaveSignature'])) {
    $query = "INSERT INTO signatures (SIG_RID) VALUES ('".$_POST['rid']."')";
    try {
        $statement = $dbc->prepare($query);
        $statement->execute();
        $message = "<div class=\"alert alert-success alert-dismissible\">
<a href=\"#\" class=\"close\" data-dismiss=\"alert\" aria-label=\"close\">&times;</a>
    ".$signaturesavesuccess."
</div>";
    }
    catch (PDOException $e) {
       $message = "<div class=\"alert alert-danger alert-dismissible\">
<a href=\"#\" class=\"close\" data-dismiss=\"alert\" aria-label=\"close\">&times;</a>
    ".$signaturesavefailure."
</div>";
    }

    $query = "SELECT SIG_ID FROM signatures WHERE SIG_RID = '".$_POST['rid']."'";
    foreach ($dbc->query($query) as $row) {
        $sigid = $row['SIG_ID'];
    }

    $query = "UPDATE reports SET R_Signature = '".$sigid."' WHERE R_ID = '".$_POST['rid']."'";
    try {
        $statement = $dbc->prepare($query);
        $statement->execute();
        $message = "<div class=\"alert alert-success alert-dismissible\">
<a href=\"#\" class=\"close\" data-dismiss=\"alert\" aria-label=\"close\">&times;</a>
    ".$signaturesavesuccess."
</div>";
    }
    catch (PDOException $e) {
       $message = "<div class=\"alert alert-danger alert-dismissible\">
<a href=\"#\" class=\"close\" data-dismiss=\"alert\" aria-label=\"close\">&times;</a>
    ".$signaturesavefailure."
</div>";
    }

    define('UPLOAD_DIR', 'signatures/');
    $img = $_POST['imgBase64'];
    $img = str_replace('data:image/png;base64,', '', $img);
    $img = str_replace(' ', '+', $img);
    $data = base64_decode($img);
    $file = UPLOAD_DIR . $sigid . '.jpg';
    $success = file_put_contents($file, $data);
    print $success ? $file : 'Unable to save the file.';

}

So what i want is the whole "SaveSignature"-part of the handlers.php called, the image saved to the specified location, and the user forwarded to the page "system.php?site=myreports".

I hope anyone here can help me with that. I have no idea what could be wrong.