open image uploader to open galley to upload images - Follow Up Deployment

index.html

@@ -125,7 +125,7 @@
                             <h4 class="text-lg font-medium mb-4">Upload Options</h4>
                             <div class="grid grid-cols-2 gap-4 mb-4">
                                 <div id="images-upload" class="upload-area rounded-lg p-6 text-center cursor-pointer">
-                                    <input type="file" id="image-upload" class="hidden" accept="image/*" multiple>
+                                    <input type="file" id="image-upload" class="hidden" accept="image/*" multiple capture="environment">
                                     <div id="images-upload-content" class="flex flex-col items-center justify-center">
                                         <i class="fas fa-images text-3xl text-purple-500 mb-3"></i>
                                         <p class="font-medium mb-1">Upload Multiple Images</p>
@@ -447,15 +447,16 @@
                 showToast('Signed out successfully');
             });
 
-            // Image Upload
-            document.getElementById('images-upload-btn').addEventListener('click', () => {
-                document.getElementById('image-upload').click();
-            });
+            // Image Upload - Handle both button and container clicks
+            const handleImageUploadClick = () => {
+                const input = document.getElementById('image-upload');
+                if (input) {
+                    input.click();
+                }
+            };
             
-            // Click on images upload area
-            document.getElementById('images-upload').addEventListener('click', () => {
-                document.getElementById('image-upload').click();
-            });
+            document.getElementById('images-upload-btn').addEventListener('click', handleImageUploadClick);
+            document.getElementById('images-upload').addEventListener('click', handleImageUploadClick);
 
             // ZIP Upload
             document.getElementById('zip-upload-btn').addEventListener('click', () => {
@@ -469,7 +470,8 @@
 
             // Handle image upload
             document.getElementById('image-upload').addEventListener('change', (e) => {
-                if (e.target.files.length < 5) {
+                const files = e.target.files;
+                if (files.length < 5) {
                     showToast('Please upload at least 5 images', 'error');
                     return;
                 }
@@ -485,11 +487,14 @@
                 const previewContainer = document.querySelector('#images-preview div');
                 previewContainer.innerHTML = '';
                 
-                document.getElementById('image-count').textContent = e.target.files.length;
+                document.getElementById('image-count').textContent = files.length;
                 
                 // Show first 5 images as preview
-                const filesToShow = Math.min(e.target.files.length, 5);
+                const filesToShow = Math.min(files.length, 5);
                 for (let i = 0; i < filesToShow; i++) {
+                    const file = files[i];
+                    if (!file.type.match('image.*')) continue;
+                    
                     const reader = new FileReader();
                     reader.onload = function(event) {
                         const img = document.createElement('img');
@@ -497,7 +502,17 @@
                         img.className = 'w-20 h-20 object-cover rounded-lg';
                         previewContainer.appendChild(img);
                     };
-                    reader.readAsDataURL(e.target.files[i]);
+                    reader.readAsDataURL(file);
+                }
+                
+                // Also set the first image as the main preview
+                const firstFile = files[0];
+                if (firstFile && firstFile.type.match('image.*')) {
+                    const reader = new FileReader();
+                    reader.onload = function(event) {
+                        document.getElementById('preview-image').src = event.target.result;
+                    };
+                    reader.readAsDataURL(firstFile);
                 }
             });