feat: support backend image upload provider#198
Conversation
✅ Deploy Preview for disfactory-frontend ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Pull request overview
This pull request adds support for backend-based image uploads as an alternative to the existing Imgur upload provider. The change allows the application to be configured to upload images to a backend server instead of relying solely on Imgur.
Key Changes:
- Added configurable image upload provider with support for 'imgur' (default) and 'backend' options
- Implemented
uploadToBackendfunction that uploads images to a configurable backend URL - Refactored image upload logic to use a unified
uploadImagefunction that routes to the appropriate provider - Added environment variables for configuration:
VUE_APP_IMAGE_UPLOAD_PROVIDERandVUE_APP_IMAGE_UPLOAD_URL
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| src/api/index.ts | Adds image upload provider abstraction with backend upload support, including new types, configuration constants, upload functions, and integration with existing image upload workflows |
| .env.example | Documents new environment variables for configuring the image upload provider and backend upload URL |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
|
||
| // Image upload provider configuration | ||
| type ImageUploadProvider = 'imgur' | 'backend' | ||
| const IMAGE_UPLOAD_PROVIDER: ImageUploadProvider = (process.env.VUE_APP_IMAGE_UPLOAD_PROVIDER as ImageUploadProvider) || 'imgur' |
There was a problem hiding this comment.
The environment variable VUE_APP_IMAGE_UPLOAD_PROVIDER is cast to ImageUploadProvider type without validation. If an invalid value (e.g., 'typo' or 'cloudinary') is provided, it will be assigned to IMAGE_UPLOAD_PROVIDER and only fall back to 'imgur' if the value is falsy. This could lead to unexpected behavior in the uploadImage function.
Consider adding validation:
const rawProvider = process.env.VUE_APP_IMAGE_UPLOAD_PROVIDER
const IMAGE_UPLOAD_PROVIDER: ImageUploadProvider =
(rawProvider === 'imgur' || rawProvider === 'backend') ? rawProvider : 'imgur'This ensures only valid provider values are used.
| const IMAGE_UPLOAD_PROVIDER: ImageUploadProvider = (process.env.VUE_APP_IMAGE_UPLOAD_PROVIDER as ImageUploadProvider) || 'imgur' | |
| const rawProvider = process.env.VUE_APP_IMAGE_UPLOAD_PROVIDER | |
| const IMAGE_UPLOAD_PROVIDER: ImageUploadProvider = (rawProvider === 'imgur' || rawProvider === 'backend') ? rawProvider : 'imgur' |
| async function uploadToBackend (file: File): Promise<ImageUploadResult> { | ||
| const formData = new FormData() | ||
| formData.append('image', file) | ||
|
|
||
| // Use the configured backend upload URL, or construct from current base URL | ||
| const uploadUrl = IMAGE_UPLOAD_URL || `${currentBaseURL.value}/upload` | ||
|
|
||
| const { data } = await axios({ | ||
| method: 'POST', | ||
| url: uploadUrl, | ||
| data: formData, | ||
| headers: { | ||
| 'Content-Type': 'multipart/form-data' | ||
| } | ||
| }) | ||
|
|
||
| // Backend returns Imgur-compatible response format | ||
| if (!data.success) { | ||
| throw new Error(data.data?.error || 'Image upload failed') | ||
| } | ||
|
|
||
| return { | ||
| link: data.data.link as string, | ||
| deletehash: data.data.deletehash as string, | ||
| file | ||
| } | ||
| } | ||
|
|
||
| // Upload image using configured provider | ||
| async function uploadImage (file: File): Promise<ImageUploadResult> { | ||
| if (IMAGE_UPLOAD_PROVIDER === 'backend') { | ||
| return uploadToBackend(file) | ||
| } | ||
| return uploadToImgur(file) | ||
| } |
There was a problem hiding this comment.
The new upload functionality (uploadToBackend, uploadImage) lacks test coverage. Since the repository uses Jest for testing (as evidenced by src/components/__tests__/TutorialModal.spec.ts), consider adding tests to verify:
- The
uploadImagefunction correctly routes to the appropriate provider based onIMAGE_UPLOAD_PROVIDER - The
uploadToBackendfunction handles successful and failed uploads properly - The fallback behavior when
IMAGE_UPLOAD_URLis not provided
This would ensure the new feature works as expected and prevent regressions.
No description provided.