frontend icon indicating copy to clipboard operation
frontend copied to clipboard

Fix image upload by replacing Imgur with direct backend upload

Open Copilot opened this issue 8 months ago • 1 comments

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/upload with multipart form data

General Images

  • Before: Upload to Imgur → Send URL to /images
  • After: Direct upload to /images with multipart form data

Key Changes

  1. Replaced updateFactoryImages to use the new /factories/{id}/images/upload endpoint
  2. Updated uploadImages to upload directly to backend /images endpoint
  3. Removed unused Imgur code (uploadToImgur, uploadExifAndGetToken, Imgur constants)
  4. 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.

Copilot avatar Jun 11 '25 13:06 Copilot