feat: add pet photo upload and management#120
Merged
llinsss merged 7 commits intoDogStark:mainfrom Feb 22, 2026
Merged
Conversation
Add @dnd-kit/core, @dnd-kit/sortable, @dnd-kit/utilities for drag-to-reorder photo gallery, and browser-image-compression for client-side image optimization before upload. Co-authored-by: Cursor <cursoragent@cursor.com>
Add thumbnailUrl, storageKey, thumbnailStorageKey, displayOrder, mimeType, fileSize, width, height, and originalFilename columns to support photo ordering, thumbnail references, and S3 storage key tracking. Co-authored-by: Cursor <cursoragent@cursor.com>
Implement PetPhotosService and PetPhotosController with endpoints for: - POST /pets/:id/photos (multi-file upload with S3 storage) - GET /pets/:id/photos (list ordered photos) - PATCH /pets/:id/photos/:photoId/primary (set primary photo) - PUT /pets/:id/photos/reorder (drag-to-reorder support) - DELETE /pets/:id/photos/:photoId (S3 cleanup + auto-promote primary) Integrates with existing StorageService for S3 uploads and ImageProcessingService for server-side compression and thumbnail generation. Enforces a 10-photo-per-pet limit. Co-authored-by: Cursor <cursoragent@cursor.com>
Create PetPhotos component suite: - PhotoUploader: drag-and-drop multi-file upload with client-side compression via browser-image-compression and staged file previews - PhotoGallery: sortable grid using @dnd-kit for drag-to-reorder - PhotoCard: individual photo card with set-primary and delete actions - PetPhotosManager: orchestrator handling state, API calls, optimistic updates, error handling, and upload progress tracking Add petPhotosAPI client with upload progress callback support. Co-authored-by: Cursor <cursoragent@cursor.com>
Create /pets/[id] dynamic page that displays pet information and embeds the PetPhotosManager component directly in context. Includes pet header with primary photo avatar, details grid, responsive layout, and back navigation. Co-authored-by: Cursor <cursoragent@cursor.com>
… in pets.module.ts
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #64
Description
Related Issues
Closes issue #64
Changes Made
PATCH /pets/:id/photos/:photoId/primary— clears previous primary, sets new one; auto-promotes next photo when primary is deletedPUT /pets/:id/photos/reorder— persistsdisplayOrdercolumn; frontend uses@dnd-kit/sortablefor drag-to-reorder with optimistic updatesbrowser-image-compression(max 2MB, 1920px) before upload. Server-side:sharpviaImageProcessingServicefor further compression + EXIF metadata strippingsharp; stored as separate S3 objects with dedicatedthumbnailUrlandthumbnailStorageKeyStorageService→S3StorageProvider; keys structured asuploads/pets/{petId}/photos/anduploads/pets/{petId}/thumbnails/DELETE /pets/:id/photos/:photoId— removes both original and thumbnail from S3, deletes DB record, re-indexes display orderAPI Endpoints
New Dependencies (frontend)
@dnd-kit/core,@dnd-kit/sortable,@dnd-kit/utilities— drag-to-reorder gallerybrowser-image-compression— client-side image optimizationHow to Test
Screenshots (if applicable)
Checklist