improvement(uploads): migrate profile-picture and workspace-logo uploads to presigned PUT

waleedlatif1 · waleedlatif1 · commit dba6e2f47bbc · 2026-05-07T19:26:22.000-07:00
diff --git a/apps/sim/app/api/files/presigned/route.ts b/apps/sim/app/api/files/presigned/route.ts
@@ -22,6 +22,7 @@ const VALID_UPLOAD_TYPES = [
   'copilot',
   'profile-pictures',
   'mothership',
+  'workspace-logos',
 ] as const
 
 class PresignedUrlError extends Error {
@@ -154,6 +155,37 @@ export const POST = withRouteHandler(async (request: NextRequest) => {
         expirationSeconds: 3600,
         metadata: { workspaceId },
       })
+    } else if (uploadType === 'workspace-logos') {
+      const workspaceId = request.nextUrl.searchParams.get('workspaceId')
+      if (!workspaceId?.trim()) {
+        throw new ValidationError(
+          'workspaceId query parameter is required for workspace-logos uploads'
+        )
+      }
+
+      const permission = await getUserEntityPermissions(sessionUserId, 'workspace', workspaceId)
+      if (permission === null) {
+        return NextResponse.json(
+          { error: 'Insufficient permissions for workspace' },
+          { status: 403 }
+        )
+      }
+
+      if (!isImageFileType(contentType)) {
+        throw new ValidationError(
+          'Only image files (JPEG, PNG, GIF, WebP, SVG) are allowed for workspace logo uploads'
+        )
+      }
+
+      presignedUrlResponse = await generatePresignedUploadUrl({
+        fileName,
+        contentType,
+        fileSize,
+        context: 'workspace-logos',
+        userId: sessionUserId,
+        expirationSeconds: 3600,
+        metadata: { workspaceId },
+      })
     } else {
       if (uploadType === 'profile-pictures') {
         if (!sessionUserId?.trim()) {
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/hooks/use-profile-picture-upload.ts b/apps/sim/app/workspace/[workspaceId]/settings/hooks/use-profile-picture-upload.ts
@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
+import { DirectUploadError, runUploadStrategy } from '@/lib/uploads/client/direct-upload'
 import type { StorageContext } from '@/lib/uploads/shared/types'
 
 const logger = createLogger('ProfilePictureUpload')
@@ -10,10 +11,49 @@ interface UseProfilePictureUploadProps {
   onUpload?: (url: string | null) => void
   onError?: (error: string) => void
   currentImage?: string | null
-  context?: StorageContext
+  context?: 'profile-pictures' | 'workspace-logos'
   workspaceId?: string
 }
 
+/**
+ * Server-proxied fallback used only when cloud storage isn't configured (local dev).
+ * Production always takes the presigned PUT path.
+ */
+async function uploadViaApiFallback(
+  file: File,
+  context: StorageContext,
+  workspaceId?: string
+): Promise<string> {
+  const formData = new FormData()
+  formData.append('file', file)
+  formData.append('context', context)
+  if (workspaceId) {
+    formData.append('workspaceId', workspaceId)
+  }
+
+  // boundary-raw-fetch: local-dev fallback when cloud storage is not configured; multipart upload incompatible with requestJson
+  const response = await fetch('/api/files/upload', { method: 'POST', body: formData })
+  if (!response.ok) {
+    const errorData = (await response.json().catch(() => ({}))) as {
+      message?: string
+      error?: string
+    }
+    throw new Error(
+      errorData.message || errorData.error || `Failed to upload file: ${response.status}`
+    )
+  }
+  const data = (await response.json()) as {
+    fileInfo?: { path?: string }
+    path?: string
+    url?: string
+  }
+  const publicUrl = data.fileInfo?.path ?? data.path ?? data.url
+  if (!publicUrl) {
+    throw new Error('Invalid upload response: missing path')
+  }
+  return publicUrl
+}
+
 /**
  * Hook for handling profile picture upload functionality.
  * Manages file validation, preview generation, and server upload.
@@ -64,33 +104,27 @@ export function useProfilePictureUpload({
 
   const uploadFileToServer = useCallback(
     async (file: File): Promise<string> => {
-      try {
-        const formData = new FormData()
-        formData.append('file', file)
-        formData.append('context', context)
-        if (workspaceId) {
-          formData.append('workspaceId', workspaceId)
-        }
+      const presignedEndpoint =
+        context === 'workspace-logos' && workspaceId
+          ? `/api/files/presigned?type=workspace-logos&workspaceId=${encodeURIComponent(workspaceId)}`
+          : `/api/files/presigned?type=${context}`
 
-        // boundary-raw-fetch: multipart/form-data upload (FileUpload boundary), incompatible with requestJson which JSON-stringifies bodies
-        const response = await fetch('/api/files/upload', {
-          method: 'POST',
-          body: formData,
+      try {
+        const result = await runUploadStrategy({
+          file,
+          workspaceId: workspaceId ?? '',
+          context,
+          presignedEndpoint,
         })
-
-        if (!response.ok) {
-          const errorData = await response.json().catch(() => ({ message: response.statusText }))
-          throw new Error(
-            errorData.message || errorData.error || `Failed to upload file: ${response.status}`
-          )
-        }
-
-        const data = await response.json()
-        const publicUrl = data.fileInfo?.path || data.path || data.url
-        logger.info(`Profile picture uploaded successfully via server upload: ${publicUrl}`)
-        return publicUrl
+        logger.info(`${context} uploaded successfully: ${result.path}`)
+        return result.path
       } catch (error) {
-        throw new Error(error instanceof Error ? error.message : 'Failed to upload profile picture')
+        if (error instanceof DirectUploadError && error.code === 'FALLBACK_REQUIRED') {
+          const publicUrl = await uploadViaApiFallback(file, context, workspaceId)
+          logger.info(`${context} uploaded successfully via API fallback: ${publicUrl}`)
+          return publicUrl
+        }
+        throw error
       }
     },
     [context, workspaceId]
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-workspace-logo-upload.ts b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-workspace-logo-upload.ts
@@ -1,10 +1,40 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
+import { DirectUploadError, runUploadStrategy } from '@/lib/uploads/client/direct-upload'
 
 const logger = createLogger('WorkspaceLogoUpload')
 const MAX_FILE_SIZE = 5 * 1024 * 1024 // 5MB
 const ACCEPTED_IMAGE_TYPES = ['image/png', 'image/jpeg', 'image/jpg', 'image/svg+xml', 'image/webp']
 
+async function uploadViaApiFallback(file: File, workspaceId: string): Promise<string> {
+  const formData = new FormData()
+  formData.append('file', file)
+  formData.append('context', 'workspace-logos')
+  formData.append('workspaceId', workspaceId)
+
+  // boundary-raw-fetch: local-dev fallback when cloud storage is not configured; multipart upload incompatible with requestJson
+  const response = await fetch('/api/files/upload', { method: 'POST', body: formData })
+  if (!response.ok) {
+    const errorData = (await response.json().catch(() => ({}))) as {
+      message?: string
+      error?: string
+    }
+    throw new Error(
+      errorData.message || errorData.error || `Failed to upload file: ${response.status}`
+    )
+  }
+  const data = (await response.json()) as {
+    fileInfo?: { path?: string }
+    path?: string
+    url?: string
+  }
+  const publicUrl = data.fileInfo?.path ?? data.path ?? data.url
+  if (!publicUrl) {
+    throw new Error('Invalid upload response: missing path')
+  }
+  return publicUrl
+}
+
 interface UseWorkspaceLogoUploadProps {
   workspaceId?: string
   currentLogoUrl?: string | null
@@ -60,30 +90,30 @@ export function useWorkspaceLogoUpload({
   }, [])
 
   const uploadFileToServer = useCallback(async (file: File): Promise<string> => {
-    const formData = new FormData()
-    formData.append('file', file)
-    formData.append('context', 'workspace-logos')
-    if (workspaceIdRef.current) {
-      formData.append('workspaceId', workspaceIdRef.current)
+    const targetWorkspaceId = workspaceIdRef.current
+    if (!targetWorkspaceId) {
+      throw new Error('workspaceId is required for workspace logo upload')
     }
 
-    // boundary-raw-fetch: multipart/form-data upload (FileUpload boundary), incompatible with requestJson which JSON-stringifies bodies
-    const response = await fetch('/api/files/upload', {
-      method: 'POST',
-      body: formData,
-    })
-
-    if (!response.ok) {
-      const errorData = await response.json().catch(() => ({ message: response.statusText }))
-      throw new Error(
-        errorData.message || errorData.error || `Failed to upload file: ${response.status}`
-      )
+    const presignedEndpoint = `/api/files/presigned?type=workspace-logos&workspaceId=${encodeURIComponent(targetWorkspaceId)}`
+
+    try {
+      const result = await runUploadStrategy({
+        file,
+        workspaceId: targetWorkspaceId,
+        context: 'workspace-logos',
+        presignedEndpoint,
+      })
+      logger.info(`Workspace logo uploaded successfully: ${result.path}`)
+      return result.path
+    } catch (error) {
+      if (error instanceof DirectUploadError && error.code === 'FALLBACK_REQUIRED') {
+        const publicUrl = await uploadViaApiFallback(file, targetWorkspaceId)
+        logger.info(`Workspace logo uploaded via API fallback: ${publicUrl}`)
+        return publicUrl
+      }
+      throw error
     }
-
-    const data = await response.json()
-    const publicUrl = data.fileInfo?.path || data.path || data.url
-    logger.info(`Workspace logo uploaded successfully: ${publicUrl}`)
-    return publicUrl
   }, [])
 
   const processFile = useCallback(
diff --git a/apps/sim/lib/api/contracts/storage-transfer.ts b/apps/sim/lib/api/contracts/storage-transfer.ts
@@ -322,6 +322,7 @@ export const validUploadTypes = [
   'copilot',
   'profile-pictures',
   'mothership',
+  'workspace-logos',
 ] as const
 
 export const uploadTypeSchema = z.enum(validUploadTypes)
diff --git a/apps/sim/lib/uploads/client/direct-upload.ts b/apps/sim/lib/uploads/client/direct-upload.ts
@@ -303,7 +303,7 @@ const uploadViaPresignedPut = (opts: UploadViaPutOptions): Promise<void> => {
 interface MultipartUploadOptions {
   file: File
   workspaceId: string
-  context: 'workspace' | 'knowledge-base' | 'mothership'
+  context: 'workspace' | 'knowledge-base' | 'mothership' | 'profile-pictures' | 'workspace-logos'
   signal?: AbortSignal
   onProgress?: (event: UploadProgressEvent) => void
 }
@@ -517,7 +517,7 @@ const uploadViaMultipart = async (
 export interface RunUploadStrategyOptions {
   file: File
   workspaceId: string
-  context: 'workspace' | 'knowledge-base' | 'mothership'
+  context: 'workspace' | 'knowledge-base' | 'mothership' | 'profile-pictures' | 'workspace-logos'
   /** Endpoint to mint a presigned PUT URL. Required unless `presignedOverride` is provided. */
   presignedEndpoint?: string
   /** Pre-fetched presigned data (e.g. from a batch endpoint). Skips per-file fetch. */
