feat: implement photo upload workflow with processing and error handling

- Add ProcessingPanel component to display processing stages and logs.
- Create UploadFileList component to show upload progress for each file.
- Define constants for workflow steps, file statuses, and processing stages.
- Implement steps for completed, error, processing, review, uploading, and uploading steps.
- Create a Zustand store for managing photo upload state and actions.
- Add utility functions for file handling, error messages, and tag sanitization.
- Update hooks to support new upload options and progress tracking.
- Integrate new components and store into the photo upload module.

Signed-off-by: Innei <tukon479@gmail.com>

Author: Innei

be/apps/core/src/modules/content/photo/assets/photo-asset.service.ts

@@ -49,6 +49,7 @@ export interface UploadAssetInput {
   filename: string
   buffer: Buffer
   contentType?: string
+  directory?: string | null
 }
 
 const VIDEO_EXTENSIONS = new Set(['mov', 'mp4'])
@@ -723,9 +724,11 @@ export class PhotoAssetService {
     const base = path.basename(input.filename, ext).trim()
 
     const timestamp = Date.now().toString()
-    const directory = this.resolveStorageDirectory(storageConfig)
+    const storageDirectory = this.resolveStorageDirectory(storageConfig)
+    const customDirectory = this.normalizeDirectory(input.directory)
+    const combinedDirectory = this.joinStorageSegments(storageDirectory, customDirectory)
     const keySegment = base || timestamp
-    const normalized = directory ? `${directory}/${keySegment}${ext}` : `${keySegment}${ext}`
+    const normalized = combinedDirectory ? `${combinedDirectory}/${keySegment}${ext}` : `${keySegment}${ext}`
     return this.normalizeKeyPath(normalized)
   }
 

be/apps/core/src/modules/content/photo/assets/photo.controller.ts

@@ -38,6 +38,14 @@ export class PhotoController {
   @Post('assets/upload')
   async uploadAssets(@ContextParam() context: Context) {
     const payload = await context.req.parseBody()
+    let directory: string | null = null
+
+    if (typeof payload['directory'] === 'string') {
+      directory = payload['directory']
+    } else if (Array.isArray(payload['directory'])) {
+      const candidate = payload['directory'].find((entry) => typeof entry === 'string')
+      directory = typeof candidate === 'string' ? candidate : null
+    }
 
     const files: File[] = []
     for (const value of Object.values(payload)) {
@@ -63,6 +71,7 @@ export class PhotoController {
         filename: file.name,
         buffer: Buffer.from(await file.arrayBuffer()),
         contentType: file.type || undefined,
+        directory,
       })),
     )
 

be/apps/dashboard/package.json

@@ -54,7 +54,8 @@
     "react-scan": "0.4.3",
     "sonner": "2.0.7",
     "tailwind-merge": "3.4.0",
-    "usehooks-ts": "3.1.1"
+    "usehooks-ts": "3.1.1",
+    "zustand": "5.0.8"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "1.9.0",
@@ -101,4 +102,4 @@
       "eslint --fix"
     ]
   }
-}
+}

be/apps/dashboard/src/modules/photos/api.ts

@@ -20,6 +20,26 @@ type RunPhotoSyncOptions = {
   onEvent?: (event: PhotoSyncProgressEvent) => void
 }
 
