chore: fix file url (#191)

appflowy · web-flow · commit 33a46b0f6e02 · 2025-12-04T13:14:39.000+08:00
* chore: fix file url

* chore: fix test

* fix: test

* fix: test
diff --git a/src/application/services/js-services/http/__tests__/setup.ts b/src/application/services/js-services/http/__tests__/setup.ts
@@ -89,8 +89,11 @@ jest.mock('@/utils/runtime-config', () => ({
 }));
 
 jest.mock('@/utils/file-storage-url', () => ({
-    getFileStorageUrl: jest.fn((url: string) => url),
-    getFileUploadUrl: jest.fn((url: string) => url),
+    getAppFlowyFileUrl: jest.fn((workspaceId: string, viewId: string, fileId: string) => `mock://${workspaceId}/${viewId}/${fileId}`),
+    getAppFlowyFileUploadUrl: jest.fn((workspaceId: string, viewId: string) => `mock://${workspaceId}/${viewId}/upload`),
+    resolveFileUrl: jest.fn((urlOrId: string) => urlOrId),
+    isFileURL: jest.fn(() => true),
+    isAppFlowyFileStorageUrl: jest.fn(() => true),
 }));
 
 // Mock the session/token module (not @/application/session!)
@@ -188,7 +191,7 @@ export class AuthHelper {
                 refreshToken,
                 user,
             };
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
         } catch (error: any) {
             // If signup fails (user exists), try to sign in
             if (error.response?.status === 422 || error.response?.status === 400) {
diff --git a/src/application/services/js-services/http/http_api.ts b/src/application/services/js-services/http/http_api.ts
@@ -4,7 +4,6 @@ import { omit } from 'lodash-es';
 import { nanoid } from 'nanoid';
 
 import { GlobalComment, Reaction } from '@/application/comment.type';
-import { Log } from '@/utils/log';
 import { ERROR_CODE } from '@/application/constants';
 import { initGrantService, refreshToken } from '@/application/services/js-services/http/gotrue';
 import { parseGoTrueErrorFromUrl } from '@/application/services/js-services/http/gotrue-error';
@@ -66,7 +65,8 @@ import {
 } from '@/application/types';
 import { notify } from '@/components/_shared/notify';
 import { RepeatedChatMessage } from '@/components/chat';
-import { getFileUploadUrl, getFileUrl } from '@/utils/file-storage-url';
+import { getAppFlowyFileUploadUrl, getAppFlowyFileUrl } from '@/utils/file-storage-url';
+import { Log } from '@/utils/log';
 
 export * from './gotrue';
 
@@ -1552,7 +1552,7 @@ export async function uploadFile(
   file: File,
   onProgress?: (progress: number) => void
 ) {
-  const url = getFileUploadUrl(workspaceId, viewId);
+  const url = getAppFlowyFileUploadUrl(workspaceId, viewId);
 
   // Check file size, if over 7MB, check subscription plan
   if (file.size > 7 * 1024 * 1024) {
@@ -1587,7 +1587,7 @@ export async function uploadFile(
     });
 
     if (response?.data.code === 0) {
-      return getFileUrl(workspaceId, viewId, response?.data.data.file_id);
+      return getAppFlowyFileUrl(workspaceId, viewId, response?.data.data.file_id);
     }
 
     return Promise.reject(response?.data);
diff --git a/src/components/_shared/gallery-preview/GalleryPreview.tsx b/src/components/_shared/gallery-preview/GalleryPreview.tsx
@@ -12,7 +12,7 @@ import { ReactComponent as ReloadIcon } from '@/assets/icons/reset.svg';
 import { ReactComponent as DownloadIcon } from '@/assets/icons/save_as.svg';
 import { notify } from '@/components/_shared/notify';
 import { copyTextToClipboard } from '@/utils/copy';
-import { getFileUrl, isFileURL } from '@/utils/file-storage-url';
+import { resolveFileUrl } from '@/utils/file-storage-url';
 
 export interface GalleryImage {
   src: string;
@@ -96,13 +96,7 @@ function GalleryPreview({ images, open, onClose, previewIndex, workspaceId, view
   }, [handleKeydown]);
 
   const imageUrl = useMemo(() => {
-    if (isFileURL(images[index].src)) {
-      return images[index].src;
-    }
-
-    const fileId = images[index].src;
-
-    return getFileUrl(workspaceId, viewId, fileId);
+    return resolveFileUrl(images[index].src, workspaceId, viewId);
   }, [images, index, workspaceId, viewId]);
 
   if (!open) {
diff --git a/src/components/_shared/hooks/useAuthenticatedImage.ts b/src/components/_shared/hooks/useAuthenticatedImage.ts
@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 
 import { getImageUrl, revokeBlobUrl } from '@/utils/authenticated-image';
+import { Log } from '@/utils/log';
 
 /**
  * Hook to handle authenticated image loading for AppFlowy file storage URLs
@@ -21,6 +22,7 @@ export function useAuthenticatedImage(src: string | undefined): string {
 
         let isMounted = true;
 
+        Log.debug('[useAuthenticatedImage] src', src);
         getImageUrl(src)
             .then((url) => {
                 if (isMounted) {
diff --git a/src/components/database/components/cell/file-media/PreviewImage.tsx b/src/components/database/components/cell/file-media/PreviewImage.tsx
@@ -3,18 +3,15 @@ import { useMemo } from 'react';
 import { useDatabaseContext } from '@/application/database-yjs';
 import { FileMediaCellDataItem } from '@/application/database-yjs/cell.type';
 import { useAuthenticatedImage } from '@/components/_shared/hooks/useAuthenticatedImage';
-import { getFileUrl, isFileURL } from '@/utils/file-storage-url';
+import { resolveFileUrl } from '@/utils/file-storage-url';
 
 function PreviewImage({ file, onClick }: { file: FileMediaCellDataItem; onClick: () => void }) {
   const { workspaceId, databasePageId } = useDatabaseContext();
 
   const thumb = useMemo(() => {
-    let fileUrl = file.url;
+    const fileUrl = resolveFileUrl(file.url, workspaceId, databasePageId);
 
     if (!fileUrl) return '';
-    if (!isFileURL(fileUrl)) {
-      fileUrl = getFileUrl(workspaceId, databasePageId, file.url);
-    }
 
     const url = new URL(fileUrl);
 
diff --git a/src/components/database/components/cell/file-media/UnPreviewFile.tsx b/src/components/database/components/cell/file-media/UnPreviewFile.tsx
@@ -4,7 +4,7 @@ import { FileMediaCellDataItem } from '@/application/database-yjs/cell.type';
 import FileIcon from '@/components/database/components/cell/file-media/FileIcon';
 import { Button } from '@/components/ui/button';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
-import { getFileUrl, isFileURL } from '@/utils/file-storage-url';
+import { resolveFileUrl } from '@/utils/file-storage-url';
 import { openUrl } from '@/utils/url';
 
 function UnPreviewFile({ file }: { file: FileMediaCellDataItem }) {
@@ -19,15 +19,11 @@ function UnPreviewFile({ file }: { file: FileMediaCellDataItem }) {
           className={'cursor-pointer rounded-[4px] bg-fill-content-hover text-icon-secondary'}
           onClick={(e) => {
             e.stopPropagation();
-            if (file.url && isFileURL(file.url)) {
-              void openUrl(file.url, '_blank');
-              return;
-            }
-
-            const fileId = file.url;
-            const newUrl = getFileUrl(workspaceId, databasePageId, fileId);
+            const newUrl = resolveFileUrl(file.url, workspaceId, databasePageId);
 
-            void openUrl(newUrl, '_blank');
+            if (newUrl) {
+              void openUrl(newUrl, '_blank');
+            }
           }}
         >
           <FileIcon fileType={file.file_type} />
diff --git a/src/components/database/components/database-row/file-media/FileMediaItem.tsx b/src/components/database/components/database-row/file-media/FileMediaItem.tsx
@@ -7,7 +7,7 @@ import FileIcon from '@/components/database/components/cell/file-media/FileIcon'
 import FileMediaMore from '@/components/database/components/cell/file-media/FileMediaMore';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { cn } from '@/lib/utils';
-import { getFileUrl, isFileURL } from '@/utils/file-storage-url';
+import { resolveFileUrl } from '@/utils/file-storage-url';
 import { openUrl } from '@/utils/url';
 
 function FileMediaItem({
@@ -48,13 +48,7 @@ function FileMediaItem({
   }, [file.file_type]);
 
   const fileUrl = useMemo(() => {
-    if (file.url && isFileURL(file.url)) {
-      return file.url;
-    }
-
-    const fileId = file.url;
-
-    return getFileUrl(workspaceId, databasePageId, fileId);
+    return resolveFileUrl(file.url, workspaceId, databasePageId);
   }, [file.url, workspaceId, databasePageId]);
 
   const authenticatedFileUrl = useAuthenticatedImage(fileUrl);
@@ -67,15 +61,11 @@ function FileMediaItem({
         e.stopPropagation();
         // Open the file in a new tab
         if (file.file_type !== FileMediaType.Image) {
-          if (file.url && isFileURL(file.url)) {
-            void openUrl(file.url, '_blank');
-            return;
-          }
-
-          const fileId = file.url;
-          const newUrl = getFileUrl(workspaceId, databasePageId, fileId);
+          const newUrl = resolveFileUrl(file.url, workspaceId, databasePageId);
 
-          void openUrl(newUrl, '_blank');
+          if (newUrl) {
+            void openUrl(newUrl, '_blank');
+          }
         }
       }}
       onMouseEnter={() => setHover(true)}
diff --git a/src/components/editor/components/blocks/gallery/GalleryBlock.tsx b/src/components/editor/components/blocks/gallery/GalleryBlock.tsx
@@ -12,7 +12,7 @@ import ImageGallery from '@/components/editor/components/blocks/gallery/ImageGal
 import { EditorElementProps, GalleryBlockNode } from '@/components/editor/editor.type';
 import { useEditorContext } from '@/components/editor/EditorContext';
 import { copyTextToClipboard } from '@/utils/copy';
-import { getFileUrl, isFileURL } from '@/utils/file-storage-url';
+import { resolveFileUrl } from '@/utils/file-storage-url';
 
 const GalleryBlock = memo(
   forwardRef<HTMLDivElement, EditorElementProps<GalleryBlockNode>>(({ node, children, ...attributes }, ref) => {
@@ -32,12 +32,9 @@ const GalleryBlock = memo(
     const photos = useMemo(() => {
       return images
         .map((image) => {
-          let imageUrl = image.url;
+          const imageUrl = resolveFileUrl(image.url, workspaceId, viewId);
 
           if (!imageUrl) return null;
-          if (!isFileURL(image.url)) {
-            imageUrl = getFileUrl(workspaceId, viewId, image.url);
-          }
 
           const url = new URL(imageUrl);
 
diff --git a/src/components/editor/components/blocks/image/ImageRender.tsx b/src/components/editor/components/blocks/image/ImageRender.tsx
@@ -9,6 +9,7 @@ import ImageResizer from '@/components/editor/components/blocks/image/ImageResiz
 import ImageToolbar from '@/components/editor/components/blocks/image/ImageToolbar';
 import Img from '@/components/editor/components/blocks/image/Img';
 import { ImageBlockNode } from '@/components/editor/editor.type';
+import { Log } from '@/utils/log';
 
 
 const MIN_WIDTH = 100;
@@ -30,11 +31,13 @@ function ImageRender({
 
   const { width: imageWidth } = useMemo(() => node.data || {}, [node.data]);
   const url = node.data.url || localUrl;
+
+  Log.debug('[ImageRender] url', { url, localUrl, node: node.data });
   const [initialWidth, setInitialWidth] = useState<number | null>(null);
   const [newWidth, setNewWidth] = useState<number | null>(imageWidth ?? null);
 
   useEffect(() => {
-    if(rendered && initialWidth === null && imgRef.current) {
+    if (rendered && initialWidth === null && imgRef.current) {
       setInitialWidth(imgRef.current.offsetWidth);
     }
   }, [initialWidth, rendered]);
@@ -55,7 +58,7 @@ function ImageRender({
     [debounceSubmitWidth],
   );
 
-  if(!url) return null;
+  if (!url) return null;
 
   return (
     <div
diff --git a/src/components/editor/utils/file-url.ts b/src/components/editor/utils/file-url.ts
@@ -1,4 +1,4 @@
-import { getFileUrl, isFileURL } from '@/utils/file-storage-url';
+import { resolveFileUrl } from '@/utils/file-storage-url';
 
 /**
  * Constructs the appropriate URL for file/image blocks
@@ -23,20 +23,5 @@ export function constructFileUrl(
     return '';
   }
 
-  // Case 1: Already a full URL (http/https)
-  // This is the format returned by uploadFile() function
-  if (isFileURL(dataUrl)) {
-    return dataUrl;
-  }
-
-  const fileId = dataUrl;
-
-  if (viewId) {
-    return getFileUrl(workspaceId, viewId, fileId);
-  }
-
-  // Fallback without viewId - this will likely fail to load
-  console.error('File URL construction: viewId not available, file may not load correctly', { fileId });
-  // Use empty string as viewId fallback, though this may not work
-  return getFileUrl(workspaceId, '', fileId);
+  return resolveFileUrl(dataUrl, workspaceId, viewId || '');
 }
diff --git a/src/components/ui/avatar.tsx b/src/components/ui/avatar.tsx
@@ -4,6 +4,7 @@ import * as React from 'react';
 
 import { cn } from '@/lib/utils';
 import { getImageUrl, revokeBlobUrl } from '@/utils/authenticated-image';
+import { Log } from '@/utils/log';
 
 const avatarVariants = cva('relative flex aspect-square shrink-0 overflow-hidden', {
   variants: {
@@ -67,6 +68,7 @@ function AvatarImage({ className, src, ...props }: React.ComponentProps<typeof A
 
     setIsLoading(true);
 
+    Log.debug('[AvatarImage] src', src);
     getImageUrl(src)
       .then((url) => {
         if (isMounted) {
diff --git a/src/utils/__tests__/file-storage-url.test.ts b/src/utils/__tests__/file-storage-url.test.ts
@@ -0,0 +1,92 @@
+import { afterEach, beforeEach, describe, expect, it, jest } from '@jest/globals';
+
+// Mock the runtime-config module BEFORE importing the module that uses it.
+// This prevents the "import.meta" syntax error because the actual file is never loaded.
+jest.mock('@/utils/runtime-config', () => ({
+    getConfigValue: jest.fn(),
+}));
+
+// Import the module under test
+import { isAppFlowyFileStorageUrl, resolveFileUrl } from '../file-storage-url';
+// Import the mocked module to access the mock function
+import { getConfigValue } from '@/utils/runtime-config';
+
+describe('file-storage-url utils', () => {
+    const mockBaseUrl = 'https://app.flowy.io';
+    const mockWorkspaceId = 'workspace-123';
+    const mockViewId = 'view-456';
+    const mockFileId = 'file-789';
+
+    // Cast the imported function to a Jest mock to access mock methods
+    const mockGetConfigValue = getConfigValue as jest.MockedFunction<typeof getConfigValue>;
+
+    beforeEach(() => {
+        // Default mock implementation
+        mockGetConfigValue.mockImplementation((key: string) => {
+            if (key === 'APPFLOWY_BASE_URL') return mockBaseUrl;
+            return '';
+        });
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    describe('resolveFileUrl', () => {
+        it('should return empty string for undefined/null/empty input', () => {
+            expect(resolveFileUrl(undefined, mockWorkspaceId, mockViewId)).toBe('');
+            expect(resolveFileUrl('', mockWorkspaceId, mockViewId)).toBe('');
+        });
+
+        it('should return the URL as-is if it is already a full URL', () => {
+            const fullUrl = 'https://example.com/image.png';
+            expect(resolveFileUrl(fullUrl, mockWorkspaceId, mockViewId)).toBe(fullUrl);
+        });
+
+        it('should return the URL as-is if it is a local full URL', () => {
+            const fullUrl = 'http://localhost:8000/api/file_storage/test.png';
+            expect(resolveFileUrl(fullUrl, mockWorkspaceId, mockViewId)).toBe(fullUrl);
+        });
+
+        it('should construct a full AppFlowy file storage URL when given a file ID', () => {
+            // When input is just an ID like "file-789"
+            // It should construct: BASE_URL/api/file_storage/WORKSPACE_ID/v1/blob/VIEW_ID/FILE_ID
+            const expectedUrl = `${mockBaseUrl}/api/file_storage/${mockWorkspaceId}/v1/blob/${mockViewId}/${mockFileId}`;
+            expect(resolveFileUrl(mockFileId, mockWorkspaceId, mockViewId)).toBe(expectedUrl);
+        });
+
+        it('should handle cases where isFileURL returns true but it is not a standard http URL', () => {
+            // This tests the behavior of isFileURL internal check. 
+            // If isFileURL returns true, resolveFileUrl returns input as is.
+            // Assuming "ftp://example.com/file" is considered a URL by the validator
+            const ftpUrl = 'ftp://example.com/file';
+            expect(resolveFileUrl(ftpUrl, mockWorkspaceId, mockViewId)).toBe(ftpUrl);
+        });
+    });
+
+    describe('isAppFlowyFileStorageUrl', () => {
+        it('should return true for URLs matching the configured AppFlowy base path', () => {
+            const url = `${mockBaseUrl}/api/file_storage/some/path`;
+            expect(isAppFlowyFileStorageUrl(url)).toBe(true);
+        });
+
+        it('should return true for relative paths matching the file storage path (when origin matches)', () => {
+            // Note: The implementation of resolveAppflowyOriginAndPathname uses window.location if base url is empty,
+            // or parses the configured base url. Since we mocked base url to https://app.flowy.io:
+
+            // Test matching origin and path
+            const url = `${mockBaseUrl}/api/file_storage/file-id`;
+            expect(isAppFlowyFileStorageUrl(url)).toBe(true);
+        });
+
+        it('should return false for URLs not matching the file storage path', () => {
+            const url = `${mockBaseUrl}/api/other_endpoint`;
+            expect(isAppFlowyFileStorageUrl(url)).toBe(false);
+        });
+
+        it('should return false for external URLs that do not match the path', () => {
+            const url = 'https://google.com/search';
+            expect(isAppFlowyFileStorageUrl(url)).toBe(false);
+        });
+    });
+});
diff --git a/src/utils/authenticated-image.ts b/src/utils/authenticated-image.ts
diff --git a/src/utils/file-storage-url.ts b/src/utils/file-storage-url.ts
diff --git a/src/utils/image.ts b/src/utils/image.ts
