Uploading digital signature to folder and submitting to database

Multi tool use
I have been trying to manage that the signature image gets submitted to upload to a folder and add to
the database at the same time but having a tough time. Everything is working except uploading the signature image to a folder and submitting it to the database with the same record.
I am using the digital signature from this jquery code : https://www.jqueryscript.net/mobile/Simpe-Mobile-Signature-Pad-with-jQuery-Html5-Canvas.html
Current example of what I have : http://dev.teqcube.com/signin-test/signin.php
This is for the 'New Visitor' Section
This is the form
<form method="post" action="">
<!-- VISITOR FIRST NAME -->
<div class="form-group">
<input type="text" class="form-control" name="visitor_first_name" id="visitor_first_name" placeholder="First Name" required>
</div>
<!-- VISITOR LAST NAME -->
<div class="form-group">
<input type="text" class="form-control" name="visitor_last_name" id="visitor_last_name" placeholder="Last Name" required>
</div>
<!-- VISITOR COMPANY NAME -->
<div class="form-group">
<input type="text" class="form-control" name="visitor_company_name" id="visitor_company_name" placeholder="Company Name" required>
</div>
<!-- VISITING PURPOSE -->
<div class="form-group">
<select class="custom-select form-control" name="visitor_visiting_purpose" id="visitor_visiting_purpose" style="width:100%;" required="required">
<option value="" selected>Visiting Purpose</option>
<option value="Visiting">Visiting</option>
<option value="Cleaning">Cleaning</option>
<option value="Delivery">Delivery</option>
<option value="Maintanance">Maintanance</option>
</select>
</div>
<!-- APARTMENT NUMBER -->
<div class="form-group">
<input type="text" class="form-control" name="visitor_visiting_apartment_number" id="visitor_visiting_apartment_number" placeholder="Apartment Number" required>
</div>
<!-- FORM SUBMIT FOR NEW REGISTRATION -->
<div class="submitBtnContainer">
<button type="button" data-toggle="modal" data-target="#digitalSignatureModal" class="btn my-2 my-sm-0 submitTakePhoto"><i class="fa fa-pencil" aria-hidden="true"></i>Signature</button>
<button type="submit" name="sign_visitor_in" class="btn btn-success my-2 my-sm-0 signoutVisitorFormOption1"><i class="fa fa-sign-in" aria-hidden="true"></i> Sign In</button>
</div>
<!-- #### MODAL TO APPLY DIGITAL SIGNATURE #### -->
<div class="modal fade" id="digitalSignatureModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<!-- MODAL BODY LOGO -->
<div class="col-md-12">
<div id="signinSuccessModalLogo">
<img src="img/Excellent-visitor-signin-small.png" alt="">
</div>
</div>
<!-- MODAL BODY CONTENT -->
<div class="col-md-12">
<div class="modal-body" id="signinSuccessModalContent">
<!-- DISPLAY IMAGE AFTER SIGNED -->
<div id="signaturePad" data-role="content"></div>
<!-- DIGITAL SIGNATURE SECTION -->
<div id="divPopUpSignContract">
<div class="ui-content popUpHeight">
<div id="div_signcontract">
<!-- CANVAS TO DRAW SIGNATURE -->
<canvas id="canvas">Canvas is not supported</canvas>
<!-- SUBMIT SIGNATURE OR CLEAR -->
<div class="col-md-12">
<!-- <input id="btnSubmitSign" type="button" class="btn btn-success" data-dismiss="modal" data-inline="true" data-mini="true" data-theme="b" value="Submit Signature" onclick="fun_submit()" style="border-radius: 5px; padding: 15px;" /> -->
<input id="btnSubmitSign" type="button" class="btn btn-success" data-inline="true" data-mini="true" data-theme="b" value="Submit Signature" onclick="fun_submit()" style="border-radius: 5px; padding: 15px;" />
<input id="btnClearSign" type="button" class="btn btn-warning commentbtn" data-inline="true" data-mini="true" data-theme="b" value="Clear" onclick="init_Sign_Canvas()" style="border-radius: 5px; padding: 15px;" />
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /MODAL BODY CONTENT -->
</div>
</div>
</div>
<!-- #### MODAL TO APPLY DIGITAL SIGNATURE #### -->
</form>
This is the php code to add the info to the database.
I am getting an error with $visitor_signature. I have tried different methods but not succeeding.
// ### SUBMIT SIGNIN FORM FOR NEW VISITOR REGISTRATION ###
if(isset($_POST['sign_visitor_in'])) {
date_default_timezone_set('Asia/Dubai');
$currentTime = date("H:i:s");
// *** RETREIVE SUBMITTED INFORMATION ON SUBMIT FOR NEW VISITOR REGISTRATION ***
$visitor_first_name = $_POST['visitor_first_name'];
$visitor_last_name = $_POST['visitor_last_name'];
$visitor_company_name = $_POST['visitor_company_name'];
$visitor_visiting_purpose = $_POST['visitor_visiting_purpose'];
$visitor_visiting_apartment_number = $_POST['visitor_visiting_apartment_number'];
//$visitor_visit_status = $_POST['visitor_visit_status'];
$visitor_signin_date = date("Y-m-d");
$visitor_signin_time = date("H:i:s");
$visitor_signout_date = date("H:i:s");
$visitor_signout_time = date("H:i:s");
$visitor_signature = $_FILES['visitor_signature']['name'];
$visitor_signature_tmp = $_FILES['visitor_signature']['tmp_name'];
move_uploaded_file($visitor_signature_tmp, "img/sign-in-signatures/$visitor_signature");
exit();
// *** I added exit() for testing purpose and once it works I remove it.
// *** ADD NEW VISITOR SIGNIN RECORD TO DATABASE ***
$query = "INSERT INTO visitors(visitor_first_name, visitor_last_name, visitor_company_name, visitor_visiting_purpose,
visitor_visiting_apartment_number, visitor_visit_status, visitor_signin_date, visitor_signin_time, visitor_signout_date, visitor_signout_time, visitor_signature)";
$query .= "VALUES('{$visitor_first_name}', '{$visitor_last_name}', '{$visitor_company_name}',
'{$visitor_visiting_purpose}', '{$visitor_visiting_apartment_number}', 'Signed In', '{$visitor_signin_date}', '{$visitor_signin_time}', '', '', '{$visitor_signature}')";
$result = mysqli_query($connection, $query);
// *** GENERAL CONFIM QUERY ***
if(!$result) {
die("QUERY FAILED. " . mysqli_error($connection));
}
}
The below code is part of the js file where the signature takes place
function fun_submit() {
if(isSign) {
var canvas = $("#canvas").get(0);
var imgData = canvas.toDataURL();
jQuery('#signaturePad').find('p').remove();
jQuery('#signaturePad').find('img').remove();
jQuery('#signaturePad').append(jQuery('<p>Your Signature:</p>'));
jQuery('#signaturePad').append($('<img/ name="visitor_signature">').attr('src',imgData));
// I BELIEVE THIS IS WHERE THE PROCESS HAPPENS TO UPLOAD THE IMAGE TO THE FOLDER
// I HAVE BEEN TRYING WITH DIFFERENT CODES IN THIS SECTION BUT NOT SUCCEEDING
closePopUp();
} else {
alert('Please sign');
}
}
Any help would be gladly appreciated.
Regards
javascript php jquery mysql
add a comment |
I have been trying to manage that the signature image gets submitted to upload to a folder and add to
the database at the same time but having a tough time. Everything is working except uploading the signature image to a folder and submitting it to the database with the same record.
I am using the digital signature from this jquery code : https://www.jqueryscript.net/mobile/Simpe-Mobile-Signature-Pad-with-jQuery-Html5-Canvas.html
Current example of what I have : http://dev.teqcube.com/signin-test/signin.php
This is for the 'New Visitor' Section
This is the form
<form method="post" action="">
<!-- VISITOR FIRST NAME -->
<div class="form-group">
<input type="text" class="form-control" name="visitor_first_name" id="visitor_first_name" placeholder="First Name" required>
</div>
<!-- VISITOR LAST NAME -->
<div class="form-group">
<input type="text" class="form-control" name="visitor_last_name" id="visitor_last_name" placeholder="Last Name" required>
</div>
<!-- VISITOR COMPANY NAME -->
<div class="form-group">
<input type="text" class="form-control" name="visitor_company_name" id="visitor_company_name" placeholder="Company Name" required>
</div>
<!-- VISITING PURPOSE -->
<div class="form-group">
<select class="custom-select form-control" name="visitor_visiting_purpose" id="visitor_visiting_purpose" style="width:100%;" required="required">
<option value="" selected>Visiting Purpose</option>
<option value="Visiting">Visiting</option>
<option value="Cleaning">Cleaning</option>
<option value="Delivery">Delivery</option>
<option value="Maintanance">Maintanance</option>
</select>
</div>
<!-- APARTMENT NUMBER -->
<div class="form-group">
<input type="text" class="form-control" name="visitor_visiting_apartment_number" id="visitor_visiting_apartment_number" placeholder="Apartment Number" required>
</div>
<!-- FORM SUBMIT FOR NEW REGISTRATION -->
<div class="submitBtnContainer">
<button type="button" data-toggle="modal" data-target="#digitalSignatureModal" class="btn my-2 my-sm-0 submitTakePhoto"><i class="fa fa-pencil" aria-hidden="true"></i>Signature</button>
<button type="submit" name="sign_visitor_in" class="btn btn-success my-2 my-sm-0 signoutVisitorFormOption1"><i class="fa fa-sign-in" aria-hidden="true"></i> Sign In</button>
</div>
<!-- #### MODAL TO APPLY DIGITAL SIGNATURE #### -->
<div class="modal fade" id="digitalSignatureModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<!-- MODAL BODY LOGO -->
<div class="col-md-12">
<div id="signinSuccessModalLogo">
<img src="img/Excellent-visitor-signin-small.png" alt="">
</div>
</div>
<!-- MODAL BODY CONTENT -->
<div class="col-md-12">
<div class="modal-body" id="signinSuccessModalContent">
<!-- DISPLAY IMAGE AFTER SIGNED -->
<div id="signaturePad" data-role="content"></div>
<!-- DIGITAL SIGNATURE SECTION -->
<div id="divPopUpSignContract">
<div class="ui-content popUpHeight">
<div id="div_signcontract">
<!-- CANVAS TO DRAW SIGNATURE -->
<canvas id="canvas">Canvas is not supported</canvas>
<!-- SUBMIT SIGNATURE OR CLEAR -->
<div class="col-md-12">
<!-- <input id="btnSubmitSign" type="button" class="btn btn-success" data-dismiss="modal" data-inline="true" data-mini="true" data-theme="b" value="Submit Signature" onclick="fun_submit()" style="border-radius: 5px; padding: 15px;" /> -->
<input id="btnSubmitSign" type="button" class="btn btn-success" data-inline="true" data-mini="true" data-theme="b" value="Submit Signature" onclick="fun_submit()" style="border-radius: 5px; padding: 15px;" />
<input id="btnClearSign" type="button" class="btn btn-warning commentbtn" data-inline="true" data-mini="true" data-theme="b" value="Clear" onclick="init_Sign_Canvas()" style="border-radius: 5px; padding: 15px;" />
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /MODAL BODY CONTENT -->
</div>
</div>
</div>
<!-- #### MODAL TO APPLY DIGITAL SIGNATURE #### -->
</form>
This is the php code to add the info to the database.
I am getting an error with $visitor_signature. I have tried different methods but not succeeding.
// ### SUBMIT SIGNIN FORM FOR NEW VISITOR REGISTRATION ###
if(isset($_POST['sign_visitor_in'])) {
date_default_timezone_set('Asia/Dubai');
$currentTime = date("H:i:s");
// *** RETREIVE SUBMITTED INFORMATION ON SUBMIT FOR NEW VISITOR REGISTRATION ***
$visitor_first_name = $_POST['visitor_first_name'];
$visitor_last_name = $_POST['visitor_last_name'];
$visitor_company_name = $_POST['visitor_company_name'];
$visitor_visiting_purpose = $_POST['visitor_visiting_purpose'];
$visitor_visiting_apartment_number = $_POST['visitor_visiting_apartment_number'];
//$visitor_visit_status = $_POST['visitor_visit_status'];
$visitor_signin_date = date("Y-m-d");
$visitor_signin_time = date("H:i:s");
$visitor_signout_date = date("H:i:s");
$visitor_signout_time = date("H:i:s");
$visitor_signature = $_FILES['visitor_signature']['name'];
$visitor_signature_tmp = $_FILES['visitor_signature']['tmp_name'];
move_uploaded_file($visitor_signature_tmp, "img/sign-in-signatures/$visitor_signature");
exit();
// *** I added exit() for testing purpose and once it works I remove it.
// *** ADD NEW VISITOR SIGNIN RECORD TO DATABASE ***
$query = "INSERT INTO visitors(visitor_first_name, visitor_last_name, visitor_company_name, visitor_visiting_purpose,
visitor_visiting_apartment_number, visitor_visit_status, visitor_signin_date, visitor_signin_time, visitor_signout_date, visitor_signout_time, visitor_signature)";
$query .= "VALUES('{$visitor_first_name}', '{$visitor_last_name}', '{$visitor_company_name}',
'{$visitor_visiting_purpose}', '{$visitor_visiting_apartment_number}', 'Signed In', '{$visitor_signin_date}', '{$visitor_signin_time}', '', '', '{$visitor_signature}')";
$result = mysqli_query($connection, $query);
// *** GENERAL CONFIM QUERY ***
if(!$result) {
die("QUERY FAILED. " . mysqli_error($connection));
}
}
The below code is part of the js file where the signature takes place
function fun_submit() {
if(isSign) {
var canvas = $("#canvas").get(0);
var imgData = canvas.toDataURL();
jQuery('#signaturePad').find('p').remove();
jQuery('#signaturePad').find('img').remove();
jQuery('#signaturePad').append(jQuery('<p>Your Signature:</p>'));
jQuery('#signaturePad').append($('<img/ name="visitor_signature">').attr('src',imgData));
// I BELIEVE THIS IS WHERE THE PROCESS HAPPENS TO UPLOAD THE IMAGE TO THE FOLDER
// I HAVE BEEN TRYING WITH DIFFERENT CODES IN THIS SECTION BUT NOT SUCCEEDING
closePopUp();
} else {
alert('Please sign');
}
}
Any help would be gladly appreciated.
Regards
javascript php jquery mysql
add a comment |
I have been trying to manage that the signature image gets submitted to upload to a folder and add to
the database at the same time but having a tough time. Everything is working except uploading the signature image to a folder and submitting it to the database with the same record.
I am using the digital signature from this jquery code : https://www.jqueryscript.net/mobile/Simpe-Mobile-Signature-Pad-with-jQuery-Html5-Canvas.html
Current example of what I have : http://dev.teqcube.com/signin-test/signin.php
This is for the 'New Visitor' Section
This is the form
<form method="post" action="">
<!-- VISITOR FIRST NAME -->
<div class="form-group">
<input type="text" class="form-control" name="visitor_first_name" id="visitor_first_name" placeholder="First Name" required>
</div>
<!-- VISITOR LAST NAME -->
<div class="form-group">
<input type="text" class="form-control" name="visitor_last_name" id="visitor_last_name" placeholder="Last Name" required>
</div>
<!-- VISITOR COMPANY NAME -->
<div class="form-group">
<input type="text" class="form-control" name="visitor_company_name" id="visitor_company_name" placeholder="Company Name" required>
</div>
<!-- VISITING PURPOSE -->
<div class="form-group">
<select class="custom-select form-control" name="visitor_visiting_purpose" id="visitor_visiting_purpose" style="width:100%;" required="required">
<option value="" selected>Visiting Purpose</option>
<option value="Visiting">Visiting</option>
<option value="Cleaning">Cleaning</option>
<option value="Delivery">Delivery</option>
<option value="Maintanance">Maintanance</option>
</select>
</div>
<!-- APARTMENT NUMBER -->
<div class="form-group">
<input type="text" class="form-control" name="visitor_visiting_apartment_number" id="visitor_visiting_apartment_number" placeholder="Apartment Number" required>
</div>
<!-- FORM SUBMIT FOR NEW REGISTRATION -->
<div class="submitBtnContainer">
<button type="button" data-toggle="modal" data-target="#digitalSignatureModal" class="btn my-2 my-sm-0 submitTakePhoto"><i class="fa fa-pencil" aria-hidden="true"></i>Signature</button>
<button type="submit" name="sign_visitor_in" class="btn btn-success my-2 my-sm-0 signoutVisitorFormOption1"><i class="fa fa-sign-in" aria-hidden="true"></i> Sign In</button>
</div>
<!-- #### MODAL TO APPLY DIGITAL SIGNATURE #### -->
<div class="modal fade" id="digitalSignatureModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<!-- MODAL BODY LOGO -->
<div class="col-md-12">
<div id="signinSuccessModalLogo">
<img src="img/Excellent-visitor-signin-small.png" alt="">
</div>
</div>
<!-- MODAL BODY CONTENT -->
<div class="col-md-12">
<div class="modal-body" id="signinSuccessModalContent">
<!-- DISPLAY IMAGE AFTER SIGNED -->
<div id="signaturePad" data-role="content"></div>
<!-- DIGITAL SIGNATURE SECTION -->
<div id="divPopUpSignContract">
<div class="ui-content popUpHeight">
<div id="div_signcontract">
<!-- CANVAS TO DRAW SIGNATURE -->
<canvas id="canvas">Canvas is not supported</canvas>
<!-- SUBMIT SIGNATURE OR CLEAR -->
<div class="col-md-12">
<!-- <input id="btnSubmitSign" type="button" class="btn btn-success" data-dismiss="modal" data-inline="true" data-mini="true" data-theme="b" value="Submit Signature" onclick="fun_submit()" style="border-radius: 5px; padding: 15px;" /> -->
<input id="btnSubmitSign" type="button" class="btn btn-success" data-inline="true" data-mini="true" data-theme="b" value="Submit Signature" onclick="fun_submit()" style="border-radius: 5px; padding: 15px;" />
<input id="btnClearSign" type="button" class="btn btn-warning commentbtn" data-inline="true" data-mini="true" data-theme="b" value="Clear" onclick="init_Sign_Canvas()" style="border-radius: 5px; padding: 15px;" />
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /MODAL BODY CONTENT -->
</div>
</div>
</div>
<!-- #### MODAL TO APPLY DIGITAL SIGNATURE #### -->
</form>
This is the php code to add the info to the database.
I am getting an error with $visitor_signature. I have tried different methods but not succeeding.
// ### SUBMIT SIGNIN FORM FOR NEW VISITOR REGISTRATION ###
if(isset($_POST['sign_visitor_in'])) {
date_default_timezone_set('Asia/Dubai');
$currentTime = date("H:i:s");
// *** RETREIVE SUBMITTED INFORMATION ON SUBMIT FOR NEW VISITOR REGISTRATION ***
$visitor_first_name = $_POST['visitor_first_name'];
$visitor_last_name = $_POST['visitor_last_name'];
$visitor_company_name = $_POST['visitor_company_name'];
$visitor_visiting_purpose = $_POST['visitor_visiting_purpose'];
$visitor_visiting_apartment_number = $_POST['visitor_visiting_apartment_number'];
//$visitor_visit_status = $_POST['visitor_visit_status'];
$visitor_signin_date = date("Y-m-d");
$visitor_signin_time = date("H:i:s");
$visitor_signout_date = date("H:i:s");
$visitor_signout_time = date("H:i:s");
$visitor_signature = $_FILES['visitor_signature']['name'];
$visitor_signature_tmp = $_FILES['visitor_signature']['tmp_name'];
move_uploaded_file($visitor_signature_tmp, "img/sign-in-signatures/$visitor_signature");
exit();
// *** I added exit() for testing purpose and once it works I remove it.
// *** ADD NEW VISITOR SIGNIN RECORD TO DATABASE ***
$query = "INSERT INTO visitors(visitor_first_name, visitor_last_name, visitor_company_name, visitor_visiting_purpose,
visitor_visiting_apartment_number, visitor_visit_status, visitor_signin_date, visitor_signin_time, visitor_signout_date, visitor_signout_time, visitor_signature)";
$query .= "VALUES('{$visitor_first_name}', '{$visitor_last_name}', '{$visitor_company_name}',
'{$visitor_visiting_purpose}', '{$visitor_visiting_apartment_number}', 'Signed In', '{$visitor_signin_date}', '{$visitor_signin_time}', '', '', '{$visitor_signature}')";
$result = mysqli_query($connection, $query);
// *** GENERAL CONFIM QUERY ***
if(!$result) {
die("QUERY FAILED. " . mysqli_error($connection));
}
}
The below code is part of the js file where the signature takes place
function fun_submit() {
if(isSign) {
var canvas = $("#canvas").get(0);
var imgData = canvas.toDataURL();
jQuery('#signaturePad').find('p').remove();
jQuery('#signaturePad').find('img').remove();
jQuery('#signaturePad').append(jQuery('<p>Your Signature:</p>'));
jQuery('#signaturePad').append($('<img/ name="visitor_signature">').attr('src',imgData));
// I BELIEVE THIS IS WHERE THE PROCESS HAPPENS TO UPLOAD THE IMAGE TO THE FOLDER
// I HAVE BEEN TRYING WITH DIFFERENT CODES IN THIS SECTION BUT NOT SUCCEEDING
closePopUp();
} else {
alert('Please sign');
}
}
Any help would be gladly appreciated.
Regards
javascript php jquery mysql
I have been trying to manage that the signature image gets submitted to upload to a folder and add to
the database at the same time but having a tough time. Everything is working except uploading the signature image to a folder and submitting it to the database with the same record.
I am using the digital signature from this jquery code : https://www.jqueryscript.net/mobile/Simpe-Mobile-Signature-Pad-with-jQuery-Html5-Canvas.html
Current example of what I have : http://dev.teqcube.com/signin-test/signin.php
This is for the 'New Visitor' Section
This is the form
<form method="post" action="">
<!-- VISITOR FIRST NAME -->
<div class="form-group">
<input type="text" class="form-control" name="visitor_first_name" id="visitor_first_name" placeholder="First Name" required>
</div>
<!-- VISITOR LAST NAME -->
<div class="form-group">
<input type="text" class="form-control" name="visitor_last_name" id="visitor_last_name" placeholder="Last Name" required>
</div>
<!-- VISITOR COMPANY NAME -->
<div class="form-group">
<input type="text" class="form-control" name="visitor_company_name" id="visitor_company_name" placeholder="Company Name" required>
</div>
<!-- VISITING PURPOSE -->
<div class="form-group">
<select class="custom-select form-control" name="visitor_visiting_purpose" id="visitor_visiting_purpose" style="width:100%;" required="required">
<option value="" selected>Visiting Purpose</option>
<option value="Visiting">Visiting</option>
<option value="Cleaning">Cleaning</option>
<option value="Delivery">Delivery</option>
<option value="Maintanance">Maintanance</option>
</select>
</div>
<!-- APARTMENT NUMBER -->
<div class="form-group">
<input type="text" class="form-control" name="visitor_visiting_apartment_number" id="visitor_visiting_apartment_number" placeholder="Apartment Number" required>
</div>
<!-- FORM SUBMIT FOR NEW REGISTRATION -->
<div class="submitBtnContainer">
<button type="button" data-toggle="modal" data-target="#digitalSignatureModal" class="btn my-2 my-sm-0 submitTakePhoto"><i class="fa fa-pencil" aria-hidden="true"></i>Signature</button>
<button type="submit" name="sign_visitor_in" class="btn btn-success my-2 my-sm-0 signoutVisitorFormOption1"><i class="fa fa-sign-in" aria-hidden="true"></i> Sign In</button>
</div>
<!-- #### MODAL TO APPLY DIGITAL SIGNATURE #### -->
<div class="modal fade" id="digitalSignatureModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<!-- MODAL BODY LOGO -->
<div class="col-md-12">
<div id="signinSuccessModalLogo">
<img src="img/Excellent-visitor-signin-small.png" alt="">
</div>
</div>
<!-- MODAL BODY CONTENT -->
<div class="col-md-12">
<div class="modal-body" id="signinSuccessModalContent">
<!-- DISPLAY IMAGE AFTER SIGNED -->
<div id="signaturePad" data-role="content"></div>
<!-- DIGITAL SIGNATURE SECTION -->
<div id="divPopUpSignContract">
<div class="ui-content popUpHeight">
<div id="div_signcontract">
<!-- CANVAS TO DRAW SIGNATURE -->
<canvas id="canvas">Canvas is not supported</canvas>
<!-- SUBMIT SIGNATURE OR CLEAR -->
<div class="col-md-12">
<!-- <input id="btnSubmitSign" type="button" class="btn btn-success" data-dismiss="modal" data-inline="true" data-mini="true" data-theme="b" value="Submit Signature" onclick="fun_submit()" style="border-radius: 5px; padding: 15px;" /> -->
<input id="btnSubmitSign" type="button" class="btn btn-success" data-inline="true" data-mini="true" data-theme="b" value="Submit Signature" onclick="fun_submit()" style="border-radius: 5px; padding: 15px;" />
<input id="btnClearSign" type="button" class="btn btn-warning commentbtn" data-inline="true" data-mini="true" data-theme="b" value="Clear" onclick="init_Sign_Canvas()" style="border-radius: 5px; padding: 15px;" />
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /MODAL BODY CONTENT -->
</div>
</div>
</div>
<!-- #### MODAL TO APPLY DIGITAL SIGNATURE #### -->
</form>
This is the php code to add the info to the database.
I am getting an error with $visitor_signature. I have tried different methods but not succeeding.
// ### SUBMIT SIGNIN FORM FOR NEW VISITOR REGISTRATION ###
if(isset($_POST['sign_visitor_in'])) {
date_default_timezone_set('Asia/Dubai');
$currentTime = date("H:i:s");
// *** RETREIVE SUBMITTED INFORMATION ON SUBMIT FOR NEW VISITOR REGISTRATION ***
$visitor_first_name = $_POST['visitor_first_name'];
$visitor_last_name = $_POST['visitor_last_name'];
$visitor_company_name = $_POST['visitor_company_name'];
$visitor_visiting_purpose = $_POST['visitor_visiting_purpose'];
$visitor_visiting_apartment_number = $_POST['visitor_visiting_apartment_number'];
//$visitor_visit_status = $_POST['visitor_visit_status'];
$visitor_signin_date = date("Y-m-d");
$visitor_signin_time = date("H:i:s");
$visitor_signout_date = date("H:i:s");
$visitor_signout_time = date("H:i:s");
$visitor_signature = $_FILES['visitor_signature']['name'];
$visitor_signature_tmp = $_FILES['visitor_signature']['tmp_name'];
move_uploaded_file($visitor_signature_tmp, "img/sign-in-signatures/$visitor_signature");
exit();
// *** I added exit() for testing purpose and once it works I remove it.
// *** ADD NEW VISITOR SIGNIN RECORD TO DATABASE ***
$query = "INSERT INTO visitors(visitor_first_name, visitor_last_name, visitor_company_name, visitor_visiting_purpose,
visitor_visiting_apartment_number, visitor_visit_status, visitor_signin_date, visitor_signin_time, visitor_signout_date, visitor_signout_time, visitor_signature)";
$query .= "VALUES('{$visitor_first_name}', '{$visitor_last_name}', '{$visitor_company_name}',
'{$visitor_visiting_purpose}', '{$visitor_visiting_apartment_number}', 'Signed In', '{$visitor_signin_date}', '{$visitor_signin_time}', '', '', '{$visitor_signature}')";
$result = mysqli_query($connection, $query);
// *** GENERAL CONFIM QUERY ***
if(!$result) {
die("QUERY FAILED. " . mysqli_error($connection));
}
}
The below code is part of the js file where the signature takes place
function fun_submit() {
if(isSign) {
var canvas = $("#canvas").get(0);
var imgData = canvas.toDataURL();
jQuery('#signaturePad').find('p').remove();
jQuery('#signaturePad').find('img').remove();
jQuery('#signaturePad').append(jQuery('<p>Your Signature:</p>'));
jQuery('#signaturePad').append($('<img/ name="visitor_signature">').attr('src',imgData));
// I BELIEVE THIS IS WHERE THE PROCESS HAPPENS TO UPLOAD THE IMAGE TO THE FOLDER
// I HAVE BEEN TRYING WITH DIFFERENT CODES IN THIS SECTION BUT NOT SUCCEEDING
closePopUp();
} else {
alert('Please sign');
}
}
Any help would be gladly appreciated.
Regards
<form method="post" action="">
<!-- VISITOR FIRST NAME -->
<div class="form-group">
<input type="text" class="form-control" name="visitor_first_name" id="visitor_first_name" placeholder="First Name" required>
</div>
<!-- VISITOR LAST NAME -->
<div class="form-group">
<input type="text" class="form-control" name="visitor_last_name" id="visitor_last_name" placeholder="Last Name" required>
</div>
<!-- VISITOR COMPANY NAME -->
<div class="form-group">
<input type="text" class="form-control" name="visitor_company_name" id="visitor_company_name" placeholder="Company Name" required>
</div>
<!-- VISITING PURPOSE -->
<div class="form-group">
<select class="custom-select form-control" name="visitor_visiting_purpose" id="visitor_visiting_purpose" style="width:100%;" required="required">
<option value="" selected>Visiting Purpose</option>
<option value="Visiting">Visiting</option>
<option value="Cleaning">Cleaning</option>
<option value="Delivery">Delivery</option>
<option value="Maintanance">Maintanance</option>
</select>
</div>
<!-- APARTMENT NUMBER -->
<div class="form-group">
<input type="text" class="form-control" name="visitor_visiting_apartment_number" id="visitor_visiting_apartment_number" placeholder="Apartment Number" required>
</div>
<!-- FORM SUBMIT FOR NEW REGISTRATION -->
<div class="submitBtnContainer">
<button type="button" data-toggle="modal" data-target="#digitalSignatureModal" class="btn my-2 my-sm-0 submitTakePhoto"><i class="fa fa-pencil" aria-hidden="true"></i>Signature</button>
<button type="submit" name="sign_visitor_in" class="btn btn-success my-2 my-sm-0 signoutVisitorFormOption1"><i class="fa fa-sign-in" aria-hidden="true"></i> Sign In</button>
</div>
<!-- #### MODAL TO APPLY DIGITAL SIGNATURE #### -->
<div class="modal fade" id="digitalSignatureModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<!-- MODAL BODY LOGO -->
<div class="col-md-12">
<div id="signinSuccessModalLogo">
<img src="img/Excellent-visitor-signin-small.png" alt="">
</div>
</div>
<!-- MODAL BODY CONTENT -->
<div class="col-md-12">
<div class="modal-body" id="signinSuccessModalContent">
<!-- DISPLAY IMAGE AFTER SIGNED -->
<div id="signaturePad" data-role="content"></div>
<!-- DIGITAL SIGNATURE SECTION -->
<div id="divPopUpSignContract">
<div class="ui-content popUpHeight">
<div id="div_signcontract">
<!-- CANVAS TO DRAW SIGNATURE -->
<canvas id="canvas">Canvas is not supported</canvas>
<!-- SUBMIT SIGNATURE OR CLEAR -->
<div class="col-md-12">
<!-- <input id="btnSubmitSign" type="button" class="btn btn-success" data-dismiss="modal" data-inline="true" data-mini="true" data-theme="b" value="Submit Signature" onclick="fun_submit()" style="border-radius: 5px; padding: 15px;" /> -->
<input id="btnSubmitSign" type="button" class="btn btn-success" data-inline="true" data-mini="true" data-theme="b" value="Submit Signature" onclick="fun_submit()" style="border-radius: 5px; padding: 15px;" />
<input id="btnClearSign" type="button" class="btn btn-warning commentbtn" data-inline="true" data-mini="true" data-theme="b" value="Clear" onclick="init_Sign_Canvas()" style="border-radius: 5px; padding: 15px;" />
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /MODAL BODY CONTENT -->
</div>
</div>
</div>
<!-- #### MODAL TO APPLY DIGITAL SIGNATURE #### -->
</form>
<form method="post" action="">
<!-- VISITOR FIRST NAME -->
<div class="form-group">
<input type="text" class="form-control" name="visitor_first_name" id="visitor_first_name" placeholder="First Name" required>
</div>
<!-- VISITOR LAST NAME -->
<div class="form-group">
<input type="text" class="form-control" name="visitor_last_name" id="visitor_last_name" placeholder="Last Name" required>
</div>
<!-- VISITOR COMPANY NAME -->
<div class="form-group">
<input type="text" class="form-control" name="visitor_company_name" id="visitor_company_name" placeholder="Company Name" required>
</div>
<!-- VISITING PURPOSE -->
<div class="form-group">
<select class="custom-select form-control" name="visitor_visiting_purpose" id="visitor_visiting_purpose" style="width:100%;" required="required">
<option value="" selected>Visiting Purpose</option>
<option value="Visiting">Visiting</option>
<option value="Cleaning">Cleaning</option>
<option value="Delivery">Delivery</option>
<option value="Maintanance">Maintanance</option>
</select>
</div>
<!-- APARTMENT NUMBER -->
<div class="form-group">
<input type="text" class="form-control" name="visitor_visiting_apartment_number" id="visitor_visiting_apartment_number" placeholder="Apartment Number" required>
</div>
<!-- FORM SUBMIT FOR NEW REGISTRATION -->
<div class="submitBtnContainer">
<button type="button" data-toggle="modal" data-target="#digitalSignatureModal" class="btn my-2 my-sm-0 submitTakePhoto"><i class="fa fa-pencil" aria-hidden="true"></i>Signature</button>
<button type="submit" name="sign_visitor_in" class="btn btn-success my-2 my-sm-0 signoutVisitorFormOption1"><i class="fa fa-sign-in" aria-hidden="true"></i> Sign In</button>
</div>
<!-- #### MODAL TO APPLY DIGITAL SIGNATURE #### -->
<div class="modal fade" id="digitalSignatureModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<!-- MODAL BODY LOGO -->
<div class="col-md-12">
<div id="signinSuccessModalLogo">
<img src="img/Excellent-visitor-signin-small.png" alt="">
</div>
</div>
<!-- MODAL BODY CONTENT -->
<div class="col-md-12">
<div class="modal-body" id="signinSuccessModalContent">
<!-- DISPLAY IMAGE AFTER SIGNED -->
<div id="signaturePad" data-role="content"></div>
<!-- DIGITAL SIGNATURE SECTION -->
<div id="divPopUpSignContract">
<div class="ui-content popUpHeight">
<div id="div_signcontract">
<!-- CANVAS TO DRAW SIGNATURE -->
<canvas id="canvas">Canvas is not supported</canvas>
<!-- SUBMIT SIGNATURE OR CLEAR -->
<div class="col-md-12">
<!-- <input id="btnSubmitSign" type="button" class="btn btn-success" data-dismiss="modal" data-inline="true" data-mini="true" data-theme="b" value="Submit Signature" onclick="fun_submit()" style="border-radius: 5px; padding: 15px;" /> -->
<input id="btnSubmitSign" type="button" class="btn btn-success" data-inline="true" data-mini="true" data-theme="b" value="Submit Signature" onclick="fun_submit()" style="border-radius: 5px; padding: 15px;" />
<input id="btnClearSign" type="button" class="btn btn-warning commentbtn" data-inline="true" data-mini="true" data-theme="b" value="Clear" onclick="init_Sign_Canvas()" style="border-radius: 5px; padding: 15px;" />
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /MODAL BODY CONTENT -->
</div>
</div>
</div>
<!-- #### MODAL TO APPLY DIGITAL SIGNATURE #### -->
</form>
// ### SUBMIT SIGNIN FORM FOR NEW VISITOR REGISTRATION ###
if(isset($_POST['sign_visitor_in'])) {
date_default_timezone_set('Asia/Dubai');
$currentTime = date("H:i:s");
// *** RETREIVE SUBMITTED INFORMATION ON SUBMIT FOR NEW VISITOR REGISTRATION ***
$visitor_first_name = $_POST['visitor_first_name'];
$visitor_last_name = $_POST['visitor_last_name'];
$visitor_company_name = $_POST['visitor_company_name'];
$visitor_visiting_purpose = $_POST['visitor_visiting_purpose'];
$visitor_visiting_apartment_number = $_POST['visitor_visiting_apartment_number'];
//$visitor_visit_status = $_POST['visitor_visit_status'];
$visitor_signin_date = date("Y-m-d");
$visitor_signin_time = date("H:i:s");
$visitor_signout_date = date("H:i:s");
$visitor_signout_time = date("H:i:s");
$visitor_signature = $_FILES['visitor_signature']['name'];
$visitor_signature_tmp = $_FILES['visitor_signature']['tmp_name'];
move_uploaded_file($visitor_signature_tmp, "img/sign-in-signatures/$visitor_signature");
exit();
// *** I added exit() for testing purpose and once it works I remove it.
// *** ADD NEW VISITOR SIGNIN RECORD TO DATABASE ***
$query = "INSERT INTO visitors(visitor_first_name, visitor_last_name, visitor_company_name, visitor_visiting_purpose,
visitor_visiting_apartment_number, visitor_visit_status, visitor_signin_date, visitor_signin_time, visitor_signout_date, visitor_signout_time, visitor_signature)";
$query .= "VALUES('{$visitor_first_name}', '{$visitor_last_name}', '{$visitor_company_name}',
'{$visitor_visiting_purpose}', '{$visitor_visiting_apartment_number}', 'Signed In', '{$visitor_signin_date}', '{$visitor_signin_time}', '', '', '{$visitor_signature}')";
$result = mysqli_query($connection, $query);
// *** GENERAL CONFIM QUERY ***
if(!$result) {
die("QUERY FAILED. " . mysqli_error($connection));
}
}
// ### SUBMIT SIGNIN FORM FOR NEW VISITOR REGISTRATION ###
if(isset($_POST['sign_visitor_in'])) {
date_default_timezone_set('Asia/Dubai');
$currentTime = date("H:i:s");
// *** RETREIVE SUBMITTED INFORMATION ON SUBMIT FOR NEW VISITOR REGISTRATION ***
$visitor_first_name = $_POST['visitor_first_name'];
$visitor_last_name = $_POST['visitor_last_name'];
$visitor_company_name = $_POST['visitor_company_name'];
$visitor_visiting_purpose = $_POST['visitor_visiting_purpose'];
$visitor_visiting_apartment_number = $_POST['visitor_visiting_apartment_number'];
//$visitor_visit_status = $_POST['visitor_visit_status'];
$visitor_signin_date = date("Y-m-d");
$visitor_signin_time = date("H:i:s");
$visitor_signout_date = date("H:i:s");
$visitor_signout_time = date("H:i:s");
$visitor_signature = $_FILES['visitor_signature']['name'];
$visitor_signature_tmp = $_FILES['visitor_signature']['tmp_name'];
move_uploaded_file($visitor_signature_tmp, "img/sign-in-signatures/$visitor_signature");
exit();
// *** I added exit() for testing purpose and once it works I remove it.
// *** ADD NEW VISITOR SIGNIN RECORD TO DATABASE ***
$query = "INSERT INTO visitors(visitor_first_name, visitor_last_name, visitor_company_name, visitor_visiting_purpose,
visitor_visiting_apartment_number, visitor_visit_status, visitor_signin_date, visitor_signin_time, visitor_signout_date, visitor_signout_time, visitor_signature)";
$query .= "VALUES('{$visitor_first_name}', '{$visitor_last_name}', '{$visitor_company_name}',
'{$visitor_visiting_purpose}', '{$visitor_visiting_apartment_number}', 'Signed In', '{$visitor_signin_date}', '{$visitor_signin_time}', '', '', '{$visitor_signature}')";
$result = mysqli_query($connection, $query);
// *** GENERAL CONFIM QUERY ***
if(!$result) {
die("QUERY FAILED. " . mysqli_error($connection));
}
}
function fun_submit() {
if(isSign) {
var canvas = $("#canvas").get(0);
var imgData = canvas.toDataURL();
jQuery('#signaturePad').find('p').remove();
jQuery('#signaturePad').find('img').remove();
jQuery('#signaturePad').append(jQuery('<p>Your Signature:</p>'));
jQuery('#signaturePad').append($('<img/ name="visitor_signature">').attr('src',imgData));
// I BELIEVE THIS IS WHERE THE PROCESS HAPPENS TO UPLOAD THE IMAGE TO THE FOLDER
// I HAVE BEEN TRYING WITH DIFFERENT CODES IN THIS SECTION BUT NOT SUCCEEDING
closePopUp();
} else {
alert('Please sign');
}
}
function fun_submit() {
if(isSign) {
var canvas = $("#canvas").get(0);
var imgData = canvas.toDataURL();
jQuery('#signaturePad').find('p').remove();
jQuery('#signaturePad').find('img').remove();
jQuery('#signaturePad').append(jQuery('<p>Your Signature:</p>'));
jQuery('#signaturePad').append($('<img/ name="visitor_signature">').attr('src',imgData));
// I BELIEVE THIS IS WHERE THE PROCESS HAPPENS TO UPLOAD THE IMAGE TO THE FOLDER
// I HAVE BEEN TRYING WITH DIFFERENT CODES IN THIS SECTION BUT NOT SUCCEEDING
closePopUp();
} else {
alert('Please sign');
}
}
javascript php jquery mysql
javascript php jquery mysql
asked Dec 30 '18 at 23:59


DaneDane
85
85
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
I think that you should :
change your HTML code with adding a hidden field in your form, like this :
<input type=hidden name="visitor_signature" id="visitor_signature">
change your JS code in the fun_submit() function with adding :
jQuery('#visitor_signature').val(imgData)
and finally change your PHP code from :
$visitor_signature = $_FILES['visitor_signature']['name'];
$visitor_signature_tmp = $_FILES['visitor_signature']['tmp_name'];
move_uploaded_file($visitor_signature_tmp, "img/sign-in-signatures/$visitor_signature");
to
$visitor_signature = $_POST['visitor_signature'];
// we receive something like : data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAvcAAADICAYAAABszM7qAAAZc0lEQVR4Xu3da4hVVRsH8GVeS
// we remove the "data:image/png;base64,"
$visitor_signature = preg_replace('#^data:image/w+;base64,#i', '', $visitor_signature);
$visitor_signature = base64_decode($visitor_signature);
file_put_contents("img/sign-in-signatures/visitor_signature.png",$visitor_signature);
as the signature image isn't anymore a uploaded file, but a base64 string put in the textfield "visitor_signature"
Hi Pierre, thank you for your reply, I have tried it but still getting : Notice: Undefined index: visitor_signature
– Dane
Dec 31 '18 at 11:11
@Dane, i've updated my answer with working code (tested in my computer)...it generates correctly the png signature image on the disk...
– Pierre
Dec 31 '18 at 23:18
add a comment |
thank you so much for your time, I appreciate it.
I did as you pointed out to me and started getting an sql error : You have an error in your SQL syntax; check the manual that corresponds to your SQL server version for the right syntax to use near
I then had a look around and added base64_encode before it inserts into the db and then it worked. Without the base64_decode the image won't open in the folder but without the encode afterwards it doesn't upload to the db. Code looks like this now :
$visitor_signature = $_POST['visitor_signature'];
// we receive something like : data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAvcAAADICAYAAABszM7qAAAZc0lEQVR4Xu3da4hVVRsH8GVeS
// we remove the "data:image/png;base64,"
$visitor_signature = preg_replace('#^data:image/w+;base64,#i', '', $visitor_signature);
$visitor_signature = base64_decode($visitor_signature);
file_put_contents("img/sign-in-signatures/" . $visitor_first_name . "_" . $visitor_last_name . "_signature_" . $visitor_company_name . ".png",$visitor_signature);
$visitor_signature = base64_encode($visitor_signature);
Inside the db it still add a huge string but in the backend I am calling the image :
// VISITOR SIGNATURE IMAGE
echo "
<td style='text-align:center;'>
<img src='../img/sign-in-signatures/{$visitor_first_name}_{$visitor_last_name}_signature_{$visitor_company_name}.png' width='125px'>
</td>";
Once again thank you for your time, I hope you have a great upcoming 2019.
Regards
Happy to have helped you! I wish you a happy new year 2019! :-)
– Pierre
Jan 1 at 11:06
Otherwise, I think you could avoid to store the entire base64 signature in db. You can create a unique non-guessable ID with timestamp+random, then you name the image signature with this timestamp. Finally, remains to you to store the image name in the database instead of storing the full image content...
– Pierre
Jan 1 at 11:09
Thank you for the suggestion, I will have a look at it tomorrow morning and see the outcome :)
– Dane
Jan 1 at 22:03
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53982430%2fuploading-digital-signature-to-folder-and-submitting-to-database%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
I think that you should :
change your HTML code with adding a hidden field in your form, like this :
<input type=hidden name="visitor_signature" id="visitor_signature">
change your JS code in the fun_submit() function with adding :
jQuery('#visitor_signature').val(imgData)
and finally change your PHP code from :
$visitor_signature = $_FILES['visitor_signature']['name'];
$visitor_signature_tmp = $_FILES['visitor_signature']['tmp_name'];
move_uploaded_file($visitor_signature_tmp, "img/sign-in-signatures/$visitor_signature");
to
$visitor_signature = $_POST['visitor_signature'];
// we receive something like : data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAvcAAADICAYAAABszM7qAAAZc0lEQVR4Xu3da4hVVRsH8GVeS
// we remove the "data:image/png;base64,"
$visitor_signature = preg_replace('#^data:image/w+;base64,#i', '', $visitor_signature);
$visitor_signature = base64_decode($visitor_signature);
file_put_contents("img/sign-in-signatures/visitor_signature.png",$visitor_signature);
as the signature image isn't anymore a uploaded file, but a base64 string put in the textfield "visitor_signature"
Hi Pierre, thank you for your reply, I have tried it but still getting : Notice: Undefined index: visitor_signature
– Dane
Dec 31 '18 at 11:11
@Dane, i've updated my answer with working code (tested in my computer)...it generates correctly the png signature image on the disk...
– Pierre
Dec 31 '18 at 23:18
add a comment |
I think that you should :
change your HTML code with adding a hidden field in your form, like this :
<input type=hidden name="visitor_signature" id="visitor_signature">
change your JS code in the fun_submit() function with adding :
jQuery('#visitor_signature').val(imgData)
and finally change your PHP code from :
$visitor_signature = $_FILES['visitor_signature']['name'];
$visitor_signature_tmp = $_FILES['visitor_signature']['tmp_name'];
move_uploaded_file($visitor_signature_tmp, "img/sign-in-signatures/$visitor_signature");
to
$visitor_signature = $_POST['visitor_signature'];
// we receive something like : data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAvcAAADICAYAAABszM7qAAAZc0lEQVR4Xu3da4hVVRsH8GVeS
// we remove the "data:image/png;base64,"
$visitor_signature = preg_replace('#^data:image/w+;base64,#i', '', $visitor_signature);
$visitor_signature = base64_decode($visitor_signature);
file_put_contents("img/sign-in-signatures/visitor_signature.png",$visitor_signature);
as the signature image isn't anymore a uploaded file, but a base64 string put in the textfield "visitor_signature"
Hi Pierre, thank you for your reply, I have tried it but still getting : Notice: Undefined index: visitor_signature
– Dane
Dec 31 '18 at 11:11
@Dane, i've updated my answer with working code (tested in my computer)...it generates correctly the png signature image on the disk...
– Pierre
Dec 31 '18 at 23:18
add a comment |
I think that you should :
change your HTML code with adding a hidden field in your form, like this :
<input type=hidden name="visitor_signature" id="visitor_signature">
change your JS code in the fun_submit() function with adding :
jQuery('#visitor_signature').val(imgData)
and finally change your PHP code from :
$visitor_signature = $_FILES['visitor_signature']['name'];
$visitor_signature_tmp = $_FILES['visitor_signature']['tmp_name'];
move_uploaded_file($visitor_signature_tmp, "img/sign-in-signatures/$visitor_signature");
to
$visitor_signature = $_POST['visitor_signature'];
// we receive something like : data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAvcAAADICAYAAABszM7qAAAZc0lEQVR4Xu3da4hVVRsH8GVeS
// we remove the "data:image/png;base64,"
$visitor_signature = preg_replace('#^data:image/w+;base64,#i', '', $visitor_signature);
$visitor_signature = base64_decode($visitor_signature);
file_put_contents("img/sign-in-signatures/visitor_signature.png",$visitor_signature);
as the signature image isn't anymore a uploaded file, but a base64 string put in the textfield "visitor_signature"
I think that you should :
change your HTML code with adding a hidden field in your form, like this :
<input type=hidden name="visitor_signature" id="visitor_signature">
change your JS code in the fun_submit() function with adding :
jQuery('#visitor_signature').val(imgData)
and finally change your PHP code from :
$visitor_signature = $_FILES['visitor_signature']['name'];
$visitor_signature_tmp = $_FILES['visitor_signature']['tmp_name'];
move_uploaded_file($visitor_signature_tmp, "img/sign-in-signatures/$visitor_signature");
to
$visitor_signature = $_POST['visitor_signature'];
// we receive something like : data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAvcAAADICAYAAABszM7qAAAZc0lEQVR4Xu3da4hVVRsH8GVeS
// we remove the "data:image/png;base64,"
$visitor_signature = preg_replace('#^data:image/w+;base64,#i', '', $visitor_signature);
$visitor_signature = base64_decode($visitor_signature);
file_put_contents("img/sign-in-signatures/visitor_signature.png",$visitor_signature);
as the signature image isn't anymore a uploaded file, but a base64 string put in the textfield "visitor_signature"
edited Dec 31 '18 at 23:17
answered Dec 31 '18 at 0:21


