feat(media-hosting): add multi-provider configurable upload with fallback

Add Random/Preferred/None modes, preferred provider selection, and provider-order fallback. Catbox/Imgur/PostImages on Android via WebView; Electron CDP automation for Imgur/PostImages. Hide upload controls on web runtime.

src/hooks/__tests__/use-file-upload.test.ts

@@ -4,7 +4,7 @@ import { createRoot, Root } from 'react-dom/client';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { Capacitor } from '@capacitor/core';
 import FileUploader from '../../plugins/file-uploader';
-import { uploadToCatbox } from '../../lib/utils/catbox-utils';
+import { orchestrateElectronUpload } from '../../lib/media-hosting/upload-orchestrator';
 import { useFileUpload } from '../use-file-upload';
 
 // Enable React's act environment for hook state updates in tests.
@@ -27,9 +27,23 @@ vi.mock('../../lib/utils/catbox-utils', () => ({
   uploadToCatbox: vi.fn(),
 }));
 
-const selectedProviderRef = vi.hoisted(() => ({ value: 'catbox' as string }));
+vi.mock('../../lib/media-hosting/upload-orchestrator', () => ({
+  orchestrateElectronUpload: vi.fn(),
+}));
+
+vi.mock('../../lib/media-hosting/provider-order', () => ({
+  getProviderOrder: vi.fn((opts: { mode: string; preferredProvider: string; runtime: string }) => {
+    if (opts.mode === 'none') return [];
+    if (opts.runtime === 'web') return opts.preferredProvider === 'catbox' ? ['catbox'] : [];
+    return opts.mode === 'preferred' ? [opts.preferredProvider] : ['catbox', 'imgur', 'postimages'];
+  }),
+}));
+
+const uploadModeRef = vi.hoisted(() => ({ value: 'random' as 'random' | 'preferred' | 'none' }));
+const preferredProviderRef = vi.hoisted(() => ({ value: 'catbox' as 'catbox' | 'imgur' | 'postimages' }));
 vi.mock('../../stores/use-media-hosting-store', () => ({
-  default: (selector: (s: { selectedProvider: string }) => unknown) => selector({ selectedProvider: selectedProviderRef.value }),
+  default: (selector: (s: { uploadMode: string; preferredProvider: string }) => unknown) =>
+    selector({ uploadMode: uploadModeRef.value, preferredProvider: preferredProviderRef.value }),
 }));
 
 type HookSnapshot = ReturnType<typeof useFileUpload>;
