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/components/post-form/post-form.tsx

@@ -16,6 +16,7 @@ import useIsSubplebbitOffline from '../../hooks/use-is-subplebbit-offline';
 import usePublishPost from '../../hooks/use-publish-post';
 import usePublishReply from '../../hooks/use-publish-reply';
 import { useFileUpload } from '../../hooks/use-file-upload';
+import { getShowUploadControls, isWebRuntime } from '../../lib/media-hosting/show-upload-controls';
 import useMediaHostingStore from '../../stores/use-media-hosting-store';
 import styles from './post-form.module.css';
 import capitalize from 'lodash/capitalize';
@@ -211,8 +212,8 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid:
       }
     },
   });
-  const selectedProvider = useMediaHostingStore((state) => state.selectedProvider);
-  const showUploadControls = selectedProvider !== 'none';
+  const uploadMode = useMediaHostingStore((state) => state.uploadMode);
+  const showUploadControls = getShowUploadControls(uploadMode, isWebRuntime());
 
   const hasInitializedDisplayName = useRef(false);
   useEffect(() => {

src/components/reply-modal/reply-modal.tsx

@@ -9,6 +9,7 @@ import { isValidURL } from '../../lib/utils/url-utils';
 import { isAllView, isSubscriptionsView } from '../../lib/utils/view-utils';
 import useSelectedTextStore from '../../stores/use-selected-text-store';
 import useReplyModalStore from '../../stores/use-reply-modal-store';
+import { getShowUploadControls, isWebRuntime } from '../../lib/media-hosting/show-upload-controls';
 import useMediaHostingStore from '../../stores/use-media-hosting-store';
 import { useDirectoryByAddress } from '../../hooks/use-directories';
 import usePublishReply from '../../hooks/use-publish-reply';
@@ -275,8 +276,8 @@ const ReplyModal = ({ closeModal, showReplyModal, parentCid, parentNumber, threa
       }
     },
   });
-  const selectedProvider = useMediaHostingStore((state) => state.selectedProvider);
-  const showUploadControls = selectedProvider !== 'none';
+  const uploadMode = useMediaHostingStore((state) => state.uploadMode);
+  const showUploadControls = getShowUploadControls(uploadMode, isWebRuntime());
 
   const hasInitializedDisplayName = useRef(false);
   useEffect(() => {

src/components/settings-modal/interface-settings/interface-settings.module.css

@@ -50,3 +50,20 @@
   margin: 2px 0 5px 0;
   padding-left: 19px;
 }
+
+.webUploadWarning {
+  font-size: 0.8em;
+  padding: 5px 0;
+  margin-left: 10px;
+}
+
+.webUploadWarning a {
+  color: var(--post-link-text-color);
+  text-decoration: var(--post-content-link-text-decoration);
+  text-transform: lowercase;
+}
+
+.webUploadWarning a:hover {
+  color: var(--post-link-text-color-hover);
+  text-decoration: var(--post-content-link-text-decoration-hover);
+}

src/components/settings-modal/media-hosting-settings/__tests__/media-hosting-settings.test.tsx

@@ -12,16 +12,27 @@ vi.mock('react-i18next', () => ({
   useTranslation: () => ({ t: (key: string) => key }),
 }));
 
-const mockSetSelectedProvider = vi.fn();
-const selectedProviderRef = vi.hoisted(() => ({ value: 'catbox' as string }));
+const mockGetPlatform = vi.fn(() => 'web');
+vi.mock('@capacitor/core', () => ({
+  Capacitor: { getPlatform: () => mockGetPlatform() },
+}));
+
+const mockSetUploadMode = vi.fn();
+const mockSetPreferredProvider = vi.fn();
+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', async (importOriginal) => {
   const mod = await importOriginal<typeof import('../../../../stores/use-media-hosting-store')>();
   return {
     ...mod,
-    default: (selector: (state: { selectedProvider: string; setSelectedProvider: (provider: string) => void }) => unknown) =>
+    default: (selector: (state: Record<string, unknown>) => unknown) =>
       selector({
-        selectedProvider: selectedProviderRef.value,
-        setSelectedProvider: mockSetSelectedProvider,
+        uploadMode: uploadModeRef.value,
+        preferredProvider: preferredProviderRef.value,
+        setUploadMode: mockSetUploadMode,
+        setPreferredProvider: mockSetPreferredProvider,
       }),
   };
 });
