diff --git a/resources/views/surveyor/components/foto.blade.php b/resources/views/surveyor/components/foto.blade.php
index c235149..a872162 100644
--- a/resources/views/surveyor/components/foto.blade.php
+++ b/resources/views/surveyor/components/foto.blade.php
@@ -286,6 +286,8 @@
// Track files that are already on the server
const existingFiles = new Set();
+ addCameraOption(dropzoneElement, paramName);
+
myDropzone = new Dropzone(selector, {
url: "{{ route('surveyor.storeFoto') }}",
paramName: paramName,
@@ -392,6 +394,133 @@
}
}
+
+ function addCameraOption(dropzoneElement, paramName) {
+ if (dropzoneElement.querySelector('.upload-options')) {
+ return;
+ }
+
+ // Create the upload options container
+ const uploadOptionsContainer = document.createElement('div');
+ uploadOptionsContainer.className = 'upload-options';
+ uploadOptionsContainer.style.cssText = `
+ display: flex;
+ justify-content: center;
+ margin-top: 10px;
+ gap: 20px;
+ `;
+
+ // Create camera button
+ const cameraButton = document.createElement('button');
+ cameraButton.type = 'button';
+ cameraButton.className = 'camera-button';
+ cameraButton.innerHTML = ' Kamera';
+ cameraButton.style.cssText = `
+ padding: 8px 16px;
+ background-color: #f5f8fa;
+ border: 1px solid #e4e6ef;
+ border-radius: 6px;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ cursor: pointer;
+ `;
+
+ // Create file button
+ const fileButton = document.createElement('button');
+ fileButton.type = 'button';
+ fileButton.className = 'file-button';
+ fileButton.innerHTML = ' File';
+ fileButton.style.cssText = `
+ padding: 8px 16px;
+ background-color: #f5f8fa;
+ border: 1px solid #e4e6ef;
+ border-radius: 6px;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ cursor: pointer;
+ `;
+
+ /
+ const cameraInput = document.createElement('input');
+ cameraInput.type = 'file';
+ cameraInput.id = 'camera-input-' + paramName;
+ cameraInput.accept = 'image/*';
+ cameraInput.capture = 'environment';
+ cameraInput.style.display = 'none';
+
+
+ const fileInput = document.createElement('input');
+ fileInput.type = 'file';
+ fileInput.id = 'file-input-' + paramName;
+ fileInput.accept = 'image/*';
+ fileInput.style.display = 'none';
+
+ // Add event listeners - use only one instance per button
+ cameraButton.addEventListener('click', function(e) {
+ e.preventDefault();
+ e.stopPropagation();
+ cameraInput.click();
+ }, false);
+
+ fileButton.addEventListener('click', function(e) {
+ e.preventDefault();
+ e.stopPropagation();
+ fileInput.click();
+ }, false);
+
+ // Handle file selection for camera - clear input after use
+ cameraInput.addEventListener('change', function() {
+ if (this.files && this.files.length > 0) {
+ handleFileSelection(this.files, myDropzone);
+
+ this.value = '';
+ }
+ }, false);
+
+ // Handle file selection for gallery - clear input after use
+ fileInput.addEventListener('change', function() {
+ if (this.files && this.files.length > 0) {
+ handleFileSelection(this.files, myDropzone);
+
+ this.value = '';
+ }
+ }, false);
+
+ // Append elements
+ uploadOptionsContainer.appendChild(cameraButton);
+ uploadOptionsContainer.appendChild(fileButton);
+ document.body.appendChild(cameraInput);
+ document.body.appendChild(fileInput);
+
+ // Find the message element in dropzone and insert the options after it
+ const dzMessage = dropzoneElement.querySelector('.dz-message');
+ if (dzMessage) {
+ dzMessage.appendChild(uploadOptionsContainer);
+ } else {
+ dropzoneElement.appendChild(uploadOptionsContainer);
+ }
+
+
+ if (dzMessage) {
+ dzMessage.style.cssText += `
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ `;
+ }
+ }
+
+
+ function handleFileSelection(files, dropzone) {
+ if (!dropzone) return;
+
+ Array.from(files).forEach(file => {
+ dropzone.addFile(file);
+ });
+ }
+
function loadExistingPhotos(dropzone, paramName, existingFilesSet) {
showLoadingOverlay();
@@ -529,6 +658,12 @@
});
}
+
+ // Check if device is mobile
+ function isMobileDevice() {
+ return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+ }
+
// Inisialisasi Dropzone untuk elemen awal dengan pengecekan
function safeInitDropzone(selector, paramName) {
setTimeout(() => {