PierrePierre
7329
7329
Hi Pierre, thank you for your reply, I have tried it but still getting : Notice: Undefined index: visitor_signature
– Dane
Dec 31 '18 at 11:11
@Dane, i've updated my answer with working code (tested in my computer)...it generates correctly the png signature image on the disk...
– Pierre
Dec 31 '18 at 23:18
add a comment |
Hi Pierre, thank you for your reply, I have tried it but still getting : Notice: Undefined index: visitor_signature
– Dane
Dec 31 '18 at 11:11
@Dane, i've updated my answer with working code (tested in my computer)...it generates correctly the png signature image on the disk...
– Pierre
Dec 31 '18 at 23:18
Hi Pierre, thank you for your reply, I have tried it but still getting : Notice: Undefined index: visitor_signature
– Dane
Dec 31 '18 at 11:11
Hi Pierre, thank you for your reply, I have tried it but still getting : Notice: Undefined index: visitor_signature
– Dane
Dec 31 '18 at 11:11
@Dane, i've updated my answer with working code (tested in my computer)...it generates correctly the png signature image on the disk...
– Pierre
Dec 31 '18 at 23:18
@Dane, i've updated my answer with working code (tested in my computer)...it generates correctly the png signature image on the disk...
– Pierre
Dec 31 '18 at 23:18
add a comment |
thank you so much for your time, I appreciate it.
I did as you pointed out to me and started getting an sql error : You have an error in your SQL syntax; check the manual that corresponds to your SQL server version for the right syntax to use near
I then had a look around and added base64_encode before it inserts into the db and then it worked. Without the base64_decode the image won't open in the folder but without the encode afterwards it doesn't upload to the db. Code looks like this now :
$visitor_signature = $_POST['visitor_signature'];
// we receive something like : data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAvcAAADICAYAAABszM7qAAAZc0lEQVR4Xu3da4hVVRsH8GVeS
// we remove the "data:image/png;base64,"
$visitor_signature = preg_replace('#^data:image/w+;base64,#i', '', $visitor_signature);
$visitor_signature = base64_decode($visitor_signature);
file_put_contents("img/sign-in-signatures/" . $visitor_first_name . "_" . $visitor_last_name . "_signature_" . $visitor_company_name . ".png",$visitor_signature);
$visitor_signature = base64_encode($visitor_signature);
Inside the db it still add a huge string but in the backend I am calling the image :
// VISITOR SIGNATURE IMAGE
echo "
<td style='text-align:center;'>
<img src='../img/sign-in-signatures/{$visitor_first_name}_{$visitor_last_name}_signature_{$visitor_company_name}.png' width='125px'>
</td>";
Once again thank you for your time, I hope you have a great upcoming 2019.
Regards
Happy to have helped you! I wish you a happy new year 2019! :-)
– Pierre
Jan 1 at 11:06
Otherwise, I think you could avoid to store the entire base64 signature in db. You can create a unique non-guessable ID with timestamp+random, then you name the image signature with this timestamp. Finally, remains to you to store the image name in the database instead of storing the full image content...
– Pierre
Jan 1 at 11:09
Thank you for the suggestion, I will have a look at it tomorrow morning and see the outcome :)
– Dane
Jan 1 at 22:03
add a comment |
thank you so much for your time, I appreciate it.
I did as you pointed out to me and started getting an sql error : You have an error in your SQL syntax; check the manual that corresponds to your SQL server version for the right syntax to use near
I then had a look around and added base64_encode before it inserts into the db and then it worked. Without the base64_decode the image won't open in the folder but without the encode afterwards it doesn't upload to the db. Code looks like this now :
$visitor_signature = $_POST['visitor_signature'];
// we receive something like : data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAvcAAADICAYAAABszM7qAAAZc0lEQVR4Xu3da4hVVRsH8GVeS
// we remove the "data:image/png;base64,"
$visitor_signature = preg_replace('#^data:image/w+;base64,#i', '', $visitor_signature);
$visitor_signature = base64_decode($visitor_signature);
file_put_contents("img/sign-in-signatures/" . $visitor_first_name . "_" . $visitor_last_name . "_signature_" . $visitor_company_name . ".png",$visitor_signature);
$visitor_signature = base64_encode($visitor_signature);
Inside the db it still add a huge string but in the backend I am calling the image :
// VISITOR SIGNATURE IMAGE
echo "
<td style='text-align:center;'>
<img src='../img/sign-in-signatures/{$visitor_first_name}_{$visitor_last_name}_signature_{$visitor_company_name}.png' width='125px'>
</td>";
Once again thank you for your time, I hope you have a great upcoming 2019.
Regards
Happy to have helped you! I wish you a happy new year 2019! :-)
– Pierre
Jan 1 at 11:06
Otherwise, I think you could avoid to store the entire base64 signature in db. You can create a unique non-guessable ID with timestamp+random, then you name the image signature with this timestamp. Finally, remains to you to store the image name in the database instead of storing the full image content...
– Pierre
Jan 1 at 11:09
Thank you for the suggestion, I will have a look at it tomorrow morning and see the outcome :)
– Dane
Jan 1 at 22:03
add a comment |
thank you so much for your time, I appreciate it.
I did as you pointed out to me and started getting an sql error : You have an error in your SQL syntax; check the manual that corresponds to your SQL server version for the right syntax to use near
I then had a look around and added base64_encode before it inserts into the db and then it worked. Without the base64_decode the image won't open in the folder but without the encode afterwards it doesn't upload to the db. Code looks like this now :
$visitor_signature = $_POST['visitor_signature'];
// we receive something like : data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAvcAAADICAYAAABszM7qAAAZc0lEQVR4Xu3da4hVVRsH8GVeS
// we remove the "data:image/png;base64,"
$visitor_signature = preg_replace('#^data:image/w+;base64,#i', '', $visitor_signature);
$visitor_signature = base64_decode($visitor_signature);
file_put_contents("img/sign-in-signatures/" . $visitor_first_name . "_" . $visitor_last_name . "_signature_" . $visitor_company_name . ".png",$visitor_signature);
$visitor_signature = base64_encode($visitor_signature);
Inside the db it still add a huge string but in the backend I am calling the image :
// VISITOR SIGNATURE IMAGE
echo "
<td style='text-align:center;'>
<img src='../img/sign-in-signatures/{$visitor_first_name}_{$visitor_last_name}_signature_{$visitor_company_name}.png' width='125px'>
</td>";
Once again thank you for your time, I hope you have a great upcoming 2019.
Regards
thank you so much for your time, I appreciate it.
I did as you pointed out to me and started getting an sql error : You have an error in your SQL syntax; check the manual that corresponds to your SQL server version for the right syntax to use near
I then had a look around and added base64_encode before it inserts into the db and then it worked. Without the base64_decode the image won't open in the folder but without the encode afterwards it doesn't upload to the db. Code looks like this now :
$visitor_signature = $_POST['visitor_signature'];
// we receive something like : data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAvcAAADICAYAAABszM7qAAAZc0lEQVR4Xu3da4hVVRsH8GVeS
// we remove the "data:image/png;base64,"
$visitor_signature = preg_replace('#^data:image/w+;base64,#i', '', $visitor_signature);
$visitor_signature = base64_decode($visitor_signature);
file_put_contents("img/sign-in-signatures/" . $visitor_first_name . "_" . $visitor_last_name . "_signature_" . $visitor_company_name . ".png",$visitor_signature);
$visitor_signature = base64_encode($visitor_signature);
Inside the db it still add a huge string but in the backend I am calling the image :
// VISITOR SIGNATURE IMAGE
echo "
<td style='text-align:center;'>
<img src='../img/sign-in-signatures/{$visitor_first_name}_{$visitor_last_name}_signature_{$visitor_company_name}.png' width='125px'>
</td>";
Once again thank you for your time, I hope you have a great upcoming 2019.
Regards
$visitor_signature = $_POST['visitor_signature'];
// we receive something like : data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAvcAAADICAYAAABszM7qAAAZc0lEQVR4Xu3da4hVVRsH8GVeS
// we remove the "data:image/png;base64,"
$visitor_signature = preg_replace('#^data:image/w+;base64,#i', '', $visitor_signature);
$visitor_signature = base64_decode($visitor_signature);
file_put_contents("img/sign-in-signatures/" . $visitor_first_name . "_" . $visitor_last_name . "_signature_" . $visitor_company_name . ".png",$visitor_signature);
$visitor_signature = base64_encode($visitor_signature);
$visitor_signature = $_POST['visitor_signature'];
// we receive something like : data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAvcAAADICAYAAABszM7qAAAZc0lEQVR4Xu3da4hVVRsH8GVeS
// we remove the "data:image/png;base64,"
$visitor_signature = preg_replace('#^data:image/w+;base64,#i', '', $visitor_signature);
$visitor_signature = base64_decode($visitor_signature);
file_put_contents("img/sign-in-signatures/" . $visitor_first_name . "_" . $visitor_last_name . "_signature_" . $visitor_company_name . ".png",$visitor_signature);
$visitor_signature = base64_encode($visitor_signature);
// VISITOR SIGNATURE IMAGE
echo "
<td style='text-align:center;'>
<img src='../img/sign-in-signatures/{$visitor_first_name}_{$visitor_last_name}_signature_{$visitor_company_name}.png' width='125px'>
</td>";
// VISITOR SIGNATURE IMAGE
echo "
<td style='text-align:center;'>
<img src='../img/sign-in-signatures/{$visitor_first_name}_{$visitor_last_name}_signature_{$visitor_company_name}.png' width='125px'>
</td>";
edited Jan 1 at 22:01
answered Jan 1 at 10:28


