Fix JSON validation issue for array fields

- Added 'mode=before' to field validators for utility, phenology_stages, and photographs
- Validators now handle JSON string input and parse to arrays/objects before validation
- This fixes the validation error where arrays were received as JSON strings
- Frontend sends proper JavaScript arrays which get serialized to JSON strings in transit
- Backend now properly deserializes these strings back to arrays for validation

app.py

@@ -303,9 +303,16 @@ class TreeCreate(BaseModel):
     # 12. Notes
     notes: Optional[str] = Field(None, max_length=2000, description="Additional observations")
 
-    @field_validator("utility")
+    @field_validator("utility", mode='before')
     @classmethod
     def validate_utility(cls, v):
+        # Handle JSON string input
+        if isinstance(v, str):
+            try:
+                v = json.loads(v)
+            except json.JSONDecodeError:
+                raise ValueError(f"Invalid JSON string for utility: {v}")
+        
         if v is not None:
             valid_utilities = [
                 "Religious", "Timber", "Biodiversity", "Hydrological benefit", 
@@ -316,9 +323,16 @@ class TreeCreate(BaseModel):
                     raise ValueError(f"Invalid utility: {item}. Must be one of: {valid_utilities}")
         return v
 
-    @field_validator("phenology_stages")
+    @field_validator("phenology_stages", mode='before')
     @classmethod
     def validate_phenology(cls, v):
+        # Handle JSON string input
+        if isinstance(v, str):
+            try:
+                v = json.loads(v)
+            except json.JSONDecodeError:
+                raise ValueError(f"Invalid JSON string for phenology_stages: {v}")
+        
         if v is not None:
             valid_stages = [
                 "New leaves", "Old leaves", "Open flowers", "Fruiting", 
@@ -329,9 +343,16 @@ class TreeCreate(BaseModel):
                     raise ValueError(f"Invalid phenology stage: {stage}. Must be one of: {valid_stages}")
         return v
 
-    @field_validator("photographs")
+    @field_validator("photographs", mode='before')
     @classmethod
     def validate_photographs(cls, v):
+        # Handle JSON string input
+        if isinstance(v, str):
+            try:
+                v = json.loads(v)
+            except json.JSONDecodeError:
+                raise ValueError(f"Invalid JSON string for photographs: {v}")
+        
         if v is not None:
             valid_categories = ["Leaf", "Bark", "Fruit", "Seed", "Flower", "Full tree"]
             for category in v.keys():

static/app.js

@@ -339,6 +339,9 @@ class TreeTrackApp {
     async handleSubmit(e) {
         e.preventDefault();
         
+        const utilityValues = this.getSelectedValues('utilityOptions');
+        const phenologyValues = this.getSelectedValues('phenologyOptions');
+        
         const treeData = {
             latitude: parseFloat(document.getElementById('latitude').value),
             longitude: parseFloat(document.getElementById('longitude').value),
@@ -348,14 +351,19 @@ class TreeTrackApp {
             tree_code: document.getElementById('treeCode').value || null,
             height: document.getElementById('height').value ? parseFloat(document.getElementById('height').value) : null,
             width: document.getElementById('width').value ? parseFloat(document.getElementById('width').value) : null,
-            utility: this.getSelectedValues('utilityOptions'),
-            phenology_stages: this.getSelectedValues('phenologyOptions'),
+            utility: utilityValues.length > 0 ? utilityValues : [],
+            phenology_stages: phenologyValues.length > 0 ? phenologyValues : [],
             storytelling_text: document.getElementById('storytellingText').value || null,
             storytelling_audio: this.audioFile,
             photographs: Object.keys(this.uploadedPhotos).length > 0 ? this.uploadedPhotos : null,
             notes: document.getElementById('notes').value || null
         };
         
+        // Debug log to check the data structure
+        console.log('Tree data being sent:', treeData);
+        console.log('Utility type:', typeof treeData.utility, treeData.utility);
+        console.log('Phenology type:', typeof treeData.phenology_stages, treeData.phenology_stages);
+        
         try {
             const response = await fetch('/api/trees', {
                 method: 'POST',