I am facing an issue with submitting signature data to the database in my Laravel application. The peculiar thing is that this problem only occurs when I have authentication enabled. When I remove the authentication middleware from the routes, everything works as expected.
Here is the relevant Blade code for the signature inputs:
<div class="row">
<!-- Employee Signature -->
<div class="col-md-6">
<div class="form-group">
<label for="employee_signature">Employee Signature</label>
<div class="card">
<div class="card-body">
<canvas id="employee_signature" style="width: 100%; height: 200px;"></canvas>
</div>
</div>
<button type="button" id="clear_employee_signature" class="btn btn-secondary mt-2">Clear</button>
<input type="hidden" id="employee_signature_data" name="employee_signature">
</div>
</div>
<!-- Customer Signature -->
<div class="col-md-6">
<div class="form-group">
<label for="customer_signature">Customer Signature</label>
<div class="card">
<div class="card-body">
<canvas id="customer_signature" style="width: 100%; height: 200px;"></canvas>
</div>
</div>
<button type="button" id="clear_customer_signature" class="btn btn-secondary mt-2">Clear</button>
<input type="hidden" id="customer_signature_data" name="customer_signature">
</div>
</div>
</div>
<div class="form-group">
<label for="image_draw">Damage</label>
<div class="card">
<div class="card-body">
<canvas id="image_draw" style="width: 100%; height: 470px;"></canvas>
</div>
</div>
<button type="button" id="clear_image_draw" class="btn btn-secondary mt-2">Clear</button>
<input type="hidden" id="image_draw_data" name="image_draw">
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script>
window.onload = function () {
var employeeSignatureCanvas = document.getElementById('employee_signature');
var customerSignatureCanvas = document.getElementById('customer_signature');
var imageDrawCanvas = document.getElementById('image_draw');
[employeeSignatureCanvas, customerSignatureCanvas, imageDrawCanvas].forEach(canvas => {
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
});
var employeeSignaturePad = new SignaturePad(employeeSignatureCanvas, {penColor: 'red', minWidth: 1, maxWidth: 1});
var customerSignaturePad = new SignaturePad(customerSignatureCanvas, {penColor: 'red', minWidth: 1, maxWidth: 1});
var imageDrawPad = new SignaturePad(imageDrawCanvas, {penColor: 'red', minWidth: 10, maxWidth: 10});
document.getElementById('clear_employee_signature').addEventListener('click', function () {
employeeSignaturePad.clear();
});
document.getElementById('clear_customer_signature').addEventListener('click', function () {
customerSignaturePad.clear();
});
document.getElementById('clear_image_draw').addEventListener('click', function () {
imageDrawPad.clear();
imageDrawCanvas.getContext('2d').drawImage(image, 0, 0, imageDrawCanvas.width, imageDrawCanvas.height);
});
document.querySelector('form').addEventListener('submit', function (e) {
var employeeSignatureData = employeeSignaturePad.toDataURL();
var customerSignatureData = customerSignaturePad.toDataURL();
var imageDrawData = imageDrawPad.toDataURL();
document.getElementById('employee_signature_data').value = employeeSignatureData;
document.getElementById('customer_signature_data').value = customerSignatureData;
document.getElementById('image_draw_data').value = imageDrawData;
if (employeeSignaturePad.isEmpty() || customerSignaturePad.isEmpty() || imageDrawPad.isEmpty()) {
e.preventDefault();
alert('Please provide both signatures and draw on the image.');
}
});
};
$(function() {
var employees = @json(array_map(function($employee) { return $employee['name']; }, $employees));
</script>
web.php
use IlluminateSupportFacadesRoute;
use AppHttpControllersTicketController;
use AppHttpControllersAuthLoginController;
// Login routes
Route::get('/login', [LoginController::class, 'showLoginForm'])->name('login');
Route::post('/login', [LoginController::class, 'login']);
Route::post('/logout', [LoginController::class, 'logout'])->name('logout');
// Authenticated routes
Route::middleware(['auth'])->group(function () {
// Ticket routes
Route::get('/', [TicketController::class, 'index']);
Route::get('/add-ticket', [TicketController::class, 'create']);
Route::post('/add-ticket', [TicketController::class, 'store']);
// Ticket specific routes
Route::prefix('ticket')->group(function () {
Route::get('/{id}', [TicketController::class, 'show']);
Route::get('/{id}/pdf', [TicketController::class, 'generatePDF']);
Route::put('/{id}', [TicketController::class, 'updateStatus']);
Route::put('/{id}/report', [TicketController::class, 'updateReport']);
});
// Home route
Route::get('/home', [TicketController::class, 'index'])->name('home');
});
TicketController
public function store(Request $request)
{
// Log the request data
Log::info('Request data:', $request->all());
$ticket = new Ticket;
$ticket->full_name = $request->full_name;
$ticket->cpr = $request->cpr;
$ticket->password = $request->password;
$ticket->mobile_no = $request->mobile_no;
$ticket->invoice_no = $request->invoice_no;
$ticket->products_with_issue = $request->products_with_issue;
$ticket->issue_description = $request->issue_description;
$ticket->received_by = $request->received_by;
$ticket->assigned_to = $request->assigned_to;
$ticket->employee_signature = $request->employee_signature;
$ticket->customer_signature = $request->customer_signature;
$ticket->image_draw = $request->image_draw;
$ticket->save();
return redirect('/add-ticket')->with('status', 'Ticket added successfully!');
}