DaneDane
85
85
Happy to have helped you! I wish you a happy new year 2019! :-)
– Pierre
Jan 1 at 11:06
Otherwise, I think you could avoid to store the entire base64 signature in db. You can create a unique non-guessable ID with timestamp+random, then you name the image signature with this timestamp. Finally, remains to you to store the image name in the database instead of storing the full image content...
– Pierre
Jan 1 at 11:09
Thank you for the suggestion, I will have a look at it tomorrow morning and see the outcome :)
– Dane
Jan 1 at 22:03
add a comment |
Happy to have helped you! I wish you a happy new year 2019! :-)
– Pierre
Jan 1 at 11:06
Otherwise, I think you could avoid to store the entire base64 signature in db. You can create a unique non-guessable ID with timestamp+random, then you name the image signature with this timestamp. Finally, remains to you to store the image name in the database instead of storing the full image content...
– Pierre
Jan 1 at 11:09
Thank you for the suggestion, I will have a look at it tomorrow morning and see the outcome :)
– Dane
Jan 1 at 22:03
Happy to have helped you! I wish you a happy new year 2019! :-)
– Pierre
Jan 1 at 11:06
Happy to have helped you! I wish you a happy new year 2019! :-)
– Pierre
Jan 1 at 11:06
Otherwise, I think you could avoid to store the entire base64 signature in db. You can create a unique non-guessable ID with timestamp+random, then you name the image signature with this timestamp. Finally, remains to you to store the image name in the database instead of storing the full image content...
– Pierre
Jan 1 at 11:09
Otherwise, I think you could avoid to store the entire base64 signature in db. You can create a unique non-guessable ID with timestamp+random, then you name the image signature with this timestamp. Finally, remains to you to store the image name in the database instead of storing the full image content...
– Pierre
Jan 1 at 11:09
Thank you for the suggestion, I will have a look at it tomorrow morning and see the outcome :)
– Dane
Jan 1 at 22:03
Thank you for the suggestion, I will have a look at it tomorrow morning and see the outcome :)
– Dane
Jan 1 at 22:03
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53982430%2fuploading-digital-signature-to-folder-and-submitting-to-database%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
NcRL8Gts pibn asmCtaWqdXTN 5WLAGbCC,HaiVKTUPIqy1pZams24vO9vnTyLZbQnZVN,w yREaE2avar