feat: add shared cross-platform catbox media upload flow

Added `useFileUpload()` and `uploadToCatbox()` to centralize upload behavior and remove duplicated upload code from `post-form.tsx` and `reply-modal.tsx`. The flow now routes Android to `FileUploader`, Electron to hidden-input + catbox upload, and web to a translated fallback alert with consistent upload UI state.
2026-08-03 07:41:04 +02:00 · 2026-02-17 16:44:16 +08:00
parent 9c558d21c1
commit dbbc83d369
42 changed files with 545 additions and 118 deletions
@@ -0,0 +1,180 @@
+import * as React from 'react';
+import { createElement } from 'react';
+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 { useFileUpload } from '../use-file-upload';
+
+// Enable React's act environment for hook state updates in tests.
+(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+const act = (React as any).act as (callback: () => void | Promise<void>) => void | Promise<void>;
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+vi.mock('@capacitor/core', () => ({
+  Capacitor: { getPlatform: vi.fn(() => 'web') },
+}));
+
+vi.mock('../../plugins/file-uploader', () => ({
+  default: { pickAndUploadMedia: vi.fn() },
+}));
+
+vi.mock('../../lib/utils/catbox-utils', () => ({
+  uploadToCatbox: vi.fn(),
+}));
+
+type HookSnapshot = ReturnType<typeof useFileUpload>;
+
+let latestHook: HookSnapshot | null = null;
+let root: Root;
+let container: HTMLDivElement;
+
+const HookHarness = ({ onUploadComplete }: { onUploadComplete: (url: string, fileName: string) => void }) => {
+  latestHook = useFileUpload({ onUploadComplete });
+  return null;
+};
+
+const getHook = (): HookSnapshot => {
+  if (!latestHook) {
+    throw new Error('Hook is not mounted');
+  }
+  return latestHook;
+};
+
+const mountHook = (onUploadComplete = vi.fn()) => {
+  act(() => {
+    root.render(createElement(HookHarness, { onUploadComplete }));
+  });
+  return { onUploadComplete, hook: getHook };
+};
+
+const selectFileFromHiddenInput = async (file: File | null) => {
+  const picker = document.querySelector('input[type="file"]') as HTMLInputElement | null;
+  expect(picker).not.toBeNull();
+  Object.defineProperty(picker as HTMLInputElement, 'files', {
+    configurable: true,
+    value: file ? [file] : [],
+  });
+
+  await act(async () => {
+    picker?.dispatchEvent(new Event('change'));
+  });
+};
+
+describe('useFileUpload', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    latestHook = null;
+    container = document.createElement('div');
+    document.body.append(container);
+    root = createRoot(container);
+
+    vi.mocked(Capacitor.getPlatform).mockReturnValue('web');
+    window.electronApi = undefined;
+    vi.spyOn(window, 'alert').mockImplementation(() => undefined);
+  });
+
+  afterEach(() => {
+    act(() => {
+      root.unmount();
+    });
+    container.remove();
+    vi.restoreAllMocks();
+  });
+
+  it('uploads via Android plugin and updates state', async () => {
+    vi.mocked(Capacitor.getPlatform).mockReturnValue('android');
+    vi.mocked(FileUploader.pickAndUploadMedia).mockResolvedValue({
+      url: 'https://files.catbox.moe/android.jpg',
+      fileName: 'android.jpg',
+    });
+
+    const { onUploadComplete, hook } = mountHook();
+
+    await act(async () => {
+      await hook().handleUpload();
+    });
+
+    expect(FileUploader.pickAndUploadMedia).toHaveBeenCalledOnce();
+    expect(onUploadComplete).toHaveBeenCalledWith('https://files.catbox.moe/android.jpg', 'android.jpg');
+    expect(hook().uploadedFileName).toBe('android.jpg');
+    expect(hook().isUploading).toBe(false);
+  });
+
+  it('uploads via Electron file picker + catbox utility', async () => {
+    vi.mocked(Capacitor.getPlatform).mockReturnValue('ios');
+    window.electronApi = { isElectron: true } as any;
+    vi.mocked(uploadToCatbox).mockResolvedValue('https://files.catbox.moe/electron.png');
+
+    const selectedFile = new File(['abc'], 'electron.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(uploadToCatbox).toHaveBeenCalledWith(selectedFile);
+    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 () => {
+    vi.mocked(Capacitor.getPlatform).mockReturnValue('web');
+    window.electronApi = undefined;
+    const { onUploadComplete, hook } = mountHook();
+
+    await act(async () => {
+      await hook().handleUpload();
+    });
+
+    expect(window.alert).toHaveBeenCalledWith('upload_not_supported_web');
+    expect(uploadToCatbox).not.toHaveBeenCalled();
+    expect(FileUploader.pickAndUploadMedia).not.toHaveBeenCalled();
+    expect(onUploadComplete).not.toHaveBeenCalled();
+    expect(hook().isUploading).toBe(false);
+  });
+
+  it('silently ignores file selection cancellation', async () => {
+    vi.mocked(Capacitor.getPlatform).mockReturnValue('ios');
+    window.electronApi = { isElectron: true } as any;
+    const { onUploadComplete, hook } = mountHook();
+
+    let uploadPromise: Promise<void> | undefined;
+    await act(async () => {
+      uploadPromise = hook().handleUpload();
+    });
+    await selectFileFromHiddenInput(null);
+    await act(async () => {
+      await uploadPromise;
+    });
+
+    expect(uploadToCatbox).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 () => {
+    vi.mocked(Capacitor.getPlatform).mockReturnValue('android');
+    vi.mocked(FileUploader.pickAndUploadMedia).mockRejectedValue(new Error('boom'));
+    const { onUploadComplete, hook } = mountHook();
+
+    await act(async () => {
+      await hook().handleUpload();
+    });
+
+    expect(window.alert).toHaveBeenCalledWith('upload_failed: boom');
+    expect(onUploadComplete).not.toHaveBeenCalled();
+    expect(hook().isUploading).toBe(false);
+  });
+});
@@ -0,0 +1,104 @@
+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';
+
+const FILE_SELECTION_CANCELLED_ERROR = 'File selection cancelled';
+
+export interface UseFileUploadOptions {
+  onUploadComplete: (url: string, fileName: string) => void;
+}
+
+function selectFileViaInput(): Promise<File | null> {
+  return new Promise((resolve) => {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = 'image/jpeg,image/png,video/mp4,video/webm';
+    input.style.display = 'none';
+
+    const cleanup = () => {
+      input.remove();
+      window.removeEventListener('focus', onFocus);
+    };
+
+    const onFocus = () => {
+      window.removeEventListener('focus', onFocus);
+      setTimeout(() => {
+        if (input.files && input.files.length > 0) {
+          return;
+        }
+        cleanup();
+        resolve(null);
+      }, 100);
+    };
+
+    input.addEventListener('change', () => {
+      window.removeEventListener('focus', onFocus);
+      if (input.files && input.files.length > 0) {
+        const file = input.files[0];
+        cleanup();
+        resolve(file);
+      } else {
+        cleanup();
+        resolve(null);
+      }
+    });
+
+    window.addEventListener('focus', onFocus);
+    document.body.appendChild(input);
+    input.click();
+  });
+}
+
+export function useFileUpload(options: UseFileUploadOptions) {
+  const { t } = useTranslation();
+  const { onUploadComplete } = options;
+  const [isUploading, setIsUploading] = useState(false);
+  const [uploadedFileName, setUploadedFileName] = useState<string | null>(null);
+
+  const handleUpload = useCallback(async () => {
+    try {
+      setIsUploading(true);
+      setUploadedFileName(null);
+
+      if (Capacitor.getPlatform() === 'android') {
+        const result = await FileUploader.pickAndUploadMedia();
+        if (result.url) {
+          if (result.fileName) {
+            setUploadedFileName(result.fileName);
+          }
+          onUploadComplete(result.url, result.fileName);
+        }
+        return;
+      }
+
+      if (window.electronApi?.isElectron) {
+        const file = await selectFileViaInput();
+        if (!file) {
+          throw new Error(FILE_SELECTION_CANCELLED_ERROR);
+        }
+
+        const url = await uploadToCatbox(file);
+        setUploadedFileName(file.name);
+        onUploadComplete(url, file.name);
+        return;
+      }
+
+      window.alert(t('upload_not_supported_web'));
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : String(error);
+      if (errorMessage !== FILE_SELECTION_CANCELLED_ERROR) {
+        window.alert(`${t('upload_failed')}: ${errorMessage}`);
+      }
+    } finally {
+      setIsUploading(false);
+    }
+  }, [onUploadComplete, t]);
+
+  return {
+    isUploading,
+    uploadedFileName,
+    handleUpload,
+  };
+}