app.py - add first photos api route

api/app.py

@@ -1,5 +1,6 @@
 from flask import Flask, request, jsonify
 from database import *
+from werkzeug.utils import secure_filename
 
 app = Flask(__name__)
 
@@ -151,7 +152,6 @@ def settings_collection():
         print(result)
         return jsonify(result), 201
 
-
 @app.route("/settings/<string:name>", methods=["GET", "PUT"])
 def setting_detail(name: str):
     """Retrieve or update a single setting.
@@ -177,6 +177,32 @@ def setting_detail(name: str):
         print(result)
         return jsonify(result)
 
+# ----------------------------- Photos -----------------------------
+
+@app.route('/api/providers/<provider_id>/photos', methods=['POST'])
+def upload_photos(provider_id):
+    if 'photos' not in request.files:
+        return jsonify({'error': 'No files uploaded'}), 400
+    
+    # Secure filename + save to persistent storage
+    upload_folder = f'{os.path.dirname(__file__)}/photos'
+    os.makedirs(upload_folder, exist_ok=True)
+    
+    photo_paths = []
+    for file in request.files.getlist('photos'):
+        if file.filename == '':
+            continue
+            
+        filename = secure_filename(file.filename)
+        file.save(os.path.join(upload_folder, filename))
+        photo_paths.append(f"/uploads/{filename}")
+    
+    # Store paths in DB (e.g., PostgreSQL JSON field)
+    db.execute("UPDATE providers SET photos = %s WHERE id = %s", 
+               (json.dumps(photo_paths), provider_id))
+    
+    return jsonify({'success': True, 'paths': photo_paths}), 200
+
 # Run the app if this file is executed directly
 if __name__ == "__main__":
     app.run(host="0.0.0.0", port=5000, debug=False)

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) -->
+<html>
-<input type="file" id="photo" style="display:none;">
+    <head>
-<div id="drop" style="border:2px dashed #bbb; padding:20px;">
+    </head>
-  Drag photo here or click to choose
-</div>
 
-<script>
+    <body>
-  const drop = document.getElementById('drop');
-  const photoInput = document.getElementById('photo');
 
-  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 => {
+        <script>
-    e.preventDefault();
+            document.getElementById('photo-upload').addEventListener('change', function(e) {
-    drop.style.background='';
+            const files = Array.from(e.target.files);
-    const file = e.dataTransfer.files[0];
+            const preview = document.getElementById('preview-container');
-    upload(file);
+            preview.innerHTML = '';
-  });
+            
-
+            files.forEach(file => {
-  photoInput.addEventListener('change', () => upload(photoInput.files[0]));
+                const img = document.createElement('img');
-
+                img.src = URL.createObjectURL(file);
-  async function upload(file) {
+                img.classList.add('preview-thumb');
-    // 1️⃣  Send file to PHP, which will forward it to Flask
+                preview.appendChild(img);
-    const form = new FormData();
+            });
-    form.append('photo', file);
+            });
-
+        </script>
-    const res = await fetch('/api/upload_photo', {   // <-- PHP endpoint
+    </body>
-      method: 'POST',
+</html>
-      body: form
-    });
-
-    const json = await res.json();
-    console.log('Uploaded:', json);
-  }
-</script>