+export type PhotoUploadFileProgress = {
+  index: number
+  name: string
+  size: number
+  uploadedBytes: number
+  progress: number
+}
+
+export type PhotoUploadProgressSnapshot = {
+  totalBytes: number
+  uploadedBytes: number
+  files: PhotoUploadFileProgress[]
+}
+
+export type UploadPhotoAssetsOptions = {
+  directory?: string
+  signal?: AbortSignal
+  onProgress?: (snapshot: PhotoUploadProgressSnapshot) => void
+}
+
 export async function runPhotoSync(
   payload: RunPhotoSyncPayload,
   options?: RunPhotoSyncOptions,
@@ -176,8 +196,12 @@ export async function deletePhotoAssets(ids: string[], options?: { deleteFromSto
 
 export async function uploadPhotoAssets(
   files: File[],
-  options?: { directory?: string },
+  options?: UploadPhotoAssetsOptions,
 ): Promise<PhotoAssetListItem[]> {
+  if (files.length === 0) {
+    return []
+  }
+
   const formData = new FormData()
 
   if (options?.directory) {
@@ -188,14 +212,116 @@ export async function uploadPhotoAssets(
     formData.append('files', file)
   }
 
-  const response = await coreApi<{ assets: PhotoAssetListItem[] }>('/photos/assets/upload', {
-    method: 'POST',
-    body: formData,
-  })
+  if (typeof XMLHttpRequest === 'undefined') {
+    const fallbackResponse = await coreApi<{ assets: PhotoAssetListItem[] }>('/photos/assets/upload', {
+      method: 'POST',
+      body: formData,
+    })
+    const fallbackData = camelCaseKeys<{ assets: PhotoAssetListItem[] }>(fallbackResponse)
+    return fallbackData.assets
+  }
+
+  const fileMetadata = files.map((file, index) => ({
+    index,
+    name: file.name,
+    size: file.size,
+  }))
+  const totalBytes = fileMetadata.reduce((sum, file) => sum + file.size, 0)
+
+  const snapshotFromLoaded = (loaded: number): PhotoUploadProgressSnapshot => {
+    let remaining = loaded
+    const filesProgress: PhotoUploadFileProgress[] = fileMetadata.map((meta) => {
+      const uploadedForFile = Math.max(0, Math.min(meta.size, remaining))
+      remaining -= uploadedForFile
+      return {
+        index: meta.index,
+        name: meta.name,
+        size: meta.size,
+        uploadedBytes: uploadedForFile,
+        progress: meta.size === 0 ? 1 : Math.min(1, uploadedForFile / meta.size),
+      }
+    })
+
+    return {
+      totalBytes,
+      uploadedBytes: Math.min(loaded, totalBytes),
+      files: filesProgress,
+    }
+  }
+
+  return await new Promise<PhotoAssetListItem[]>((resolve, reject) => {
+    const xhr = new XMLHttpRequest()
+    xhr.open('POST', `${coreApiBaseURL}/photos/assets/upload`, true)
+    xhr.withCredentials = true
+    xhr.responseType = 'json'
+
+    const handleAbort = () => {
+      xhr.abort()
+    }
+
+    const cleanup = () => {
+      if (options?.signal) {
+        options.signal.removeEventListener('abort', handleAbort)
+      }
+    }
+
+    if (options?.signal) {
+      if (options.signal.aborted) {
+        cleanup()
+        reject(new DOMException('Upload aborted', 'AbortError'))
+        return
+      }
+      options.signal.addEventListener('abort', handleAbort)
+    }
 
-  const data = camelCaseKeys<{ assets: PhotoAssetListItem[] }>(response)
+    xhr.upload.onprogress = (event: ProgressEvent<EventTarget>) => {
+      if (!options?.onProgress) {
+        return
+      }
+      const loaded = event.lengthComputable ? event.loaded : totalBytes
+      options.onProgress(snapshotFromLoaded(loaded))
+    }
 
-  return data.assets
+    xhr.onerror = () => {
+      cleanup()
+      reject(new Error('上传过程中出现网络错误，请稍后再试。'))
+    }
+
+    xhr.onabort = () => {
+      cleanup()
+      reject(new DOMException('Upload aborted', 'AbortError'))
+    }
+
+    xhr.onload = () => {
+      cleanup()
+      if (xhr.status >= 200 && xhr.status < 300) {
+        try {
+          const rawResponse = typeof xhr.response === 'string' ? JSON.parse(xhr.response) : xhr.response
+          const parsed = camelCaseKeys<{ assets: PhotoAssetListItem[] }>(rawResponse)
+          resolve(parsed.assets)
+        } catch (error) {
+          reject(error instanceof Error ? error : new Error('无法解析上传响应'))
+        }
+        return
+      }
+
+      let message = `上传失败：${xhr.status}`
+      const {responseText} = xhr
+      if (responseText) {
+        try {
+          const parsed = JSON.parse(responseText)
+          if (parsed && typeof parsed.message === 'string') {
+            message = parsed.message
+          }
+        } catch {
+          // ignore parse error
+        }
+      }
+      reject(new Error(message))
+    }
+
+    xhr.send(formData)
+  })
 }
 
 export async function getPhotoStorageUrl(storageKey: string): Promise<string> {

be/apps/dashboard/src/modules/photos/components/PhotoPage.tsx

@@ -31,6 +31,7 @@ import type {
 import { DeleteFromStorageOption } from './library/DeleteFromStorageOption'
 import type { DeleteAssetOptions } from './library/PhotoLibraryGrid'
 import { PhotoLibraryGrid } from './library/PhotoLibraryGrid'
+import type { PhotoUploadRequestOptions } from './library/upload.types'
 import { PhotoPageActions } from './PhotoPageActions'
 import { PhotoSyncConflictsPanel } from './sync/PhotoSyncConflictsPanel'
 import { PhotoSyncProgressPanel } from './sync/PhotoSyncProgressPanel'
@@ -106,6 +107,25 @@ export function PhotoPage() {
   const selectedSet = useMemo(() => new Set(selectedIds), [selectedIds])
   const isListLoading = listQuery.isLoading || listQuery.isFetching
   const libraryAssetCount = listQuery.data?.length ?? 0
+  const availableTags = useMemo(() => {
+    if (!listQuery.data || listQuery.data.length === 0) {
+      return []
+    }
+    const tagSet = new Set<string>()
+    for (const asset of listQuery.data) {
+      const tags = asset.manifest?.data?.tags
+      if (!Array.isArray(tags)) {
+        continue
+      }
+      for (const tag of tags) {
+        const normalized = typeof tag === 'string' ? tag.trim() : ''
+        if (normalized) {
+          tagSet.add(normalized)
+        }
+      }
+    }
+    return Array.from(tagSet).sort((a, b) => a.localeCompare(b))
+  }, [listQuery.data])
 
   const handleToggleSelect = (id: string) => {
     setSelectedIds((prev) => {
@@ -277,16 +297,22 @@ export function PhotoPage() {
   )
 
   const handleUploadAssets = useCallback(
-    async (files: FileList) => {
+    async (files: FileList, options?: PhotoUploadRequestOptions) => {
       const fileArray = Array.from(files)
       if (fileArray.length === 0) return
       try {
-        await uploadMutation.mutateAsync(fileArray)
+        await uploadMutation.mutateAsync({
+          files: fileArray,
+          onProgress: options?.onUploadProgress,
+          signal: options?.signal,
+          directory: options?.directory ?? undefined,
+        })
         toast.success(`成功上传 ${fileArray.length} 张图片`)
         void listQuery.refetch()
       } catch (error) {
         const message = getRequestErrorMessage(error, '上传失败，请稍后重试。')
         toast.error('上传失败', { description: message })
+        throw error
       }
     },
     [listQuery, uploadMutation],
@@ -518,6 +544,7 @@ export function PhotoPage() {
         onDeleteSelected={handleDeleteSelected}
         onClearSelection={handleClearSelection}
         onSelectAll={handleSelectAll}
+        availableTags={availableTags}
         onSyncCompleted={handleSyncCompleted}
         onSyncProgress={handleProgressEvent}
         onSyncError={handleSyncError}

be/apps/dashboard/src/modules/photos/components/PhotoPageActions.tsx

@@ -4,6 +4,7 @@ import { MainPageLayout } from '~/components/layouts/MainPageLayout'
 
 import type { PhotoSyncProgressEvent, PhotoSyncResult } from '../types'
 import { PhotoLibraryActionBar } from './library/PhotoLibraryActionBar'
+import type { PhotoUploadRequestOptions } from './library/upload.types'
 import type { PhotoPageTab } from './PhotoPage'
 import { PhotoSyncActions } from './sync/PhotoSyncActions'
 
@@ -13,7 +14,8 @@ type PhotoPageActionsProps = {
   libraryTotalCount: number
   isUploading: boolean
   isDeleting: boolean
-  onUpload: (files: FileList) => void | Promise<void>
+  availableTags: string[]
+  onUpload: (files: FileList, options?: PhotoUploadRequestOptions) => void | Promise<void>
   onDeleteSelected: () => void
   onClearSelection: () => void
   onSelectAll: () => void
@@ -28,6 +30,7 @@ export function PhotoPageActions({
   libraryTotalCount,
   isUploading,
   isDeleting,
+  availableTags,
   onUpload,
   onDeleteSelected,
   onClearSelection,
@@ -56,6 +59,7 @@ export function PhotoPageActions({
           totalCount={libraryTotalCount}
           isUploading={isUploading}
           isDeleting={isDeleting}
+          availableTags={availableTags}
           onUpload={onUpload}
           onDeleteSelected={onDeleteSelected}
           onClearSelection={onClearSelection}

be/apps/dashboard/src/modules/photos/components/library/PhotoLibraryActionBar.tsx

@@ -5,13 +5,15 @@ import type { ChangeEventHandler } from 'react'
 import { useRef } from 'react'
 
 import { PhotoUploadConfirmModal } from './PhotoUploadConfirmModal'
+import type { PhotoUploadRequestOptions } from './upload.types'
 
 type PhotoLibraryActionBarProps = {
   selectionCount: number
   totalCount: number
   isUploading: boolean
   isDeleting: boolean
-  onUpload: (files: FileList) => void | Promise<void>
+  availableTags: string[]
+  onUpload: (files: FileList, options?: PhotoUploadRequestOptions) => void | Promise<void>
   onDeleteSelected: () => void
   onClearSelection: () => void
   onSelectAll: () => void
@@ -22,6 +24,7 @@ export function PhotoLibraryActionBar({
   totalCount,
   isUploading,
   isDeleting,
+  availableTags,
   onUpload,
   onDeleteSelected,
   onClearSelection,
@@ -44,9 +47,8 @@ export function PhotoLibraryActionBar({
 
     Modal.present(PhotoUploadConfirmModal, {
       files: selectedFiles,
-      onConfirm: (confirmedFiles) => {
-        void onUpload(confirmedFiles)
-      },
+      availableTags,
+      onUpload,
     })
 
     if (fileInputRef.current) {
@@ -118,7 +120,7 @@ export function PhotoLibraryActionBar({
           onClick={onSelectAll}
           className="flex items-center gap-1 text-text-secondary hover:text-text"
         >
-          <DynamicIcon name={canSelectAll ? 'square' : 'check-square'} className="h-3.5 w-3.5" />
+          <DynamicIcon name={canSelectAll ? 'square' : 'check-square'} className="size-4" />
           {hasAssets ? (canSelectAll ? '全选' : '已全选') : '全选'}
         </Button>
       </div>