Always set url to /file on file view

Author: Theodore Li

apps/sim/app/api/workspaces/[id]/files/[fileId]/download/route.ts

@@ -42,7 +42,7 @@ export async function POST(
 
     const { getBaseUrl } = await import('@/lib/core/utils/urls')
     const serveUrl = `${getBaseUrl()}/api/files/serve/${encodeURIComponent(fileRecord.key)}?context=workspace`
-    const viewerUrl = `${getBaseUrl()}/workspace/${workspaceId}/files/${fileId}/view`
+    const viewerUrl = `${getBaseUrl()}/workspace/${workspaceId}/files/${fileId}`
 
     logger.info(`[${requestId}] Generated download URL for workspace file: ${fileRecord.name}`)
 

apps/sim/app/workspace/[workspaceId]/files/[fileId]/page.tsx

@@ -0,0 +1,39 @@
+import type { Metadata } from 'next'
+import { redirect } from 'next/navigation'
+import { getSession } from '@/lib/auth'
+import { verifyWorkspaceMembership } from '@/app/api/workflows/utils'
+import { getUserPermissionConfig } from '@/ee/access-control/utils/permission-check'
+import { Files } from '../files'
+
+export const metadata: Metadata = {
+  title: 'Files',
+  robots: { index: false },
+}
+
+interface FileDetailPageProps {
+  params: Promise<{
+    workspaceId: string
+    fileId: string
+  }>
+}
+
+export default async function FileDetailPage({ params }: FileDetailPageProps) {
+  const { workspaceId } = await params
+  const session = await getSession()
+
+  if (!session?.user?.id) {
+    redirect('/')
+  }
+
+  const hasPermission = await verifyWorkspaceMembership(session.user.id, workspaceId)
+  if (!hasPermission) {
+    redirect('/')
+  }
+
+  const permissionConfig = await getUserPermissionConfig(session.user.id)
+  if (permissionConfig?.hideFilesTab) {
+    redirect(`/workspace/${workspaceId}`)
+  }
+
+  return <Files />
+}

apps/sim/app/workspace/[workspaceId]/files/files.tsx

@@ -2,7 +2,7 @@
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
-import { useParams } from 'next/navigation'
+import { useParams, useRouter } from 'next/navigation'
 import {
   Button,
   Columns2,
@@ -123,7 +123,10 @@ export function Files() {
   const saveRef = useRef<(() => Promise<void>) | null>(null)
 
   const params = useParams()
+  const router = useRouter()
   const workspaceId = params?.workspaceId as string
+  const fileIdFromRoute =
+    typeof params?.fileId === 'string' && params.fileId.length > 0 ? params.fileId : null
   const userPermissions = useUserPermissionsContext()
 
   const { data: files = [], isLoading, error } = useWorkspaceFiles(workspaceId)
@@ -157,7 +160,6 @@ export function Files() {
   const [uploading, setUploading] = useState(false)
   const [uploadProgress, setUploadProgress] = useState({ completed: 0, total: 0 })
   const [searchTerm, setSearchTerm] = useState('')
-  const [selectedFileId, setSelectedFileId] = useState<string | null>(null)
   const [creatingFile, setCreatingFile] = useState(false)
   const [isDirty, setIsDirty] = useState(false)
   const [saveStatus, setSaveStatus] = useState<SaveStatus>('idle')
@@ -178,8 +180,8 @@ export function Files() {
   })
 
   const selectedFile = useMemo(
-    () => (selectedFileId ? files.find((f) => f.id === selectedFileId) : null),
-    [selectedFileId, files]
+    () => (fileIdFromRoute ? files.find((f) => f.id === fileIdFromRoute) : null),
+    [fileIdFromRoute, files]
   )
 
   const filteredFiles = useMemo(() => {
@@ -297,15 +299,15 @@ export function Files() {
       })
       setShowDeleteConfirm(false)
       setDeleteTargetFile(null)
-      if (selectedFileId === target.id) {
+      if (fileIdFromRoute === target.id) {
         setIsDirty(false)
         setSaveStatus('idle')
-        setSelectedFileId(null)
+        router.push(`/workspace/${workspaceId}/files`)
       }
     } catch (err) {
       logger.error('Failed to delete file:', err)
     }
-  }, [deleteTargetFile, workspaceId, selectedFileId])
+  }, [deleteTargetFile, workspaceId, fileIdFromRoute, router])
 
   const handleSave = useCallback(async () => {
     if (!saveRef.current || !isDirty || saveStatus === 'saving') return
@@ -317,9 +319,9 @@ export function Files() {
       setShowUnsavedChangesAlert(true)
     } else {
       setPreviewMode('editor')
-      setSelectedFileId(null)
+      router.push(`/workspace/${workspaceId}/files`)
     }
-  }, [isDirty])
+  }, [isDirty, router, workspaceId])
 
   const handleStartHeaderRename = useCallback(() => {
     if (selectedFile) headerRename.startRename(selectedFile.id, selectedFile.name)
@@ -391,8 +393,8 @@ export function Files() {
     setIsDirty(false)
     setSaveStatus('idle')
     setPreviewMode('editor')
-    setSelectedFileId(null)
-  }, [])
+    router.push(`/workspace/${workspaceId}/files`)
+  }, [router, workspaceId])
 
   const handleCreateFile = useCallback(async () => {
     if (creatingFile) return
@@ -414,14 +416,14 @@ export function Files() {
       const fileId = result.file?.id
       if (fileId) {
         justCreatedFileIdRef.current = fileId
-        setSelectedFileId(fileId)
+        router.push(`/workspace/${workspaceId}/files/${fileId}`)
       }
     } catch (err) {
       logger.error('Failed to create file:', err)
     } finally {
       setCreatingFile(false)
     }
-  }, [creatingFile, files, workspaceId])
+  }, [creatingFile, files, workspaceId, router])
 
   const handleRowContextMenu = useCallback(
     (e: React.MouseEvent, rowId: string) => {
@@ -436,9 +438,9 @@ export function Files() {
 
   const handleContextMenuOpen = useCallback(() => {
     if (!contextMenuFile) return
-    setSelectedFileId(contextMenuFile.id)
+    router.push(`/workspace/${workspaceId}/files/${contextMenuFile.id}`)
     closeContextMenu()
-  }, [contextMenuFile, closeContextMenu])
+  }, [contextMenuFile, closeContextMenu, router, workspaceId])
 
   const handleContextMenuDownload = useCallback(() => {
     if (!contextMenuFile) return
@@ -478,18 +480,19 @@ export function Files() {
   }, [closeListContextMenu])
 
   useEffect(() => {
-    const isJustCreated = selectedFileId != null && justCreatedFileIdRef.current === selectedFileId
+    const isJustCreated =
+      fileIdFromRoute != null && justCreatedFileIdRef.current === fileIdFromRoute
     if (justCreatedFileIdRef.current && !isJustCreated) {
       justCreatedFileIdRef.current = null
     }
     if (isJustCreated) {
       setPreviewMode('editor')
     } else {
-      const file = selectedFileId ? filesRef.current.find((f) => f.id === selectedFileId) : null
+      const file = fileIdFromRoute ? filesRef.current.find((f) => f.id === fileIdFromRoute) : null
       const canPreview = file ? isPreviewable(file) : false
       setPreviewMode(canPreview ? 'preview' : 'editor')
     }
-  }, [selectedFileId])
+  }, [fileIdFromRoute])
 
   useEffect(() => {
     if (!selectedFile) return
@@ -597,13 +600,16 @@ export function Files() {
     handleDeleteSelected,
   ])
 
-  if (selectedFileId && !selectedFile) {
+  if (fileIdFromRoute && !selectedFile) {
     return (
       <div className='flex h-full flex-1 flex-col overflow-hidden bg-[var(--bg)]'>
         <ResourceHeader
           icon={FilesIcon}
           breadcrumbs={[
-            { label: 'Files', onClick: () => setSelectedFileId(null) },
+            {
+              label: 'Files',
+              onClick: () => router.push(`/workspace/${workspaceId}/files`),
+            },
             { label: '...' },
           ]}
         />
@@ -699,7 +705,9 @@ export function Files() {
         columns={COLUMNS}
         rows={rows}
         onRowClick={(id) => {
-          if (listRename.editingId !== id && !headerRename.editingId) setSelectedFileId(id)
+          if (listRename.editingId !== id && !headerRename.editingId) {
+            router.push(`/workspace/${workspaceId}/files/${id}`)
+          }
         }}
         onRowContextMenu={handleRowContextMenu}
         isLoading={isLoading}

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx

@@ -299,7 +299,7 @@ function EmbeddedFileActions({ workspaceId, fileId }: EmbeddedFileActionsProps)
   }, [file])
 
   const handleOpenInFiles = useCallback(() => {
-    router.push(`/workspace/${workspaceId}/files?fileId=${encodeURIComponent(fileId)}`)
+    router.push(`/workspace/${workspaceId}/files/${encodeURIComponent(fileId)}`)
   }, [router, workspaceId, fileId])
 
   return (

apps/sim/lib/uploads/utils/file-utils.ts

@@ -736,7 +736,7 @@ export function extractWorkspaceIdFromExecutionKey(key: string): string | null {
 
 /**
  * Construct viewer URL for a file
- * Viewer URL format: /workspace/{workspaceId}/files/{fileKey}/view
+ * Viewer URL format: /workspace/{workspaceId}/files/{fileKey}
  * @param fileKey File storage key
  * @param workspaceId Optional workspace ID (will be extracted from key if not provided)
  * @returns Viewer URL string or null if workspaceId cannot be determined
@@ -748,7 +748,7 @@ export function getViewerUrl(fileKey: string, workspaceId?: string): string | nu
     return null
   }
 
-  return `/workspace/${resolvedWorkspaceId}/files/${fileKey}/view`
+  return `/workspace/${resolvedWorkspaceId}/files/${fileKey}`
 }
 
 /**