poc/pds
1
0
Fork 1
Code Issues Pull Requests 8 Actions Packages Projects Releases Wiki Activity

Added file uploaded button in ocr screen

Browse Source
This commit is contained in:
dhanabalan
2025-10-24 17:06:17 +05:30
parent 2062af55a1
commit d2b68c8c63
1 changed files with 100 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
resources/views/fields/camera-capture.blade.php
View File

@@ -283,6 +283,7 @@ document.addEventListener('DOMContentLoaded', () => {
<x-filament::button color="primary" @click="retakePhoto" x-show="photoTaken">Retake</x-filament::button>
<x-filament::button color="primary" @click="switchCamera" x-show="!photoTaken" class="inline-flex w-auto">Switch Camera</x-filament::button>
<x-filament::button color="primary" @click="verify" x-show="photoTaken" class="inline-flex w-auto">Verify</x-filament::button>
<x-filament::button color="success" @click="uploadCroppedImage" x-show="photoTaken">OK ✔ Upload Cropped</x-filament::button>
</div>
<input type="hidden" x-ref="hiddenInput" x-model="photo1" name="camera_capture_file">
@@ -322,55 +323,55 @@ function cameraCapture() {
await this.initCamera();
},
async capturePhoto() {
const video = this.$refs.video;
const canvas = this.$refs.canvas;
const context = canvas.getContext('2d');
// async capturePhoto() {
// const video = this.$refs.video;
// const canvas = this.$refs.canvas;
// const context = canvas.getContext('2d');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
context.drawImage(video, 0, 0, canvas.width, canvas.height);
// canvas.width = video.videoWidth;
// canvas.height = video.videoHeight;
// context.drawImage(video, 0, 0, canvas.width, canvas.height);
// Show snapshot
const snapshot = this.$refs.snapshot;
snapshot.src = canvas.toDataURL('image/png');
snapshot.classList.remove('hidden');
video.classList.add('hidden');
// // Show snapshot
// const snapshot = this.$refs.snapshot;
// snapshot.src = canvas.toDataURL('image/png');
// snapshot.classList.remove('hidden');
// video.classList.add('hidden');
// Convert canvas to file
canvas.toBlob(async blob => {
const file = new File([blob], 'capture.png', { type: 'image/png' });
console.log("File ready for upload:", file);
// // Convert canvas to file
// canvas.toBlob(async blob => {
// const file = new File([blob], 'capture.png', { type: 'image/png' });
// console.log("File ready for upload:", file);
// Upload to temp folder
const formData = new FormData();
formData.append('photo', file);
// // Upload to temp folder
// const formData = new FormData();
// formData.append('photo', file);
const response = await fetch('/temp-upload', {
method: 'POST',
headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
body: formData
});
// const response = await fetch('/temp-upload', {
// method: 'POST',
// headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
// body: formData
// });
const data = await response.json();
if (data.success) {
this.$refs.hiddenInput.value = data.path; // Filament form hidden input
console.log("Saved to temp:", data.path);
} else {
alert('Failed to save image.');
}
}, 'image/png', 1.0); // 1.0 = highest quality
// const data = await response.json();
// if (data.success) {
// this.$refs.hiddenInput.value = data.path; // Filament form hidden input
// console.log("Saved to temp:", data.path);
// } else {
// alert('Failed to save image.');
// }
// }, 'image/png', 1.0); // 1.0 = highest quality
this.photoTaken = true;
// this.photoTaken = true;
// Create cropper on image
this.cropper = new Cropper(snapshot, {
aspectRatio: NaN, // User free crop area
viewMode: 1
});
// // Create cropper on image
// // this.cropper = new Cropper(snapshot, {
// // aspectRatio: NaN, // User free crop area
// // viewMode: 1
// // });
if (this.stream) this.stream.getTracks().forEach(track => track.stop());
},
// if (this.stream) this.stream.getTracks().forEach(track => track.stop());
// },
// async verifyOCR(dataUrl) {
@@ -396,6 +397,64 @@ function cameraCapture() {
// await this.verifyOCR(dataUrl);
// },
async capturePhoto() {
const video = this.$refs.video;
const canvas = this.$refs.canvas;
const ctx = canvas.getContext('2d');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
ctx.drawImage(video, 0, 0);
const snapshot = this.$refs.snapshot;
snapshot.src = canvas.toDataURL('image/png');
snapshot.classList.remove('hidden');
video.classList.add('hidden');
this.photoTaken = true;
this.stopCamera();
// ✅ Enable Cropper now
this.cropper = new Cropper(snapshot, {
aspectRatio: NaN,
viewMode: 1,
dragMode: 'crop'
});
},
//
async uploadCroppedImage() {
if (!this.cropper) {
alert("Crop the image before upload!");
return;
}
const croppedCanvas = this.cropper.getCroppedCanvas();
croppedCanvas.toBlob(async blob => {
const formData = new FormData();
formData.append('photo', blob, 'cropped.png');
const response = await fetch('/temp-upload', {
method: 'POST',
headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
body: formData
});
const data = await response.json();
if (data.success) {
this.$refs.hiddenInput.value = data.path;
alert("✅ Cropped image uploaded!");
} else {
alert("Upload failed!");
}
}, "image/png");
},
async verify() {
const filePath = this.$refs.hiddenInput.value; // e.g., "temp/capture_1760764396.jpeg"
@@ -441,6 +500,7 @@ function cameraCapture() {
this.photoTaken = false;
this.$refs.snapshot.classList.add('hidden');
this.$refs.video.classList.remove('hidden');
this.cropper?.destroy();
await this.initCamera();
}
}