danshtu/cafe-ledger
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

Add receipt image storage with Firebase Storage #12

Open
theoassistant wants to merge 2 commits from feature/receipt-image-storage into master
pull from: feature/receipt-image-storage
merge into: danshtu:master
Conversation 0 Commits 2 Files changed 6 +209 -11
theoassistant commented 2026-03-01 12:46:08 -05:00
Collaborator
Copy link

Implements receipt image storage using Firebase Storage for backup and review purposes.

Features

Upload Options

  • ✅ Auto-upload receipt when using AI scanner
  • ✅ Manual upload option for all expenses (optional)
  • ✅ File validation: max 10MB, images only
  • ✅ Preview before saving

Display

  • ✅ Small thumbnail in expense details dialog (non-intrusive)
  • ✅ Click to view full size in new tab
  • ✅ Hover effect with "Click to view full size" hint

Edit Behavior

  • ✅ Can replace receipt images when editing
  • ✅ Old receipt deleted when uploading new one
  • ✅ Single image per expense (designed for future multi-image support)

Cleanup

  • ✅ Receipts deleted when expense is deleted
  • ✅ Orphaned files prevented through proper cleanup logic

Technical Implementation

Storage Structure

receipts/
  {userId}/
    {expenseId}.{extension}

Files Modified

  1. src/lib/firebase.ts - Added Firebase Storage initialization, upload/delete helpers
  2. src/components/ReceiptScanner.tsx - Preserve File object for upload
  3. src/components/ExpenseForm.tsx - Receipt upload UI with preview and error handling
  4. src/components/ExpenseList.tsx - Thumbnail display in expense details
  5. storage.rules - Firebase Storage security rules (new file)

Security

  • Per-user access control via Storage Rules
  • Authenticated users can only read/write/delete their own receipts
  • File size limit: 10MB (enforced client and server-side)
  • Image type validation (MIME type check)

Error Handling

  • Receipt upload failure doesn't block expense creation
  • Graceful fallback: saves expense without image if upload fails
  • User-friendly error messages

Testing Checklist

Before merging, verify:

  • AI scanner auto-uploads receipt
  • Manual upload works for new expenses
  • Receipt thumbnail displays in details dialog
  • Click thumbnail opens full image in new tab
  • Can replace receipt when editing
  • Old receipt deleted when replaced
  • Receipt deleted when expense deleted
  • File size validation works (reject >10MB)
  • File type validation works (reject non-images)
  • Backward compatible with existing expenses (no receipt)
  • Deploy storage rules: firebase deploy --only storage

Deployment Notes

⚠️ Important: After merging, deploy Firebase Storage security rules:

firebase deploy --only storage

Verify in Firebase Console:

  • Storage > Rules tab shows the new rules
  • Test upload/download works correctly
Implements receipt image storage using Firebase Storage for backup and review purposes. ## Features ### Upload Options - ✅ Auto-upload receipt when using AI scanner - ✅ Manual upload option for all expenses (optional) - ✅ File validation: max 10MB, images only - ✅ Preview before saving ### Display - ✅ Small thumbnail in expense details dialog (non-intrusive) - ✅ Click to view full size in new tab - ✅ Hover effect with "Click to view full size" hint ### Edit Behavior - ✅ Can replace receipt images when editing - ✅ Old receipt deleted when uploading new one - ✅ Single image per expense (designed for future multi-image support) ### Cleanup - ✅ Receipts deleted when expense is deleted - ✅ Orphaned files prevented through proper cleanup logic ## Technical Implementation ### Storage Structure ``` receipts/ {userId}/ {expenseId}.{extension} ``` ### Files Modified 1. **src/lib/firebase.ts** - Added Firebase Storage initialization, upload/delete helpers 2. **src/components/ReceiptScanner.tsx** - Preserve File object for upload 3. **src/components/ExpenseForm.tsx** - Receipt upload UI with preview and error handling 4. **src/components/ExpenseList.tsx** - Thumbnail display in expense details 5. **storage.rules** - Firebase Storage security rules (new file) ### Security - Per-user access control via Storage Rules - Authenticated users can only read/write/delete their own receipts - File size limit: 10MB (enforced client and server-side) - Image type validation (MIME type check) ### Error Handling - Receipt upload failure doesn't block expense creation - Graceful fallback: saves expense without image if upload fails - User-friendly error messages ## Testing Checklist Before merging, verify: - [ ] AI scanner auto-uploads receipt - [ ] Manual upload works for new expenses - [ ] Receipt thumbnail displays in details dialog - [ ] Click thumbnail opens full image in new tab - [ ] Can replace receipt when editing - [ ] Old receipt deleted when replaced - [ ] Receipt deleted when expense deleted - [ ] File size validation works (reject >10MB) - [ ] File type validation works (reject non-images) - [ ] Backward compatible with existing expenses (no receipt) - [ ] Deploy storage rules: `firebase deploy --only storage` ## Deployment Notes ⚠️ **Important**: After merging, deploy Firebase Storage security rules: ```bash firebase deploy --only storage ``` Verify in Firebase Console: - Storage > Rules tab shows the new rules - Test upload/download works correctly
Implements the ability to store receipt images with expenses using Firebase Storage.

Features:
- Firebase Storage initialized with upload/delete helpers
- ReceiptScanner now preserves File object for upload
- ExpenseForm has optional receipt upload UI with preview
- Auto-upload receipt when using AI scanner
- Manual upload option for all expenses
- Receipt thumbnails display in expense details dialog
- Click thumbnail to view full size in new tab
- Old receipts deleted when replaced during edit
- Receipts deleted when expense is deleted
- Firebase Storage security rules for per-user access

Storage structure: receipts/{userId}/{expenseId}.{ext}

Validation:
- Max file size: 10MB
- Image files only
- Authenticated users can only access their own receipts

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
The scanned receipt data wasn't being populated into the form fields. Two issues:

1. AddExpense.tsx wasn't passing the receiptFile through to scannedData
2. ExpenseForm.tsx only populated fields when mode === 'edit', not for create mode with initial data

Now form properly populates from scanned receipt data for both the form fields and the receipt image preview.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This pull request has changes conflicting with the target branch.
  • src/components/ReceiptScanner.tsx
View command line instructions

Checkout

From your project repository, check out a new branch and test the changes.
git fetch -u origin feature/receipt-image-storage:feature/receipt-image-storage
git switch feature/receipt-image-storage
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
danshtu/cafe-ledger!12
No description provided.