@@ -73,7 +87,8 @@ const selectFileFromHiddenInput = async (file: File | null) => {
 describe('useFileUpload', () => {
   beforeEach(() => {
     vi.clearAllMocks();
-    selectedProviderRef.value = 'catbox';
+    uploadModeRef.value = 'random';
+    preferredProviderRef.value = 'catbox';
     latestHook = null;
     container = document.createElement('div');
     document.body.append(container);
@@ -93,10 +108,13 @@ describe('useFileUpload', () => {
   });
 
   it('uploads via Android plugin and updates state', async () => {
+    uploadModeRef.value = 'preferred';
+    preferredProviderRef.value = 'catbox';
     vi.mocked(Capacitor.getPlatform).mockReturnValue('android');
     vi.mocked(FileUploader.pickAndUploadMedia).mockResolvedValue({
       url: 'https://files.catbox.moe/android.jpg',
       fileName: 'android.jpg',
+      provider: 'catbox',
     });
 
     const { onUploadComplete, hook } = mountHook();
@@ -111,10 +129,12 @@ describe('useFileUpload', () => {
     expect(hook().isUploading).toBe(false);
   });
 
-  it('uploads via Electron file picker + catbox utility', async () => {
+  it('uploads via Electron file picker + orchestrator', async () => {
+    uploadModeRef.value = 'preferred';
+    preferredProviderRef.value = 'catbox';
     vi.mocked(Capacitor.getPlatform).mockReturnValue('ios');
     window.electronApi = { isElectron: true } as any;
-    vi.mocked(uploadToCatbox).mockResolvedValue('https://files.catbox.moe/electron.png');
+    vi.mocked(orchestrateElectronUpload).mockResolvedValue('https://files.catbox.moe/electron.png');
 
     const selectedFile = new File(['abc'], 'electron.png', { type: 'image/png' });
     const { onUploadComplete, hook } = mountHook();
@@ -128,13 +148,15 @@ describe('useFileUpload', () => {
       await uploadPromise;
     });
 
-    expect(uploadToCatbox).toHaveBeenCalledWith(selectedFile);
+    expect(orchestrateElectronUpload).toHaveBeenCalledWith(selectedFile, ['catbox']);
     expect(onUploadComplete).toHaveBeenCalledWith('https://files.catbox.moe/electron.png', 'electron.png');
     expect(hook().uploadedFileName).toBe('electron.png');
     expect(hook().isUploading).toBe(false);
   });
 
   it('shows web fallback alert and does not upload', async () => {
+    uploadModeRef.value = 'preferred';
+    preferredProviderRef.value = 'catbox';
     vi.mocked(Capacitor.getPlatform).mockReturnValue('web');
     window.electronApi = undefined;
     const { onUploadComplete, hook } = mountHook();
@@ -144,13 +166,15 @@ describe('useFileUpload', () => {
     });
 
     expect(window.alert).toHaveBeenCalledWith('upload_not_supported_web');
-    expect(uploadToCatbox).not.toHaveBeenCalled();
+    expect(orchestrateElectronUpload).not.toHaveBeenCalled();
     expect(FileUploader.pickAndUploadMedia).not.toHaveBeenCalled();
     expect(onUploadComplete).not.toHaveBeenCalled();
     expect(hook().isUploading).toBe(false);
   });
 
   it('silently ignores file selection cancellation', async () => {
+    uploadModeRef.value = 'preferred';
+    preferredProviderRef.value = 'catbox';
     vi.mocked(Capacitor.getPlatform).mockReturnValue('ios');
     window.electronApi = { isElectron: true } as any;
     const { onUploadComplete, hook } = mountHook();
@@ -164,13 +188,15 @@ describe('useFileUpload', () => {
       await uploadPromise;
     });
 
-    expect(uploadToCatbox).not.toHaveBeenCalled();
+    expect(orchestrateElectronUpload).not.toHaveBeenCalled();
     expect(window.alert).not.toHaveBeenCalled();
     expect(onUploadComplete).not.toHaveBeenCalled();
     expect(hook().isUploading).toBe(false);
   });
 
-  it('alerts on upload failure and resets uploading state', async () => {
+  it('alerts on preferred mode upload failure with actionable guidance', async () => {
+    uploadModeRef.value = 'preferred';
+    preferredProviderRef.value = 'catbox';
     vi.mocked(Capacitor.getPlatform).mockReturnValue('android');
     vi.mocked(FileUploader.pickAndUploadMedia).mockRejectedValue(new Error('boom'));
     const { onUploadComplete, hook } = mountHook();
@@ -179,17 +205,18 @@ describe('useFileUpload', () => {
       await hook().handleUpload();
     });
 
-    expect(window.alert).toHaveBeenCalledWith('upload_failed: boom');
+    expect(window.alert).toHaveBeenCalledWith('upload_failed: boom. upload_failed_preferred_guidance');
     expect(onUploadComplete).not.toHaveBeenCalled();
     expect(hook().isUploading).toBe(false);
   });
 
-  it('returns early when selectedProvider is none (no upload, no alert)', async () => {
-    selectedProviderRef.value = 'none';
+  it('returns early when uploadMode is none (no upload, no alert)', async () => {
+    uploadModeRef.value = 'none';
     vi.mocked(Capacitor.getPlatform).mockReturnValue('android');
     vi.mocked(FileUploader.pickAndUploadMedia).mockResolvedValue({
       url: 'https://files.catbox.moe/skip.jpg',
       fileName: 'skip.jpg',
+      provider: 'catbox',
     });
     const { onUploadComplete, hook } = mountHook();
 
@@ -203,18 +230,95 @@ describe('useFileUpload', () => {
     expect(hook().isUploading).toBe(false);
   });
 
-  it('returns early when selectedProvider is unknown (no crash, no upload)', async () => {
-    selectedProviderRef.value = 'unknown-provider';
-    vi.mocked(Capacitor.getPlatform).mockReturnValue('ios');
-    window.electronApi = { isElectron: true } as any;
+  it('shows web unsupported alert when preferred provider not available on web', async () => {
+    uploadModeRef.value = 'preferred';
+    preferredProviderRef.value = 'imgur';
+    vi.mocked(Capacitor.getPlatform).mockReturnValue('web');
     const { onUploadComplete, hook } = mountHook();
 
     await act(async () => {
       await hook().handleUpload();
     });
 
-    expect(uploadToCatbox).not.toHaveBeenCalled();
-    expect(window.alert).not.toHaveBeenCalled();
+    expect(window.alert).toHaveBeenCalledWith('upload_not_supported_web');
+    expect(orchestrateElectronUpload).not.toHaveBeenCalled();
+    expect(onUploadComplete).not.toHaveBeenCalled();
+    expect(hook().isUploading).toBe(false);
+  });
+
+  it('Android call includes provider order payload', async () => {
+    uploadModeRef.value = 'random';
+    preferredProviderRef.value = 'catbox';
+    vi.mocked(Capacitor.getPlatform).mockReturnValue('android');
+    vi.mocked(FileUploader.pickAndUploadMedia).mockResolvedValue({
+      url: 'https://files.catbox.moe/random.jpg',
+      fileName: 'random.jpg',
+      provider: 'catbox',
+    });
+
+    const { onUploadComplete, hook } = mountHook();
+
+    await act(async () => {
+      await hook().handleUpload();
+    });
+
+    expect(FileUploader.pickAndUploadMedia).toHaveBeenCalledWith({
+      providerOrder: expect.any(Array),
+    });
+    const call = vi.mocked(FileUploader.pickAndUploadMedia).mock.calls[0][0];
+    expect(call?.providerOrder).toEqual(expect.arrayContaining(['catbox']));
+    expect(onUploadComplete).toHaveBeenCalledWith('https://files.catbox.moe/random.jpg', 'random.jpg');
+  });
+
+  it('random mode: Electron upload succeeds when orchestrator resolves', async () => {
+    uploadModeRef.value = 'random';
+    preferredProviderRef.value = 'catbox';
+    vi.mocked(Capacitor.getPlatform).mockReturnValue('ios');
+    window.electronApi = { isElectron: true } as any;
+    vi.mocked(orchestrateElectronUpload).mockResolvedValue('https://imgur.com/abc');
+
+    const selectedFile = new File(['xyz'], 'pic.png', { type: 'image/png' });
+    const { onUploadComplete, hook } = mountHook();
+
+    let uploadPromise: Promise<void> | undefined;
+    await act(async () => {
+      uploadPromise = hook().handleUpload();
+    });
+    await selectFileFromHiddenInput(selectedFile);
+    await act(async () => {
+      await uploadPromise;
+    });
+
+    expect(orchestrateElectronUpload).toHaveBeenCalledWith(selectedFile, expect.any(Array));
+    expect(onUploadComplete).toHaveBeenCalledWith('https://imgur.com/abc', 'pic.png');
+    expect(hook().isUploading).toBe(false);
+  });
+
+  it('random mode: all providers fail shows aggregated alert', async () => {
+    uploadModeRef.value = 'random';
+    preferredProviderRef.value = 'catbox';
+    vi.mocked(Capacitor.getPlatform).mockReturnValue('ios');
+    window.electronApi = { isElectron: true } as any;
+    const err = new Error('All providers failed') as Error & { attempts: { provider: string; error: string }[] };
+    err.attempts = [
+      { provider: 'catbox', error: 'timeout' },
+      { provider: 'imgur', error: 'rate limit' },
+    ];
+    vi.mocked(orchestrateElectronUpload).mockRejectedValue(err);
+
+    const selectedFile = new File(['x'], 'fail.png', { type: 'image/png' });
+    const { onUploadComplete, hook } = mountHook();
+
+    let uploadPromise: Promise<void> | undefined;
+    await act(async () => {
+      uploadPromise = hook().handleUpload();
+    });
+    await selectFileFromHiddenInput(selectedFile);
+    await act(async () => {
+      await uploadPromise;
+    });
+
+    expect(window.alert).toHaveBeenCalledWith('upload_failed. upload_failed_all_providers: catbox: timeout; imgur: rate limit');
     expect(onUploadComplete).not.toHaveBeenCalled();
     expect(hook().isUploading).toBe(false);
   });

src/hooks/use-file-upload.ts

@@ -2,14 +2,17 @@ import { useCallback, useState } from 'react';
 import { Capacitor } from '@capacitor/core';
 import { useTranslation } from 'react-i18next';
 import FileUploader from '../plugins/file-uploader';
-import { uploadToCatbox } from '../lib/utils/catbox-utils';
+import { formatAggregatedError, formatPreferredModeError, type ProviderAttempt } from '../lib/media-hosting/error-format';
+import { getProviderOrder } from '../lib/media-hosting/provider-order';
+import { orchestrateElectronUpload } from '../lib/media-hosting/upload-orchestrator';
 import useMediaHostingStore from '../stores/use-media-hosting-store';
 
 const FILE_SELECTION_CANCELLED_ERROR = 'File selection cancelled';
 
-async function uploadByProvider(provider: string, file: File): Promise<string> {
-  if (provider === 'catbox') return uploadToCatbox(file);
-  throw new Error(`Unsupported media provider: ${provider}`);
+function getRuntime(): 'web' | 'electron' | 'android' {
+  if (Capacitor.getPlatform() === 'android') return 'android';
+  if (window.electronApi?.isElectron) return 'electron';
+  return 'web';
 }
 
 export interface UseFileUploadOptions {
@@ -60,24 +63,25 @@ function selectFileViaInput(): Promise<File | null> {
 export function useFileUpload(options: UseFileUploadOptions) {
   const { t } = useTranslation();
   const { onUploadComplete } = options;
-  const selectedProvider = useMediaHostingStore((s) => s.selectedProvider);
+  const uploadMode = useMediaHostingStore((s) => s.uploadMode);
+  const preferredProvider = useMediaHostingStore((s) => s.preferredProvider);
   const [isUploading, setIsUploading] = useState(false);
   const [uploadedFileName, setUploadedFileName] = useState<string | null>(null);
 
   const handleUpload = useCallback(async () => {
-    if (selectedProvider === 'none') return;
-    if (selectedProvider !== 'catbox') return;
+    if (uploadMode === 'none') return;
+
+    const runtime = getRuntime();
+    const order = getProviderOrder({ mode: uploadMode, preferredProvider, runtime });
 
     try {
       setIsUploading(true);
       setUploadedFileName(null);
 
       if (Capacitor.getPlatform() === 'android') {
-        const result = await FileUploader.pickAndUploadMedia();
+        const result = await FileUploader.pickAndUploadMedia({ providerOrder: order });
         if (result.url) {
-          if (result.fileName) {
-            setUploadedFileName(result.fileName);
-          }
+          if (result.fileName) setUploadedFileName(result.fileName);
           onUploadComplete(result.url, result.fileName);
         }
         return;
@@ -89,7 +93,7 @@ export function useFileUpload(options: UseFileUploadOptions) {
           throw new Error(FILE_SELECTION_CANCELLED_ERROR);
         }
 
-        const url = await uploadByProvider(selectedProvider, file);
+        const url = await orchestrateElectronUpload(file, order);
         setUploadedFileName(file.name);
         onUploadComplete(url, file.name);
         return;
@@ -98,13 +102,20 @@ export function useFileUpload(options: UseFileUploadOptions) {
       window.alert(t('upload_not_supported_web'));
     } catch (error) {
       const errorMessage = error instanceof Error ? error.message : String(error);
-      if (errorMessage !== FILE_SELECTION_CANCELLED_ERROR) {
+      if (errorMessage === FILE_SELECTION_CANCELLED_ERROR) return;
+
+      const err = error as Error & { attempts?: ProviderAttempt[] };
+      if (err.attempts && err.attempts.length > 0) {
+        window.alert(formatAggregatedError(err.attempts, t));
+      } else if (uploadMode === 'preferred') {
+        window.alert(formatPreferredModeError(errorMessage, t));
+      } else {
         window.alert(`${t('upload_failed')}: ${errorMessage}`);
       }
     } finally {
       setIsUploading(false);
     }
-  }, [onUploadComplete, t, selectedProvider]);
+  }, [onUploadComplete, t, uploadMode, preferredProvider]);
 
   return {
     isUploading,