Form changes Horizon - Upload Daily Field Work Photo
Specific Folder FTP Upload / ftp-deploy (push) Successful in 1m21s
Details
Specific Folder FTP Upload / ftp-deploy (push) Successful in 1m21s
Details
This commit is contained in:
parent
de0ef5dcaa
commit
07a127d003
|
|
@ -158,8 +158,8 @@
|
||||||
|
|
||||||
@case('file')
|
@case('file')
|
||||||
@if(!isset($form->is_approval) || $form->is_approval != 'yes')
|
@if(!isset($form->is_approval) || $form->is_approval != 'yes')
|
||||||
|
|
||||||
@if($question->code == 'upload_photo')
|
@if($question->code == 'upload_photo')
|
||||||
|
|
||||||
<div class="d-flex align-items-center gap-2 mb-2">
|
<div class="d-flex align-items-center gap-2 mb-2">
|
||||||
<label for="field-upload_photo" class="form-label mb-0">
|
<label for="field-upload_photo" class="form-label mb-0">
|
||||||
{{$question->question}}
|
{{$question->question}}
|
||||||
|
|
@ -171,13 +171,44 @@
|
||||||
Open Camera
|
Open Camera
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@else
|
|
||||||
<label for="field-{{$question->code}}" class="form-label">
|
|
||||||
{{$question->question}}
|
|
||||||
{!!$question->required == 'yes' ? '<span class="text-danger">*</span>':''!!}
|
|
||||||
</label>
|
|
||||||
@endif
|
|
||||||
|
|
||||||
|
<div id="photo-camera-container">
|
||||||
|
<video id="photo-camera-preview"
|
||||||
|
autoplay playsinline
|
||||||
|
style="display:none; width:100%; max-height:350px; border-radius:8px;">
|
||||||
|
</video>
|
||||||
|
|
||||||
|
<img id="photo-captured-preview"
|
||||||
|
alt="Captured photo"
|
||||||
|
style="display:none; width:100%; max-height:350px; object-fit:contain;">
|
||||||
|
|
||||||
|
<input type="file"
|
||||||
|
id="field-upload_photo"
|
||||||
|
name="upload_photo"
|
||||||
|
accept="image/*"
|
||||||
|
data-required="{{$question->required == 'yes' ? '1' : '0'}}"
|
||||||
|
style="display:none;">
|
||||||
|
|
||||||
|
<div class="d-flex flex-wrap gap-2 mt-2">
|
||||||
|
<button type="button" id="capture-photo"
|
||||||
|
class="btn btn-success" style="display:none;">
|
||||||
|
Capture Photo
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button type="button" id="retake-photo"
|
||||||
|
class="btn btn-secondary" style="display:none;">
|
||||||
|
Retake Photo
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
@else
|
||||||
|
<input type="file"
|
||||||
|
id="field-{{$question->code}}"
|
||||||
|
name="{{$question->code}}"
|
||||||
|
class="form-control"
|
||||||
|
{{$question->required == 'yes' ? 'required' : ''}}>
|
||||||
|
@endif
|
||||||
|
|
||||||
@elseif(isset($question->value))
|
@elseif(isset($question->value))
|
||||||
<img src="{{$question->value}}" class="img-fluid">
|
<img src="{{$question->value}}" class="img-fluid">
|
||||||
|
|
@ -367,20 +398,30 @@
|
||||||
|
|
||||||
$('#start-photo-camera').on('click', async function () {
|
$('#start-photo-camera').on('click', async function () {
|
||||||
try {
|
try {
|
||||||
if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
|
if (!navigator.mediaDevices ||
|
||||||
throw new Error('Camera access requires HTTPS or localhost.');
|
!navigator.mediaDevices.getUserMedia) {
|
||||||
|
throw new Error('Camera API is unavailable. Use HTTPS or localhost.');
|
||||||
}
|
}
|
||||||
|
|
||||||
// This triggers the browser's native camera permission prompt
|
// Request camera permission
|
||||||
photoStream = await navigator.mediaDevices.getUserMedia({
|
photoStream = await navigator.mediaDevices.getUserMedia({
|
||||||
video: { facingMode: { ideal: 'environment' } },
|
video: {
|
||||||
|
facingMode: { ideal: 'environment' }
|
||||||
|
},
|
||||||
audio: false
|
audio: false
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Check required elements
|
||||||
|
if (!video || !preview || !photoInput) {
|
||||||
|
throw new Error('Camera elements are missing from the page.');
|
||||||
|
}
|
||||||
|
|
||||||
video.srcObject = photoStream;
|
video.srcObject = photoStream;
|
||||||
video.style.display = 'block';
|
video.style.display = 'block';
|
||||||
preview.style.display = 'none';
|
preview.style.display = 'none';
|
||||||
|
|
||||||
|
await video.play();
|
||||||
|
|
||||||
$('#start-photo-camera').hide();
|
$('#start-photo-camera').hide();
|
||||||
$('#capture-photo').show();
|
$('#capture-photo').show();
|
||||||
$('#retake-photo').hide();
|
$('#retake-photo').hide();
|
||||||
|
|
@ -388,20 +429,26 @@
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Camera error:', error);
|
console.error('Camera error:', error);
|
||||||
|
|
||||||
|
// Stop any partially opened camera stream
|
||||||
|
if (photoStream) {
|
||||||
|
photoStream.getTracks().forEach(track => track.stop());
|
||||||
|
photoStream = null;
|
||||||
|
}
|
||||||
|
|
||||||
if (error.name === 'NotAllowedError' ||
|
if (error.name === 'NotAllowedError' ||
|
||||||
error.name === 'PermissionDeniedError') {
|
error.name === 'PermissionDeniedError') {
|
||||||
|
|
||||||
Swal.fire({
|
Swal.fire({
|
||||||
icon: 'warning',
|
icon: 'warning',
|
||||||
title: 'Camera Permission Required',
|
title: 'Camera Access Denied',
|
||||||
text: 'Please allow camera access in your browser settings and click Open Camera again.'
|
text: 'Please enable camera permission for this website in your browser settings, then try again.'
|
||||||
});
|
});
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
Swal.fire({
|
Swal.fire({
|
||||||
icon: 'error',
|
icon: 'error',
|
||||||
title: 'Camera Unavailable',
|
title: 'Unable to Open Camera',
|
||||||
text: 'Unable to access your camera. Please check your camera and try again.'
|
text: error.message || 'Please check your camera and try again.'
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue