Fix image upload by replacing Imgur with direct backend upload
The image upload system was failing because Imgur's API is blocked in Taiwan. This PR fixes the issue by implementing direct backend uploads using the new multi-backend image upload service introduced in the backend.
Problem
Users in Taiwan were unable to upload factory photos due to the "上傳錯誤" (upload error) message. The frontend was trying to upload images to Imgur first, then sending the URL to the backend, but Imgur's API is blocked in Taiwan.
Solution
Updated the frontend to use direct backend uploads instead of the Imgur-first approach:
Factory Images (Main Fix)
-
Before: Upload to Imgur → Send URL to
/factories/{id}/images -
After: Direct upload to
/factories/{id}/images/uploadwith multipart form data
General Images
-
Before: Upload to Imgur → Send URL to
/images -
After: Direct upload to
/imageswith multipart form data
Key Changes
-
Replaced
updateFactoryImagesto use the new/factories/{id}/images/uploadendpoint -
Updated
uploadImagesto upload directly to backend/imagesendpoint -
Removed unused Imgur code (
uploadToImgur,uploadExifAndGetToken, Imgur constants) - Preserved all functionality: EXIF data extraction, contact information, error handling
Technical Details
The new implementation:
- Uploads image files directly as multipart form data
- Includes EXIF metadata (GPS coordinates, datetime) in the request
- Passes contact information (nickname, contact) for factory images
- Maintains the same return format for backward compatibility
- Leverages the backend's new multi-backend upload service (Imgur → ImageBB → Cloudflare R2 → Local fallback)
Testing
- ✅ Code compiles successfully
- ✅ Passes linting with no new issues
- ✅ Maintains existing TypeScript interfaces
- ✅ Preserves all existing functionality
This change ensures image uploads work reliably regardless of regional service restrictions while maintaining full backward compatibility.
Fixes #185.
💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.