fix image upload for apps

Author: arcbtc

capacitor.config.ts

@@ -13,6 +13,9 @@ const config: CapacitorConfig = {
     androidScheme: 'https'
   },
   plugins: {
+    CapacitorHttp: {
+      enabled: true
+    },
     StatusBar: {
       overlaysWebView: false
     },

electron/main.cjs

@@ -195,6 +195,63 @@ function registerSecureSessionHandlers() {
   ipcMain.handle('secure-session:clear', () => clearSecureSession());
 }
 
+function registerUploadHandlers() {
+  ipcMain.handle('upload:nostr-build', async (_event, payload) => {
+    try {
+      return await uploadToNostrBuild(payload);
+    } catch (error) {
+      return {
+        ok: false,
+        status: 0,
+        data: { message: error?.message || 'Could not reach nostr.build for upload.' },
+        error: error?.message || 'Could not reach nostr.build for upload.'
+      };
+    }
+  });
+}
+
+async function uploadToNostrBuild(payload) {
+  const authorization = typeof payload?.authorization === 'string' ? payload.authorization : '';
+  const mediaType = ['avatar', 'banner', 'media'].includes(payload?.mediaType) ? payload.mediaType : 'media';
+  const name = safeUploadName(typeof payload?.name === 'string' && payload.name ? payload.name : 'upload');
+  const type = typeof payload?.type === 'string' && payload.type ? payload.type : 'application/octet-stream';
+  const size = Number.isFinite(payload?.size) ? String(payload.size) : '';
+  const bytes = Buffer.isBuffer(payload?.bytes) ? payload.bytes : Buffer.from(payload?.bytes ?? []);
+  if (!authorization.startsWith('Nostr ') || !bytes.length) return { ok: false, status: 400, data: { message: 'Missing upload data.' } };
+
+  const form = new FormData();
+  form.set('file', new Blob([bytes], { type }), name);
+  form.set('media_type', mediaType);
+  form.set('content_type', type);
+  form.set('size', size || String(bytes.length));
+
+  const response = await fetch('https://nostr.build/api/v2/upload/files', {
+    method: 'POST',
+    headers: { Authorization: authorization },
+    body: form
+  });
+  const text = await response.text().catch(() => '');
+  return {
+    ok: response.ok,
+    status: response.status,
+    location: response.headers.get('location') || '',
+    data: parseJsonOrText(text)
+  };
+}
+
+function safeUploadName(name) {
+  return name.replace(/[\\/:*?"<>|\u0000-\u001f]/g, '_').slice(0, 180) || 'upload';
+}
+
+function parseJsonOrText(text) {
+  if (!text) return '';
+  try {
+    return JSON.parse(text);
+  } catch {
+    return text;
+  }
+}
+
 registerNostrProtocol();
 openNostrUrl(findNostrUrl());
 
@@ -213,6 +270,7 @@ if (!gotSingleInstanceLock) {
 
   app.whenReady().then(() => {
     registerSecureSessionHandlers();
+    registerUploadHandlers();
     return createWindow();
   });
 }

electron/preload.cjs

@@ -6,3 +6,7 @@ contextBridge.exposeInMainWorld('nostrDesktopSecureStorage', {
   write: (value) => ipcRenderer.invoke('secure-session:write', value),
   clear: () => ipcRenderer.invoke('secure-session:clear')
 });
+
+contextBridge.exposeInMainWorld('nostrDesktopUpload', {
+  uploadToNostrBuild: (payload) => ipcRenderer.invoke('upload:nostr-build', payload)
+});

src/app.d.ts

@@ -9,6 +9,16 @@ declare global {
       write(value: string): Promise<boolean>;
       clear(): Promise<void>;
     };
+    nostrDesktopUpload?: {
+      uploadToNostrBuild(payload: {
+        name: string;
+        type: string;
+        size: number;
+        mediaType: 'avatar' | 'banner' | 'media';
+        authorization: string;
+        bytes: ArrayBuffer;
+      }): Promise<{ ok: boolean; status: number; data?: unknown; location?: string; error?: string }>;
+    };
     nostr?: {
       getPublicKey(): Promise<string>;
       signEvent(event: Record<string, unknown>): Promise<Record<string, unknown>>;

src/lib/nostr/upload.ts

@@ -13,6 +13,9 @@ export async function uploadToNostrBuild(session: Session, file: File, mediaType
   form.set('size', String(file.size));
 
   const authorization = await getNip98AuthorizationHeader(session, nostrBuildUploadUrl, 'POST');
+  const desktopUploadUrl = await uploadWithDesktopBridge(file, mediaType, authorization);
+  if (desktopUploadUrl) return desktopUploadUrl;
+
   const response = await fetch(nostrBuildUploadUrl, {
     method: 'POST',
     headers: { Authorization: authorization },
@@ -28,6 +31,30 @@ export async function uploadToNostrBuild(session: Session, file: File, mediaType
   return url;
 }
 
+async function uploadWithDesktopBridge(file: File, mediaType: NostrBuildMediaType, authorization: string) {
+  if (typeof window === 'undefined') return '';
+  const bridge = window.nostrDesktopUpload;
+  if (!bridge?.uploadToNostrBuild) return '';
+
+  const result = await bridge
+    .uploadToNostrBuild({
+      name: file.name,
+      type: file.type,
+      size: file.size,
+      mediaType,
+      authorization,
+      bytes: await file.arrayBuffer()
+    })
+    .catch((err) => {
+      throw new Error(uploadNetworkErrorMessage(err));
+    });
+
+  if (!result.ok) throw new Error(result.error || uploadErrorMessage(result.data) || `Upload failed with ${result.status}.`);
+  const url = uploadResponseUrl(result.data) || result.location || '';
+  if (!url) throw new Error('Upload finished but no media URL was returned.');
+  return url;
+}
+
 export function uploadResponseUrl(data: unknown): string {
   const tags = uploadResponseTags(data);
   const urlTag = tags.find((tag) => tag[0] === 'url' && tag[1]);