feat(admin): add content image upload service and hook #283
Conversation
Add core business logic for content image uploads:
Service Layer (lib/services/content-image-upload-service.ts):
- validateImageFile(): Validate file type (JPEG, PNG, WebP, GIF) and size (10MB max)
- generateContentImagePath(): Generate unique file paths (user-{userId}/{timestamp}-{uuid}.ext)
- uploadContentImage(): Upload images to content-images bucket
- deleteContentImage(): Delete images from storage
- listUserContentImages(): List user's uploaded images
- extractFilePathFromUrl(): Extract file path from Supabase URLs
Hook Layer (lib/hooks/use-content-image-upload.ts):
- useContentImageUpload(): React hook for state management
- State management: loading, error, progress tracking
- Operations: uploadImage, deleteImage, validateFile, resetState
- Type-safe interfaces for state and results
Technical Details:
- Bucket: content-images (created in PR ifLabX#278)
- Max file size: 10MB
- Supported formats: JPEG, JPG, PNG, WebP, GIF
- Path structure: user-{userId}/{timestamp}-{uuid}.{ext}
- Cache control: 3600s
- Follows existing pattern from use-avatar-upload.ts
Related to ifLabX#250
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
|
@pixelsama is attempting to deploy a commit to the zhang's projects Team on Vercel. A member of the Team first needs to authorize it. |
dosubot
bot
added
the
size:L
Summary of ChangesHello @pixelsama, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request establishes the foundational service layer and a corresponding React hook for managing content image uploads. It builds upon existing storage infrastructure to provide robust image validation, seamless uploading, deletion, and state management. This new functionality offers reusable and type-safe APIs, paving the way for future UI integrations such as image upload dialogs and content editor enhancements. Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
dosubot
bot
added
area:api
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a service and a hook for handling content image uploads, which is a great addition. The code is well-structured and covers validation, upload, and deletion. I've identified a few areas for improvement to enhance robustness and maintainability. My main suggestions are to make file extension generation more reliable by using MIME types, remove redundant validation logic from the hook, and simplify the hook's state management to prevent potential inconsistencies. Overall, this is a solid implementation.
…eration - Remove redundant validation in useContentImageUpload hook (service layer handles it) - Add MIME type to file extension mapping for reliable extension extraction - Update generateContentImagePath to accept MIME type parameter - Keep validateFile export for UI-level validation needs Addresses code review feedback from PR ifLabX#283
- Create ImageUploadDialog with file picker and drag-drop support - Add upload progress indicator and image preview - Integrate use-content-image-upload hook from PR ifLabX#283 - Add i18n translations for upload UI (en-US) Related to ifLabX#250
2 participants
Important
Fixes #<issue number>What & Why
What: Add core business logic and React hook for content image uploads
Why: Building on PR #278's storage infrastructure, this PR implements the service layer that handles image validation, upload, deletion, and state management. This provides reusable and type-safe APIs for the image upload dialog (PR #3) and content editor integration (PR #4).
Related to #250
Pre-PR Checklist
Run these:
pnpm type-checkpnpm format:checkpnpm lintpnpm buildpnpm i18n:check(if applicable - N/A)Type
Screenshots (if UI changes)
N/A - This PR adds backend service layer only (no UI changes)