Image Upload System
Overview
This release introduces a complete image upload system, allowing users to embed images directly in their stories. The implementation includes backend storage using Google Cloud Storage, frontend integration with the TipTap editor, and proper security measures to ensure safe file handling.
Backend Changes
- Added new uploads.py handler with endpoints for uploading and retrieving images
- Implemented Google Cloud Storage integration for scalable, reliable image storage
- Added image validation for type (JPEG, PNG, GIF, WebP) and size (max 5MB)
- Created secure file path generation with timestamps and UUIDs
- Added Google service account authentication for GCS
- Added required dependencies: google-cloud-storage and python-multipart
Frontend Changes
- Enhanced RichTextEditor component with image upload capabilities
- Integrated TipTap Image extension for rich content editing
- Added upload progress indicators within the editor
- Created an upload-proxy API endpoint for secure file transfers
- Updated Content Security Policy to allow necessary connections
- Improved environment variable handling for different deployment contexts
- Added support for image preview and insertion at cursor position
API Changes
- New POST /uploads endpoint for authenticated image uploads
- New GET /uploads/{filename} endpoint for retrieving images
- Proxy endpoint for frontend-to-backend image transfers
- Support for multiple file uploads in a single request
Security Enhancements
- Updated Content Security Policy to allow required connections
- Enhanced image validation to prevent malicious file uploads
- Added proper authentication checks for upload operations
- Improved CSP headers for Google authentication compatibility
- Implemented proper MIME type detection and validation
DevOps Changes
- Updated GitHub Actions workflow to use GitHub environment variables
- Added GCS bucket configuration for production deployments
- Added service account configuration for Cloud Run services
- Separated sensitive and non-sensitive environment variables
- Added proper CORS configuration for cross-origin requests
Configuration Updates
- Added support for BACKEND_URL and NEXT_PUBLIC_API_URL environment variables
- Added ENABLE_PROXY_UPLOADS toggle for direct/proxied image access
- Added GCS_BUCKET_NAME configuration for Google Cloud Storage
- Added CSP configuration for Google services and blob/data URIs
- Updated Docker environment variables for development
Technical Details
- Images are stored in Google Cloud Storage with unique paths
- Frontend uses form-data for file uploads with credentials
- Backend creates static file URLs for embedding in content
- Service accounts are used for GCP authentication
- Client-side and server-side validation ensures data integrity
Migration Notes
- New environment variables will need to be set in deployment environments
- A Google Cloud Storage bucket will need to be provisioned
- Service account with appropriate permissions will need to be created
Future Considerations
- Image resizing and optimization
- Upload quota management
- Gallery/media library functionality
- Alternative storage provider options
- Offline image editing capabilities