@@ -38,7 +49,10 @@ const render = () => {
 describe('MediaHostingSettings', () => {
   beforeEach(() => {
     vi.clearAllMocks();
-    selectedProviderRef.value = 'catbox';
+    uploadModeRef.value = 'random';
+    preferredProviderRef.value = 'catbox';
+    mockGetPlatform.mockReturnValue('web');
+    (window as unknown as { electronApi?: unknown }).electronApi = undefined;
     container = document.createElement('div');
     document.body.appendChild(container);
     root = createRoot(container);
@@ -49,44 +63,132 @@ describe('MediaHostingSettings', () => {
     container.remove();
   });
 
-  it('renders None option and all providers', () => {
+  it('renders mode options: Random, Preferred, None', () => {
     render();
-    const radios = container.querySelectorAll('input[type="radio"]');
-    expect(radios.length).toBe(MEDIA_HOSTING_PROVIDERS.length + 1);
+    const radios = container.querySelectorAll('input[name="media-hosting-provider"]');
+    expect(radios.length).toBe(3);
+    expect(container.textContent).toContain('media_hosting_random');
+    expect(container.textContent).toContain('media_hosting_preferred');
     expect(container.textContent).toContain('media_hosting_none');
+  });
+
+  it('shows provider list when Preferred is selected', () => {
+    uploadModeRef.value = 'preferred';
+    render();
     for (const provider of MEDIA_HOSTING_PROVIDERS) {
-      expect(container.textContent).toContain(provider.name);
-      expect(container.textContent).toContain(provider.url);
+      expect(container.textContent).toContain(provider.label);
+      expect(container.textContent).toContain(provider.homepageUrl);
     }
   });
 
-  it('default selected is catbox', () => {
+  it('default selected is random', () => {
     render();
-    const catboxRadio = container.querySelector<HTMLInputElement>('input[value="catbox"]');
-    expect(catboxRadio).not.toBeNull();
-    expect(catboxRadio?.checked).toBe(true);
-    const noneRadio = container.querySelector<HTMLInputElement>('input[value="none"]');
-    expect(noneRadio?.checked).toBe(false);
+    const randomRadio = container.querySelector<HTMLInputElement>('input[value="random"]');
+    expect(randomRadio).not.toBeNull();
+    expect(randomRadio?.checked).toBe(true);
   });
 
-  it('clicking a radio updates store selection', async () => {
+  it('clicking None updates store via setUploadMode', async () => {
+    mockGetPlatform.mockReturnValue('android');
     render();
     const noneRadio = container.querySelector<HTMLInputElement>('input[value="none"]');
     expect(noneRadio).not.toBeNull();
     await act(async () => {
       noneRadio?.click();
     });
-    expect(mockSetSelectedProvider).toHaveBeenCalledWith('none');
+    expect(mockSetUploadMode).toHaveBeenCalledWith('none');
+  });
 
-    mockSetSelectedProvider.mockClear();
-    selectedProviderRef.value = 'none';
+  it('clicking provider in preferred mode calls setPreferredProvider', async () => {
+    uploadModeRef.value = 'preferred';
+    preferredProviderRef.value = 'catbox';
+    mockGetPlatform.mockReturnValue('android');
+    render();
+    const imgurRadio = container.querySelector<HTMLInputElement>('input[value="imgur"]');
+    expect(imgurRadio).not.toBeNull();
+    expect(imgurRadio?.disabled).toBe(false);
+    await act(async () => {
+      imgurRadio?.click();
+    });
+    expect(mockSetPreferredProvider).toHaveBeenCalledWith('imgur');
+  });
+
+  it('clicking Random updates store via setUploadMode', async () => {
+    uploadModeRef.value = 'preferred';
+    mockGetPlatform.mockReturnValue('android');
+    render();
+    const randomRadio = container.querySelector<HTMLInputElement>('input[value="random"]');
+    expect(randomRadio).not.toBeNull();
+    await act(async () => {
+      randomRadio?.click();
+    });
+    expect(mockSetUploadMode).toHaveBeenCalledWith('random');
+  });
+
+  it('clicking Preferred updates store via setUploadMode', async () => {
+    mockGetPlatform.mockReturnValue('android');
+    render();
+    const preferredRadio = container.querySelector<HTMLInputElement>('input[value="preferred"]');
+    expect(preferredRadio).not.toBeNull();
+    await act(async () => {
+      preferredRadio?.click();
+    });
+    expect(mockSetUploadMode).toHaveBeenCalledWith('preferred');
+  });
+
+  it('on web runtime, warning renders above mode radios and all radios are disabled', () => {
+    uploadModeRef.value = 'preferred';
+    mockGetPlatform.mockReturnValue('web');
+    (window as unknown as { electronApi?: unknown }).electronApi = undefined;
     render();
 
-    const providerRadio = container.querySelector<HTMLInputElement>(`input[value="${MEDIA_HOSTING_PROVIDERS[0].id}"]`);
-    expect(providerRadio).not.toBeNull();
-    await act(async () => {
-      providerRadio?.click();
-    });
-    expect(mockSetSelectedProvider).toHaveBeenCalledWith(MEDIA_HOSTING_PROVIDERS[0].id);
+    const warningDiv = Array.from(container.querySelectorAll('div')).find((d) => d.textContent?.includes('upload_not_supported_web_before_link'));
+    expect(warningDiv).toBeTruthy();
+    const firstModeRadio = container.querySelector<HTMLInputElement>('input[name="media-hosting-provider"]');
+    expect(firstModeRadio).toBeTruthy();
+    expect(warningDiv!.compareDocumentPosition(firstModeRadio!) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+
+    const modeRadios = container.querySelectorAll<HTMLInputElement>('input[name="media-hosting-provider"]');
+    expect(modeRadios.length).toBe(3);
+    for (const radio of modeRadios) {
+      expect(radio.disabled).toBe(true);
+    }
+
+    const providerRadios = container.querySelectorAll<HTMLInputElement>('input[name="media-hosting-provider-provider"]');
+    expect(providerRadios.length).toBe(MEDIA_HOSTING_PROVIDERS.length);
+    for (const radio of providerRadios) {
+      expect(radio.disabled).toBe(true);
+    }
+
+    expect(container.textContent).toContain('upload_not_supported_web_before_link');
+    expect(container.textContent).toContain('upload_not_supported_web_link_text');
+  });
+
+  it('on web runtime, no Catbox-only web hint key is referenced', () => {
+    mockGetPlatform.mockReturnValue('web');
+    (window as unknown as { electronApi?: unknown }).electronApi = undefined;
+    render();
+    expect(container.textContent).not.toContain('media_hosting_provider_disabled_on_web');
+  });
+
+  it('on electron runtime, all radios are enabled and no CORS warning is shown', () => {
+    uploadModeRef.value = 'preferred';
+    mockGetPlatform.mockReturnValue('web');
+    (window as unknown as { electronApi?: unknown }).electronApi = { isElectron: true };
+    render();
+
+    const modeRadios = container.querySelectorAll<HTMLInputElement>('input[name="media-hosting-provider"]');
+    expect(modeRadios.length).toBe(3);
+    for (const radio of modeRadios) {
+      expect(radio.disabled).toBe(false);
+    }
+
+    const providerRadios = container.querySelectorAll<HTMLInputElement>('input[name="media-hosting-provider-provider"]');
+    expect(providerRadios.length).toBe(MEDIA_HOSTING_PROVIDERS.length);
+    for (const radio of providerRadios) {
+      expect(radio.disabled).toBe(false);
+    }
+
+    expect(container.textContent).not.toContain('upload_not_supported_web_before_link');
   });
 });

src/components/settings-modal/media-hosting-settings/media-hosting-settings.tsx

@@ -1,32 +1,73 @@
+import { Capacitor } from '@capacitor/core';
 import { useTranslation } from 'react-i18next';
 import useMediaHostingStore, { MEDIA_HOSTING_PROVIDERS } from '../../../stores/use-media-hosting-store';
+import type { ProviderId } from '../../../lib/media-hosting/types';
 import styles from '../interface-settings/interface-settings.module.css';
 
 const RADIO_NAME = 'media-hosting-provider';
+const RELEASES_URL = 'https://github.com/bitsocialhq/5chan/releases/latest';
+
+function isWebRuntime(): boolean {
+  return Capacitor.getPlatform() === 'web' && !window.electronApi?.isElectron;
+}
 
 const MediaHostingSettings = () => {
   const { t } = useTranslation();
-  const selectedProvider = useMediaHostingStore((state) => state.selectedProvider);
-  const setSelectedProvider = useMediaHostingStore((state) => state.setSelectedProvider);
+  const uploadMode = useMediaHostingStore((state) => state.uploadMode);
+  const preferredProvider = useMediaHostingStore((state) => state.preferredProvider);
+  const setUploadMode = useMediaHostingStore((state) => state.setUploadMode);
+  const setPreferredProvider = useMediaHostingStore((state) => state.setPreferredProvider);
+  const isWeb = isWebRuntime();
 
   return (
     <div className={styles.interfaceSettings}>
       <div role='radiogroup' aria-label={t('media_hosting')}>
-        {MEDIA_HOSTING_PROVIDERS.map((provider) => (
-          <div key={provider.id} className={styles.setting}>
-            <label>
-              <input type='radio' name={RADIO_NAME} value={provider.id} checked={selectedProvider === provider.id} onChange={() => setSelectedProvider(provider.id)} />
-              {provider.name} (
-              <a href={provider.url} target='_blank' rel='noopener noreferrer'>
-                {provider.url}
-              </a>
-              )
-            </label>
+        {isWeb && (
+          <div className={styles.webUploadWarning}>
+            {t('upload_not_supported_web_before_link')}{' '}
+            <a href={RELEASES_URL} target='_blank' rel='noopener noreferrer'>
+              {t('upload_not_supported_web_link_text')}
+            </a>
           </div>
-        ))}
+        )}
         <div className={styles.setting}>
           <label>
-            <input type='radio' name={RADIO_NAME} value='none' checked={selectedProvider === 'none'} onChange={() => setSelectedProvider('none')} />
+            <input type='radio' name={RADIO_NAME} value='random' checked={uploadMode === 'random'} onChange={() => setUploadMode('random')} disabled={isWeb} />
+            {t('media_hosting_random')}
+          </label>
+        </div>
+        <div className={styles.setting}>
+          <label>
+            <input type='radio' name={RADIO_NAME} value='preferred' checked={uploadMode === 'preferred'} onChange={() => setUploadMode('preferred')} disabled={isWeb} />
+            {t('media_hosting_preferred')}
+          </label>
+          {uploadMode === 'preferred' && (
+            <div role='radiogroup' aria-label={t('media_hosting_preferred_provider_label')}>
+              {MEDIA_HOSTING_PROVIDERS.map((provider) => (
+                <div key={provider.id} className={styles.setting}>
+                  <label>
+                    <input
+                      type='radio'
+                      name={`${RADIO_NAME}-provider`}
+                      value={provider.id}
+                      checked={preferredProvider === provider.id}
+                      onChange={() => setPreferredProvider(provider.id as ProviderId)}
+                      disabled={isWeb}
+                    />
+                    {provider.label} (
+                    <a href={provider.homepageUrl} target='_blank' rel='noopener noreferrer'>
+                      {provider.homepageUrl}
+                    </a>
+                    )
+                  </label>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+        <div className={styles.setting}>
+          <label>
+            <input type='radio' name={RADIO_NAME} value='none' checked={uploadMode === 'none'} onChange={() => setUploadMode('none')} disabled={isWeb} />
             {t('media_hosting_none')}
           </label>
           <div className={styles.settingTip}>{t('media_hosting_none_tip')}</div>

src/globals.d.ts

@@ -4,14 +4,15 @@ declare global {
   }
 }
 
+import type { ProviderId } from './lib/media-hosting/types';
+
 declare global {
   interface Window {
     electronApi?: {
       isElectron: boolean;
-      invoke: (channel: string, ...args: any[]) => Promise<any>;
-      getNotificationStatus: () => Promise<'granted' | 'denied' | 'not-determined' | 'not-supported'>;
-      getPlatform: () => Promise<NodeJS.Platform>;
-      testNotification: () => Promise<{ success: boolean; reason?: string }>;
+      copyToClipboard: (text: string) => Promise<{ success: boolean; error?: string }>;
+      getPlatform: () => Promise<{ platform: NodeJS.Platform; arch: string; version: string }>;
+      automateUploadMedia: (options: { provider: ProviderId; filePath: string }) => Promise<{ url: string; provider: ProviderId }>;
     };
   }
 }

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,

src/lib/media-hosting/__tests__/direct-url.test.ts

@@ -0,0 +1,39 @@
+import { describe, expect, it } from 'vitest';
+import { isDirectMediaUrl } from '../direct-url';
+
+describe('direct-url', () => {
+  describe('isDirectMediaUrl', () => {
+    it('returns true for image extensions', () => {
+      expect(isDirectMediaUrl('https://example.com/photo.jpg')).toBe(true);
+      expect(isDirectMediaUrl('https://example.com/photo.jpeg')).toBe(true);
+      expect(isDirectMediaUrl('https://example.com/photo.png')).toBe(true);
+      expect(isDirectMediaUrl('https://example.com/photo.gif')).toBe(true);
+      expect(isDirectMediaUrl('https://example.com/photo.webp')).toBe(true);
+    });
+
+    it('returns true for video extensions', () => {
+      expect(isDirectMediaUrl('https://example.com/video.webm')).toBe(true);
+      expect(isDirectMediaUrl('https://example.com/video.mp4')).toBe(true);
+      expect(isDirectMediaUrl('https://example.com/video.mov')).toBe(true);
+      expect(isDirectMediaUrl('https://example.com/video.avi')).toBe(true);
+      expect(isDirectMediaUrl('https://example.com/video.mkv')).toBe(true);
+      expect(isDirectMediaUrl('https://example.com/video.gifv')).toBe(true);
+    });
+
+    it('strips query strings before checking', () => {
+      expect(isDirectMediaUrl('https://example.com/photo.jpg?size=large')).toBe(true);
+      expect(isDirectMediaUrl('https://example.com/page.html?img=photo.jpg')).toBe(false);
+    });
+
+    it('is case insensitive', () => {
+      expect(isDirectMediaUrl('https://example.com/photo.JPG')).toBe(true);
+      expect(isDirectMediaUrl('https://example.com/photo.PNG')).toBe(true);
+    });
+
+    it('returns false for non-media URLs', () => {
+      expect(isDirectMediaUrl('https://example.com/page.html')).toBe(false);
+      expect(isDirectMediaUrl('https://imgur.com/abc123')).toBe(false);
+      expect(isDirectMediaUrl('https://example.com/')).toBe(false);
+    });
+  });
+});

src/lib/media-hosting/__tests__/provider-order.test.ts

@@ -0,0 +1,97 @@
+import { describe, expect, it, vi } from 'vitest';
+import { getPreferredOrder, getRandomOrder, getProviderOrder } from '../provider-order';
+
+describe('provider-order', () => {
+  describe('getPreferredOrder', () => {
+    it('returns single-element array with preferred provider', () => {
+      expect(getPreferredOrder('catbox')).toEqual(['catbox']);
+      expect(getPreferredOrder('imgur')).toEqual(['imgur']);
+      expect(getPreferredOrder('postimages')).toEqual(['postimages']);
+    });
+  });
+
+  describe('getRandomOrder', () => {
+    it('returns shuffled copy (Fisher-Yates) with default rng', () => {
+      const providers = ['catbox', 'imgur', 'postimages'] as const;
+      const result = getRandomOrder(providers);
+      expect(result).toHaveLength(3);
+      expect([...result].sort()).toEqual(['catbox', 'imgur', 'postimages']);
+      expect(result).not.toBe(providers);
+    });
+
+    it('uses provided rng for deterministic shuffle', () => {
+      const providers = ['catbox', 'imgur', 'postimages'] as const;
+      const rng = vi.fn().mockReturnValue(0.5);
+      const result = getRandomOrder(providers, rng);
+      expect(rng).toHaveBeenCalled();
+      expect(result).toHaveLength(3);
+    });
+
+    it('handles empty array', () => {
+      expect(getRandomOrder([])).toEqual([]);
+    });
+
+    it('handles single element', () => {
+      expect(getRandomOrder(['catbox'])).toEqual(['catbox']);
+    });
+  });
+
+  describe('getProviderOrder', () => {
+    it('returns empty array when mode is none', () => {
+      expect(
+        getProviderOrder({
+          mode: 'none',
+          preferredProvider: 'catbox',
+          runtime: 'electron',
+        }),
+      ).toEqual([]);
+    });
+
+    it('returns preferred provider when mode is preferred and supported', () => {
+      expect(
+        getProviderOrder({
+          mode: 'preferred',
+          preferredProvider: 'catbox',
+          runtime: 'web',
+        }),
+      ).toEqual(['catbox']);
+      expect(
+        getProviderOrder({
+          mode: 'preferred',
+          preferredProvider: 'imgur',
+          runtime: 'electron',
+        }),
+      ).toEqual(['imgur']);
+    });
+
+    it('returns empty when preferred provider not supported on runtime', () => {
+      expect(
+        getProviderOrder({
+          mode: 'preferred',
+          preferredProvider: 'imgur',
+          runtime: 'web',
+        }),
+      ).toEqual([]);
+    });
+
+    it('returns shuffled list when mode is random', () => {
+      const order = getProviderOrder({
+        mode: 'random',
+        preferredProvider: 'catbox',
+        runtime: 'electron',
+      });
+      expect(order).toHaveLength(3);
+      expect([...order].sort()).toEqual(['catbox', 'imgur', 'postimages']);
+    });
+
+    it('filters by runtime for random mode', () => {
+      const order = getProviderOrder({
+        mode: 'random',
+        preferredProvider: 'catbox',
+        runtime: 'web',
+      });
+      expect(order).toHaveLength(1);
+      expect(order).toEqual(['catbox']);
+    });
+  });
+});

src/lib/media-hosting/__tests__/show-upload-controls.test.ts

@@ -0,0 +1,19 @@
+import { describe, expect, it } from 'vitest';
+import { getShowUploadControls } from '../show-upload-controls';
+
+describe('getShowUploadControls', () => {
+  it('returns true on web regardless of uploadMode', () => {
+    expect(getShowUploadControls('none', true)).toBe(true);
+    expect(getShowUploadControls('random', true)).toBe(true);
+    expect(getShowUploadControls('preferred', true)).toBe(true);
+  });
+
+  it('returns false on non-web when uploadMode is none', () => {
+    expect(getShowUploadControls('none', false)).toBe(false);
+  });
+
+  it('returns true on non-web when uploadMode is random or preferred', () => {
+    expect(getShowUploadControls('random', false)).toBe(true);
+    expect(getShowUploadControls('preferred', false)).toBe(true);
+  });
+});

src/lib/media-hosting/direct-url.ts

@@ -0,0 +1,12 @@
+/** File extensions that denote direct media URLs (images + videos) */
+const DIRECT_MEDIA_EXTENSIONS = ['.jpg', '.jpeg', '.png', '.gif', '.webp', '.webm', '.mp4', '.mov', '.avi', '.mkv', '.gifv'] as const;
+
+/** Returns true if the URL appears to point to a direct media file (image or video) */
+export function isDirectMediaUrl(url: string): boolean {
+  try {
+    const normalized = url.split('?')[0].toLowerCase();
+    return DIRECT_MEDIA_EXTENSIONS.some((ext) => normalized.endsWith(ext));
+  } catch {
+    return false;
+  }
+}

src/lib/media-hosting/error-format.ts

@@ -0,0 +1,24 @@
+import type { ProviderId } from './types';
+
+export interface ProviderAttempt {
+  provider: ProviderId;
+  success: boolean;
+  error?: string;
+}
+
+export type TranslateFn = (key: string) => string;
+
+/**
+ * Formats aggregated error message when all providers fail (random mode).
+ */
+export function formatAggregatedError(attempts: ProviderAttempt[], t: TranslateFn): string {
+  const details = attempts.map((a) => `${a.provider}: ${a.error ?? 'unknown'}`).join('; ');
+  return `${t('upload_failed')}. ${t('upload_failed_all_providers')}: ${details}`;
+}
+
+/**
+ * Formats error for preferred mode with actionable guidance.
+ */
+export function formatPreferredModeError(errorMessage: string, t: TranslateFn): string {
+  return `${t('upload_failed')}: ${errorMessage}. ${t('upload_failed_preferred_guidance')}`;
+}

src/lib/media-hosting/provider-order.ts

@@ -0,0 +1,37 @@
+import type { MediaHostingRuntime, ProviderId, UploadMode } from './types';
+import { MEDIA_HOSTING_PROVIDERS } from './providers';
+
+/** Returns [preferredProvider] for preferred mode */
+export function getPreferredOrder(preferredProvider: ProviderId): ProviderId[] {
+  return [preferredProvider];
+}
+
+/** Fisher-Yates shuffle. Returns a new shuffled copy. */
+export function getRandomOrder(providers: readonly ProviderId[], rng: () => number = Math.random): ProviderId[] {
+  const result = [...providers];
+  for (let i = result.length - 1; i > 0; i--) {
+    const j = Math.floor(rng() * (i + 1));
+    [result[i], result[j]] = [result[j], result[i]];
+  }
+  return result;
+}
+
+/** Filter providers to those supported on the given runtime */
+function getSupportedProviders(runtime: MediaHostingRuntime): ProviderId[] {
+  return MEDIA_HOSTING_PROVIDERS.filter((p) => p.supportedRuntimes.includes(runtime)).map((p) => p.id);
+}
+
+/** Get ordered provider list for an upload attempt */
+export function getProviderOrder(options: { mode: UploadMode; preferredProvider: ProviderId; runtime: MediaHostingRuntime }): ProviderId[] {
+  const { mode, preferredProvider, runtime } = options;
+  const supported = getSupportedProviders(runtime);
+
+  if (mode === 'none') return [];
+  if (mode === 'preferred') {
+    return supported.includes(preferredProvider) ? [preferredProvider] : [];
+  }
+  if (mode === 'random') {
+    return getRandomOrder(supported);
+  }
+  return [];
+}

src/lib/media-hosting/providers.ts

@@ -0,0 +1,34 @@
+import type { MediaHostingRuntime, ProviderId } from './types';
+
+export interface ProviderDefinition {
+  id: ProviderId;
+  label: string;
+  homepageUrl: string;
+  /** Runtimes where automated upload is supported (non-web = no interactive fallback) */
+  supportedRuntimes: readonly MediaHostingRuntime[];
+}
+
+/** All media hosting providers with metadata */
+export const MEDIA_HOSTING_PROVIDERS: readonly ProviderDefinition[] = [
+  {
+    id: 'catbox',
+    label: 'Catbox',
+    homepageUrl: 'https://catbox.moe',
+    supportedRuntimes: ['web', 'electron', 'android'],
+  },
+  {
+    id: 'imgur',
+    label: 'Imgur',
+    homepageUrl: 'https://imgur.com',
+    supportedRuntimes: ['electron', 'android'],
+  },
+  {
+    id: 'postimages',
+    label: 'Postimages',
+    homepageUrl: 'https://postimages.org',
+    supportedRuntimes: ['electron', 'android'],
+  },
+] as const;
+
+/** Provider IDs for ordering */
+export const PROVIDER_IDS: readonly ProviderId[] = MEDIA_HOSTING_PROVIDERS.map((p) => p.id);

src/lib/media-hosting/show-upload-controls.ts

@@ -0,0 +1,16 @@
+import { Capacitor } from '@capacitor/core';
+import type { UploadMode } from './types';
+
+/** Web runtime = web browser, not Electron */
+export function isWebRuntime(): boolean {
+  return Capacitor.getPlatform() === 'web' && !window.electronApi?.isElectron;
+}
+
+/**
+ * Whether to show the upload CTA in post/reply forms.
+ * On web runtime, always true (for app promotion); otherwise true when uploadMode !== 'none'.
+ */
+export function getShowUploadControls(uploadMode: UploadMode, isWeb: boolean): boolean {
+  if (isWeb) return true;
+  return uploadMode !== 'none';
+}

src/lib/media-hosting/types.ts

@@ -0,0 +1,30 @@
+/** Supported media hosting provider identifiers */
+export type ProviderId = 'catbox' | 'imgur' | 'postimages';
+
+/** User-facing upload mode */
+export type UploadMode = 'random' | 'preferred' | 'none';
+
+/** Runtime environment for automation support */
+export type MediaHostingRuntime = 'web' | 'electron' | 'android';
+
+/** Result of a single provider upload attempt */
+export interface ProviderAttempt {
+  provider: ProviderId;
+  success: boolean;
+  url?: string;
+  error?: string;
+}
+
+/** Successful upload result */
+export interface ProviderSuccess {
+  provider: ProviderId;
+  url: string;
+  fileName: string;
+  attempts?: ProviderAttempt[];
+}
+
+/** Aggregate error when all providers fail */
+export interface ProviderAggregateError {
+  attempts: ProviderAttempt[];
+  message: string;
+}

src/lib/media-hosting/upload-orchestrator.ts

@@ -0,0 +1,50 @@
+import type { ProviderId } from './types';
+import { uploadToCatbox } from '../utils/catbox-utils';
+
+export interface OrchestratorAttempt {
+  provider: ProviderId;
+  success: boolean;
+  url?: string;
+  error?: string;
+}
+
+/**
+ * Uploads a file via a single provider. Catbox uses the web API;
+ * imgur/postimages use Electron automation when available.
+ */
+async function uploadViaProvider(provider: ProviderId, file: File): Promise<string> {
+  if (provider === 'catbox') return uploadToCatbox(file);
+  if (provider === 'imgur' || provider === 'postimages') {
+    const fn = typeof window !== 'undefined' && window.electronApi?.automateUploadMedia;
+    if (fn) {
+      const filePath = (file as File & { path?: string }).path;
+      if (!filePath) throw new Error('File path required for Electron automation');
+      const { url } = await fn({ provider, filePath });
+      return url;
+    }
+    throw new Error(`Provider ${provider} requires Electron (automateUploadMedia not available)`);
+  }
+  throw new Error(`Unsupported provider: ${provider}`);
+}
+
+/**
+ * Orchestrates Electron upload: tries each provider in order, returns URL on first success.
+ * Collects attempt errors. Throws with attempts if all fail.
+ */
+export async function orchestrateElectronUpload(file: File, providerOrder: ProviderId[]): Promise<string> {
+  const attempts: OrchestratorAttempt[] = [];
+
+  for (const provider of providerOrder) {
+    try {
+      const url = await uploadViaProvider(provider, file);
+      return url;
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err);
+      attempts.push({ provider, success: false, error: msg });
+    }
+  }
+
+  const err = new Error('All providers failed') as Error & { attempts: OrchestratorAttempt[] };
+  err.attempts = attempts;
+  throw err;
+}

src/plugins/file-uploader.ts

@@ -1,7 +1,19 @@
 import { registerPlugin } from '@capacitor/core';
+import type { ProviderAttempt, ProviderId } from '../lib/media-hosting/types';
+
+export interface PickAndUploadMediaOptions {
+  providerOrder: ProviderId[];
+}
+
+export interface PickAndUploadMediaResult {
+  url: string;
+  fileName: string;
+  provider: ProviderId;
+  attempts?: ProviderAttempt[];
+}
 
 export interface FileUploaderPlugin {
-  pickAndUploadMedia(): Promise<{ url: string; fileName: string }>;
+  pickAndUploadMedia(options?: PickAndUploadMediaOptions): Promise<PickAndUploadMediaResult>;
 }
 
 const FileUploader = registerPlugin<FileUploaderPlugin>('FileUploader');

src/stores/__tests__/use-media-hosting-store.test.ts

@@ -13,30 +13,54 @@ describe('useMediaHostingStore', () => {
 
   afterEach(() => {
     setItemSpy.mockRestore();
-    useMediaHostingStore.getState().setSelectedProvider('catbox');
+    useMediaHostingStore.getState().setUploadMode('random');
+    useMediaHostingStore.getState().setPreferredProvider('catbox');
   });
 
-  it('exports MEDIA_HOSTING_PROVIDERS with at least Catbox provider', () => {
+  it('exports MEDIA_HOSTING_PROVIDERS with ids, labels, homepage URLs, runtime metadata', () => {
     expect(MEDIA_HOSTING_PROVIDERS).toBeDefined();
-    expect(MEDIA_HOSTING_PROVIDERS.length).toBeGreaterThanOrEqual(1);
+    expect(MEDIA_HOSTING_PROVIDERS.length).toBe(3);
     const catbox = MEDIA_HOSTING_PROVIDERS.find((p) => p.id === 'catbox');
-    expect(catbox).toEqual({ id: 'catbox', name: 'Catbox', url: 'https://catbox.moe' });
+    expect(catbox).toEqual({
+      id: 'catbox',
+      label: 'Catbox',
+      homepageUrl: 'https://catbox.moe',
+      supportedRuntimes: ['web', 'electron', 'android'],
+    });
   });
 
-  it('defaults selectedProvider to catbox', () => {
-    const { selectedProvider } = useMediaHostingStore.getState();
-    expect(selectedProvider).toBe('catbox');
+  it('defaults uploadMode to random and preferredProvider to catbox', () => {
+    const { uploadMode, preferredProvider } = useMediaHostingStore.getState();
+    expect(uploadMode).toBe('random');
+    expect(preferredProvider).toBe('catbox');
   });
 
-  it('sets selectedProvider to none when setSelectedProvider is called with none', () => {
-    useMediaHostingStore.getState().setSelectedProvider('none');
-    const { selectedProvider } = useMediaHostingStore.getState();
-    expect(selectedProvider).toBe('none');
+  it('sets uploadMode to none when setUploadMode is called with none', () => {
+    useMediaHostingStore.getState().setUploadMode('none');
+    const { uploadMode } = useMediaHostingStore.getState();
+    expect(uploadMode).toBe('none');
   });
 
-  it('persists state to localStorage when setSelectedProvider is called', () => {
-    useMediaHostingStore.getState().setSelectedProvider('none');
+  it('persists state to localStorage when setUploadMode is called', () => {
+    useMediaHostingStore.getState().setUploadMode('none');
 
-    expect(setItemSpy).toHaveBeenCalledWith(STORAGE_KEY, expect.stringContaining('"selectedProvider":"none"'));
+    expect(setItemSpy).toHaveBeenCalledWith(STORAGE_KEY, expect.stringContaining('"uploadMode":"none"'));
+  });
+
+  it('persists preferredProvider when setPreferredProvider is called', () => {
+    useMediaHostingStore.getState().setPreferredProvider('imgur');
+
+    expect(setItemSpy).toHaveBeenCalledWith(STORAGE_KEY, expect.stringContaining('"preferredProvider":"imgur"'));
+  });
+
+  it('migrates legacy selectedProvider state to random + catbox', async () => {
+    const legacyState = { state: { selectedProvider: 'imgur' }, version: 0 };
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(legacyState));
+
+    await useMediaHostingStore.persist.rehydrate();
+
+    const { uploadMode, preferredProvider } = useMediaHostingStore.getState();
+    expect(uploadMode).toBe('random');
+    expect(preferredProvider).toBe('catbox');
   });
 });

src/stores/use-media-hosting-store.ts

@@ -1,23 +1,44 @@
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
+import type { ProviderId, UploadMode } from '../lib/media-hosting/types';
+import { MEDIA_HOSTING_PROVIDERS as PROVIDER_REGISTRY } from '../lib/media-hosting/providers';
 
-export const MEDIA_HOSTING_PROVIDERS = [{ id: 'catbox', name: 'Catbox', url: 'https://catbox.moe' }] as const;
-
-export type MediaHostingSelection = (typeof MEDIA_HOSTING_PROVIDERS)[number]['id'] | 'none' | string;
+/** Provider registry for UI: id, label, homepage URL, runtime support */
+export const MEDIA_HOSTING_PROVIDERS = PROVIDER_REGISTRY;
 
 interface MediaHostingStore {
-  selectedProvider: MediaHostingSelection;
-  setSelectedProvider: (provider: string) => void;
+  uploadMode: UploadMode;
+  preferredProvider: ProviderId;
+  setUploadMode: (mode: UploadMode) => void;
+  setPreferredProvider: (provider: ProviderId) => void;
+}
+
+const PERSIST_VERSION = 2;
+
+function migrate(_state: unknown): MediaHostingStore {
+  return {
+    uploadMode: 'random',
+    preferredProvider: 'catbox',
+  } as MediaHostingStore;
 }
 
 const useMediaHostingStore = create<MediaHostingStore>()(
   persist(
     (set) => ({
-      selectedProvider: 'catbox',
-      setSelectedProvider: (provider) => set({ selectedProvider: provider }),
+      uploadMode: 'random',
+      preferredProvider: 'catbox',
+      setUploadMode: (mode) => set({ uploadMode: mode }),
+      setPreferredProvider: (provider) => set({ preferredProvider: provider }),
     }),
     {
       name: 'media-hosting-storage',
+      version: PERSIST_VERSION,
+      migrate: (persistedState, version) => {
+        if (version < PERSIST_VERSION) {
+          return migrate(persistedState);
+        }
+        return persistedState as MediaHostingStore;
+      },
     },
   ),
 );