feat: add recipe editing, image upload management, and UI improvements #3

Merged
pkartch merged 1 commits from feature/ingredient-scaling into main 2025-10-30 06:17:16 +00:00
Owner

Added comprehensive recipe editing functionality with improved image handling
and better UX for large file uploads.

Features:

  • Recipe editing: Full CRUD support for recipes with edit page
  • Image management: Upload, replace, and delete recipe images
  • Upload feedback: Processing and uploading states for better UX
  • File size increase: Raised limit from 10MB to 20MB for images
  • Nginx configuration: Added client_max_body_size for large uploads

Changes:

  • Created EditRecipe.tsx page for editing existing recipes
  • Created NewRecipe.tsx page wrapper for recipe creation
  • Created RecipeForm.tsx comprehensive form component with:
    • Simple and multi-section recipe modes
    • Image upload with confirmation dialogs
    • Processing state feedback during file handling
    • Smaller, button-style upload controls
  • Updated recipes.routes.ts:
    • Increased multer fileSize limit to 20MB
    • Added file validation for image types
    • Image upload now updates Recipe.imageUrl field
    • Added DELETE /recipes/:id/image endpoint
    • Automatic cleanup of old images when uploading new ones
  • Updated nginx.conf: Added client_max_body_size 20M for API proxy
  • Updated App.css: Improved upload button styling (smaller, more compact)
  • Updated RecipeForm.tsx: Better file processing feedback with setTimeout
  • Updated help text to reflect 20MB limit and WEBP support

Technical Details:

  • Fixed static file serving path in index.ts
  • Added detailed logging for upload debugging
  • Improved TypeScript type safety in upload handlers
  • Better error handling and user feedback

🤖 Generated with Claude Code

Co-Authored-By: Claude noreply@anthropic.com

Added comprehensive recipe editing functionality with improved image handling and better UX for large file uploads. **Features:** - Recipe editing: Full CRUD support for recipes with edit page - Image management: Upload, replace, and delete recipe images - Upload feedback: Processing and uploading states for better UX - File size increase: Raised limit from 10MB to 20MB for images - Nginx configuration: Added client_max_body_size for large uploads **Changes:** - Created EditRecipe.tsx page for editing existing recipes - Created NewRecipe.tsx page wrapper for recipe creation - Created RecipeForm.tsx comprehensive form component with: - Simple and multi-section recipe modes - Image upload with confirmation dialogs - Processing state feedback during file handling - Smaller, button-style upload controls - Updated recipes.routes.ts: - Increased multer fileSize limit to 20MB - Added file validation for image types - Image upload now updates Recipe.imageUrl field - Added DELETE /recipes/:id/image endpoint - Automatic cleanup of old images when uploading new ones - Updated nginx.conf: Added client_max_body_size 20M for API proxy - Updated App.css: Improved upload button styling (smaller, more compact) - Updated RecipeForm.tsx: Better file processing feedback with setTimeout - Updated help text to reflect 20MB limit and WEBP support **Technical Details:** - Fixed static file serving path in index.ts - Added detailed logging for upload debugging - Improved TypeScript type safety in upload handlers - Better error handling and user feedback 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
pkartch added 1 commit 2025-10-30 06:16:33 +00:00
feat: add recipe editing, image upload management, and UI improvements
Some checks failed
CI Pipeline / Test Shared Package (pull_request) Has been cancelled
CI Pipeline / Build All Packages (pull_request) Has been cancelled
CI Pipeline / Generate Coverage Report (pull_request) Has been cancelled
CI Pipeline / Lint Code (pull_request) Has been cancelled
CI Pipeline / Test API Package (pull_request) Has been cancelled
CI Pipeline / Test Web Package (pull_request) Has been cancelled
Docker Build & Deploy / Build Docker Images (pull_request) Has been cancelled
Docker Build & Deploy / Push Docker Images (pull_request) Has been cancelled
Docker Build & Deploy / Deploy to Staging (pull_request) Has been cancelled
Docker Build & Deploy / Deploy to Production (pull_request) Has been cancelled
E2E Tests / End-to-End Tests (pull_request) Has been cancelled
E2E Tests / E2E Tests (Mobile) (pull_request) Has been cancelled
Security Scanning / NPM Audit (pull_request) Has been cancelled
Security Scanning / Dependency License Check (pull_request) Has been cancelled
Security Scanning / Code Quality Scan (pull_request) Has been cancelled
Security Scanning / Docker Image Security (pull_request) Has been cancelled
Security Scanning / Security Summary (pull_request) Has been cancelled
33eadde671
Added comprehensive recipe editing functionality with improved image handling
and better UX for large file uploads.

**Features:**
- Recipe editing: Full CRUD support for recipes with edit page
- Image management: Upload, replace, and delete recipe images
- Upload feedback: Processing and uploading states for better UX
- File size increase: Raised limit from 10MB to 20MB for images
- Nginx configuration: Added client_max_body_size for large uploads

**Changes:**
- Created EditRecipe.tsx page for editing existing recipes
- Created NewRecipe.tsx page wrapper for recipe creation
- Created RecipeForm.tsx comprehensive form component with:
  - Simple and multi-section recipe modes
  - Image upload with confirmation dialogs
  - Processing state feedback during file handling
  - Smaller, button-style upload controls
- Updated recipes.routes.ts:
  - Increased multer fileSize limit to 20MB
  - Added file validation for image types
  - Image upload now updates Recipe.imageUrl field
  - Added DELETE /recipes/:id/image endpoint
  - Automatic cleanup of old images when uploading new ones
- Updated nginx.conf: Added client_max_body_size 20M for API proxy
- Updated App.css: Improved upload button styling (smaller, more compact)
- Updated RecipeForm.tsx: Better file processing feedback with setTimeout
- Updated help text to reflect 20MB limit and WEBP support

**Technical Details:**
- Fixed static file serving path in index.ts
- Added detailed logging for upload debugging
- Improved TypeScript type safety in upload handlers
- Better error handling and user feedback

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
pkartch merged commit 4b30ea433e into main 2025-10-30 06:17:16 +00:00
pkartch deleted branch feature/ingredient-scaling 2025-10-30 06:17:16 +00:00
Sign in to join this conversation.
No Reviewers
No Label
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: pkartch/basil#3