Fix image uploads #12
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR implements comprehensive image upload functionality for the application by reorganizing file paths, enhancing session management with PostgreSQL storage, and adding image preview capabilities.
- Migrates session storage from memory to PostgreSQL using connect-pg-simple
- Reorganizes upload directory structure to separate driver and circuit images
- Adds client-side image preview functionality with validation and immediate feedback
Reviewed Changes
Copilot reviewed 13 out of 14 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/utils/appConfig.js | Configures PostgreSQL session store with connection pooling and error handling |
| src/routes/raceSettings.js | Updates circuit image path to use new directory structure |
| src/routes/leaderboard.js | Updates profile picture path to use new directory structure |
| src/middleware/upload.js | Implements UUID-based filename generation and organized upload directories |
| public/styles.css | Adds styling for image preview containers with animations |
| public/js/modals.js | Integrates preview clearing functionality into modal lifecycle |
| public/js/main.js | Adds image preview initialization and new event handlers |
| public/js/imagePreview.js | New module providing comprehensive image preview functionality |
| public/js/forms.js | Enhanced form handling with immediate profile picture updates |
| public/index.html | Adds preview containers and updates form structure |
| package.json | Adds connect-pg-simple dependency for PostgreSQL sessions |
| docker-compose.yml | Updates volume mounting strategy for uploads |
| Dockerfile | Creates organized directory structure for uploads |
|
|
||
| export function triggerCircuitImageUpload() { | ||
| document.getElementById('circuitImageInput').click() | ||
| document.getElementById('circuitImageUpload').click() |
There was a problem hiding this comment.
The ID 'circuitImageUpload' doesn't match the ID referenced in triggerFileUpload() function which uses 'profilePictureInput'. This inconsistency could cause the function to fail silently if the element doesn't exist.
| document.getElementById('circuitImageUpload').click() | |
| document.getElementById('profilePictureInput').click() |
| */ | ||
| export function initializeImagePreviews() { | ||
| // Setup preview for add driver modal | ||
| setupImagePreview('profilePictureAdd', 'addPicturePreviewContainer', 'addPicturePreview') |
There was a problem hiding this comment.
The file input ID 'profilePictureAdd' doesn't match the actual ID 'profilePictureAdd' in the HTML, but the HTML shows 'profilePictureAdd' while other references in the codebase use 'profilePictureInput'. This mismatch could prevent the preview functionality from working for the add driver modal.
| setupImagePreview('profilePictureAdd', 'addPicturePreviewContainer', 'addPicturePreview') | |
| setupImagePreview('profilePictureInput', 'addPicturePreviewContainer', 'addPicturePreview') |
| pool: pgPool, | ||
| tableName: 'session', // Table name for storing sessions | ||
| createTableIfMissing: true, // Auto-create table if it doesn't exist | ||
| pruneSessionInterval: 60 * 15, // Prune expired sessions every 15 minutes |
There was a problem hiding this comment.
[nitpick] The magic number '60 * 15' should be extracted to a named constant like 'SESSION_PRUNE_INTERVAL_SECONDS' to improve code readability and maintainability.
| pruneSessionInterval: 60 * 15, // Prune expired sessions every 15 minutes | |
| pruneSessionInterval: SESSION_PRUNE_INTERVAL_SECONDS, // Prune expired sessions every 15 minutes |
No description provided.