app.py - add first photos api route

web/photos-old.php

@@ -0,0 +1,38 @@
+<!-- index.html (served by PHP) -->
+<input type="file" id="photo" style="display:none;">
+<div id="drop" style="border:2px dashed #bbb; padding:20px;">
+  Drag photo here or click to choose
+</div>
+
+<script>
+  const drop = document.getElementById('drop');
+  const photoInput = document.getElementById('photo');
+
+  drop.onclick = () => photoInput.click();
+
+  drop.addEventListener('dragover', e => { e.preventDefault(); drop.style.background='#eef'; });
+  drop.addEventListener('dragleave', e => { e.preventDefault(); drop.style.background=''; });
+
+  drop.addEventListener('drop', e => {
+    e.preventDefault();
+    drop.style.background='';
+    const file = e.dataTransfer.files[0];
+    upload(file);
+  });
+
+  photoInput.addEventListener('change', () => upload(photoInput.files[0]));
+
+  async function upload(file) {
+    // 1️⃣  Send file to PHP, which will forward it to Flask
+    const form = new FormData();
+    form.append('photo', file);
+
+    const res = await fetch('/api/upload_photo', {   // <-- PHP endpoint
+      method: 'POST',
+      body: form
+    });
+
+    const json = await res.json();
+    console.log('Uploaded:', json);
+  }
+</script>

web/photos.php

@@ -1,38 +1,37 @@
-<!-- index.html (served by PHP) -->
-<input type="file" id="photo" style="display:none;">
-<div id="drop" style="border:2px dashed #bbb; padding:20px;">
-  Drag photo here or click to choose
-</div>
+<html>
+    <head>
+    </head>
 
-<script>
-  const drop = document.getElementById('drop');
-  const photoInput = document.getElementById('photo');
+    <body>
 
-  drop.onclick = () => photoInput.click();
+        <div class="photo-grid">
+        <div class="photo-item">
+            <input type="radio" name="main_photo" value="1" checked>
+            <img src="photo1.jpg" />
+        </div>
+        <div class="photo-item">
+            <input type="radio" name="main_photo" value="2">
+            <img src="photo2.jpg" />
+        </div>
+        </div>
+            
+        <input type="file" id="photo-upload" name="photos[]" multiple accept="image/*" />
+        <div id="preview-container"></div>  
 
-  drop.addEventListener('dragover', e => { e.preventDefault(); drop.style.background='#eef'; });
-  drop.addEventListener('dragleave', e => { e.preventDefault(); drop.style.background=''; });
 
-  drop.addEventListener('drop', e => {
-    e.preventDefault();
-    drop.style.background='';
-    const file = e.dataTransfer.files[0];
-    upload(file);
-  });
-
-  photoInput.addEventListener('change', () => upload(photoInput.files[0]));
-
-  async function upload(file) {
-    // 1️⃣  Send file to PHP, which will forward it to Flask
-    const form = new FormData();
-    form.append('photo', file);
-
-    const res = await fetch('/api/upload_photo', {   // <-- PHP endpoint
-      method: 'POST',
-      body: form
-    });
-
-    const json = await res.json();
-    console.log('Uploaded:', json);
-  }
-</script>
+        <script>
+            document.getElementById('photo-upload').addEventListener('change', function(e) {
+            const files = Array.from(e.target.files);
+            const preview = document.getElementById('preview-container');
+            preview.innerHTML = '';
+            
+            files.forEach(file => {
+                const img = document.createElement('img');
+                img.src = URL.createObjectURL(file);
+                img.classList.add('preview-thumb');
+                preview.appendChild(img);
+            });
+            });
+        </script>
+    </body>
+</html>