feat: support backend image upload provider

.env.example

@@ -1,2 +1,8 @@
 VUE_APP_BASE_URL=https://staging.disfactory.tw/api
 VUE_APP_IMGUR_FALLBACK_URL=https://api.disfactory.tw/imgur
+
+# Image upload configuration
+# Set to 'backend' to use the backend filesystem upload, or 'imgur' to use Imgur (default)
+VUE_APP_IMAGE_UPLOAD_PROVIDER=imgur
+# Backend upload URL (only used when VUE_APP_IMAGE_UPLOAD_PROVIDER=backend)
+VUE_APP_IMAGE_UPLOAD_URL=https://api.disfactory.tw/api/upload

.github/workflows/ci.yml

@@ -80,6 +80,8 @@ jobs:
           npm ci
           echo "VUE_APP_BASE_URL=https://staging.disfactory.tw/api" > .env
           echo "VUE_APP_IMGUR_FALLBACK_URL=https://staging.disfactory.tw/imgur" >> .env
+          echo "VUE_APP_IMAGE_UPLOAD_PROVIDER=backend" >> .env
+          echo "VUE_APP_IMAGE_UPLOAD_URL=https://staging.disfactory.tw/api/upload" >> .env
           npm run build
       - name: Deploy to GitHub Pages
         uses: JamesIves/github-pages-deploy-action@v4
@@ -107,6 +109,8 @@ jobs:
           npm ci
           echo "VUE_APP_BASE_URL=https://api.disfactory.tw/api" > .env.production
           echo "VUE_APP_IMGUR_FALLBACK_URL=https://api.disfactory.tw/imgur" >> .env.production
+          echo "VUE_APP_IMAGE_UPLOAD_PROVIDER=backend" >> .env.production
+          echo "VUE_APP_IMAGE_UPLOAD_URL=https://api.disfactory.tw/api/upload" >> .env.production
           npm run build
           echo "disfactory.tw" > dist/CNAME
       - name: Deploy to GitHub Pages

src/App.vue

@@ -133,7 +133,6 @@
     </v-main>
 
   <factory-detail-page />
-  <maintenance-modal :open="maintenanceModalOpen" :dismiss="dismissMaintenanceModal" />
   </v-app>
 </template>
 
@@ -160,8 +159,6 @@ import { useModalState } from './lib/hooks'
 import { useAppState } from './lib/appState'
 import { useAlertState } from './lib/useAlert'
 
-import MaintenanceModal from './components/MaintenanceModal.vue'
-
 export default defineComponent({
   name: 'App',
   components: {
@@ -176,8 +173,7 @@ export default defineComponent({
     ApiConfigModal,
     CreateFactorySteps,
     UpdateFactorySteps,
-    FactoryDetailPage,
-    MaintenanceModal
+    FactoryDetailPage
   },
   setup () {
     const [modalState, modalActions] = useModalState()
@@ -191,21 +187,14 @@ export default defineComponent({
 
     const drawer = ref(false)
 
-    // Show maintenance modal on app start, allow closing
-    const maintenanceModalOpen = ref(true)
-    const dismissMaintenanceModal = () => {
-      maintenanceModalOpen.value = false
-    }
     return {
       appState,
       alertState,
       alertActions,
       appActions,
       modalState,
       modalActions,
-      drawer,
-      maintenanceModalOpen,
-      dismissMaintenanceModal
+      drawer
     }
   }
 })

src/api/index.ts

@@ -12,7 +12,7 @@
 
 // Update base URL whenever currentBaseURL changes
 const updateBaseURL = () => {
   instance.defaults.baseURL = currentBaseURL.value
 }
 
 // Set initial base URL and watch for changes
@@ -28,10 +28,15 @@
   src: string // used for preview images
 }[]
 
+// Image upload provider configuration
+type ImageUploadProvider = 'imgur' | 'backend'
+const IMAGE_UPLOAD_PROVIDER: ImageUploadProvider = (process.env.VUE_APP_IMAGE_UPLOAD_PROVIDER as ImageUploadProvider) || 'imgur'
+const IMAGE_UPLOAD_URL = process.env.VUE_APP_IMAGE_UPLOAD_URL || ''
+
 export async function getFactories (range: number, lng: number, lat: number): Promise<FactoriesResponse> {
   try {
     const { data } = await instance.get(`/factories?range=${range}&lng=${lng}&lat=${lat}`)
     return data
   } catch (err) {
     console.error(err)
     throw new TypeError('Get factory failed')
@@ -40,8 +45,8 @@
 
 export async function getFactory (factoryId: string): Promise<FactoryData> {
   try {
     const { data } = await instance.get(`/factories/${factoryId}`)
     return data
   } catch (err) {
     console.error(err)
     throw new TypeError('Get factory failed')
@@ -50,11 +55,17 @@
 
 const IMGUR_CLIENT_ID = '39048813b021935'
 
-async function uploadToImgur (file: File) {
+type ImageUploadResult = {
+  link: string,
+  deletehash: string,
+  file: File
+}
+
+async function uploadToImgur (file: File): Promise<ImageUploadResult> {
   const formData = new FormData()
   formData.append('image', file)
 
   const { data } = await axios({
     method: 'POST',
     url: 'https://api.imgur.com/3/image',
     data: formData,
@@ -65,12 +76,48 @@
   })
 
   return {
     link: data.data.link as string,
     deletehash: data.data.deletehash as string,
     file
   }
 }
 
+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)
+}
+
 const convertTurple2Number = (input: [number, number, number]) => input[0] + (input[1] / 60) + (input[2] / 3600)
 
 type ExifData = { DateTimeOriginal?: string, GPSLatitude?: [number, number, number], GPSLongitude?: [number, number, number] }
@@ -120,13 +167,13 @@
 
 export async function uploadImages (files: FileList): Promise<UploadedImages> {
   return Promise.all(
-    Array.from(files).map((file) => uploadToImgur(file).then((el) => uploadExifAndGetToken(el)))
+    Array.from(files).map((file) => uploadImage(file).then((el) => uploadExifAndGetToken(el)))
   )
 }
 
 export async function updateFactoryImages (factoryId: string, files: FileList, { nickname, contact }: { nickname?: string, contact?: string }) {
   return Promise.all(
-    Array.from(files).map((file) => uploadToImgur(file).then((el) => (async () => {
+    Array.from(files).map((file) => uploadImage(file).then((el) => (async () => {
       const exifData = await readImageExif(el.file)
       const { data }: { data: FactoryImage } = await instance.post(`/factories/${factoryId}/images`, { url: el.link, ...exifData, nickname, contact, deletehash: el.deletehash })
       data.image_path = el.link

src/components/ImageUploadForm.vue

@@ -1,8 +1,5 @@
 <template>
   <div class="image-upload-form w-100">
-    <v-alert type="warning" prominent color="warning" class="mb-4">
-      目前上傳圖片功能受限，暫時停止回報功能，敬請見諒！
-    </v-alert>
     <v-container style="max-width: 630px; position: relative;" class="pt-3 pt-md-12 pb-md-8">
       <h2 class="mb-4 secondary--text">上傳工廠照片</h2>