fix: Multiple images not saving in new post creation

Problem:
- Only cover image was being saved when creating posts
- Section images were shown in preview but not sent to backend
- File inputs were not preserved after section saving

Solution:
- Store section files in global JavaScript storage
- Send all section images in FormData during form submission
- Update backend to process section_image_* files
- Add is_cover flag distinction between cover and section images
- Preserve file references throughout the editing process

Features:
- Multiple images per post section now work correctly
- Cover image marked with is_cover=True
- Section images marked with is_cover=False
- Proper file cleanup when images are removed
- Enhanced logging for debugging image uploads

app/routes/community.py

@@ -273,8 +273,8 @@ def new_post():
                                 original_name=cover_file.filename,
                                 size=result['size'],
                                 mime_type=result['mime_type'],
-                                post_id=post.id
+                                post_id=post.id,
-                                # Note: is_cover column missing, will be added in future migration
+                                is_cover=True  # Mark as cover image
                             )
                             db.session.add(cover_image)
                             current_app.logger.info(f'Cover image saved: {result["filename"]}')
@@ -300,6 +300,32 @@ def new_post():
                     except Exception as e:
                         current_app.logger.warning(f'Error processing GPX file: {str(e)}')
             
+            # Handle section images (multiple images from content sections)
+            section_images_processed = 0
+            for key in request.files.keys():
+                if key.startswith('section_image_') and not key.endswith('_section'):
+                    try:
+                        image_file = request.files[key]
+                        if image_file and image_file.filename:
+                            current_app.logger.info(f'Processing section image: {image_file.filename}')
+                            result = save_image(image_file, post.id)
+                            if result['success']:
+                                section_image = PostImage(
+                                    filename=result['filename'],
+                                    original_name=image_file.filename,
+                                    size=result['size'],
+                                    mime_type=result['mime_type'],
+                                    post_id=post.id,
+                                    is_cover=False  # Section images are not cover images
+                                )
+                                db.session.add(section_image)
+                                section_images_processed += 1
+                                current_app.logger.info(f'Section image saved: {result["filename"]}')
+                    except Exception as e:
+                        current_app.logger.warning(f'Error processing section image {key}: {str(e)}')
+            
+            current_app.logger.info(f'Total section images processed: {section_images_processed}')
+
             db.session.commit()
             current_app.logger.info(f'Post {post.id} committed to database successfully')
             

app/templates/community/new_post.html

@@ -244,6 +244,8 @@
 
 <script>
 document.addEventListener('DOMContentLoaded', function() {
+    // Global storage for section files
+    window.sectionFiles = {};
     let sectionCounter = 0;
     
     // Populate form from URL parameters
@@ -418,18 +420,40 @@ document.addEventListener('DOMContentLoaded', function() {
         
         imageInput.addEventListener('change', function() {
             const files = Array.from(this.files);
+            
+            // Store files in global storage for this section
+            if (!window.sectionFiles[sectionId]) {
+                window.sectionFiles[sectionId] = [];
+            }
+            
             files.forEach(file => {
                 if (file.type.startsWith('image/')) {
+                    // Add to global storage
+                    window.sectionFiles[sectionId].push(file);
+                    
                     const reader = new FileReader();
                     reader.onload = function(e) {
                         const imagePreview = document.createElement('div');
                         imagePreview.className = 'image-preview';
+                        imagePreview.dataset.fileIndex = window.sectionFiles[sectionId].length - 1;
                         imagePreview.innerHTML = `
                             <img src="${e.target.result}" alt="Preview">
                             <div class="remove-btn">&times;</div>
                         `;
                         
                         imagePreview.querySelector('.remove-btn').addEventListener('click', function() {
+                            // Remove from global storage
+                            const fileIndex = parseInt(imagePreview.dataset.fileIndex);
+                            window.sectionFiles[sectionId].splice(fileIndex, 1);
+                            
+                            // Update indices for remaining previews
+                            const remainingPreviews = imagesPreview.querySelectorAll('.image-preview');
+                            remainingPreviews.forEach((preview, index) => {
+                                if (parseInt(preview.dataset.fileIndex) > fileIndex) {
+                                    preview.dataset.fileIndex = parseInt(preview.dataset.fileIndex) - 1;
+                                }
+                            });
+                            
                             imagePreview.remove();
                         });
                         
@@ -609,6 +633,19 @@ document.addEventListener('DOMContentLoaded', function() {
         if (gpxFile) {
             formData.append('gpx_file', gpxFile);
         }
+
+        // Add section images from all saved sections
+        let imageCounter = 0;
+        savedSections.forEach((section, sectionIndex) => {
+            const sectionId = section.dataset.sectionId;
+            if (window.sectionFiles[sectionId] && window.sectionFiles[sectionId].length > 0) {
+                window.sectionFiles[sectionId].forEach((file, fileIndex) => {
+                    formData.append(`section_image_${imageCounter}`, file);
+                    formData.append(`section_image_${imageCounter}_section`, sectionIndex);
+                    imageCounter++;
+                });
+            }
+        });
         
         // Show loading state
         const submitBtn = document.querySelector('button[type="submit"]');