From d9c3f12ee61192ad54c0eaab2762f0da9bb5be90 Mon Sep 17 00:00:00 2001
From: majid <rustammajid76@gmail.com>
Date: Thu, 17 Apr 2025 10:04:34 +0700
Subject: [PATCH] fix(surveyor): perbaikkan upload foto mengunakan kamera dan
 upload file foto

---
 .../views/surveyor/components/foto.blade.php  | 135 ++++++++++++++++++
 1 file changed, 135 insertions(+)

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 = '<i class="ki-duotone ki-camera fs-2"></i> 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 = '<i class="ki-duotone ki-folder fs-2"></i> 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(() => {