ske087/moto-adv-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Multiple images not saving in new post creation

Browse Source 
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
This commit is contained in:
ske087
2025-07-24 16:03:38 +03:00
parent 5a6dbc46eb
commit 73b90eafbc
2 changed files with 65 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
app/routes/community.py
View File

@@ -273,8 +273,8 @@ def new_post():
original_name=cover_file.filename,
size=result['size'],
mime_type=result['mime_type'],
post_id=post.id
# Note: is_cover column missing, will be added in future migration
post_id=post.id,
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')

37
app/templates/community/new_post.html
View File

@@ -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"]');