yashwin/Qassure-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add regex-based fileId extraction to AuthenticatedImage to support direct backend preview URLs

Browse Source
This commit is contained in:
Yashwin 2026-05-11 17:33:53 +05:30
parent d36c34aa9f
commit f87f552d52
1 changed files with 12 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/shared/AuthenticatedImage.tsx
View File

@ -29,7 +29,15 @@ export const AuthenticatedImage = ({
alt = "Image",
...props
}: AuthenticatedImageProps): ReactElement => {
const cacheKey = fileId || src;
// Helper to extract fileId from backend preview URL
const extractFileIdFromUrl = (url: string | null | undefined): string | null => {
if (!url) return null;
const match = url.match(/\/files\/([a-f0-9-]{36})\/preview/i);
return match ? match[1] : null;
};
const extractedFileId = fileId || extractFileIdFromUrl(src);
const cacheKey = extractedFileId || src;
// 1. Initialize state from cache immediately to prevent blank flash or redundant requests on remount
const [blobUrl, setBlobUrl] = useState<string | null>(() => {
@ -65,7 +73,7 @@ export const AuthenticatedImage = ({
};
const isBackendUrl = getIsBackendUrl(src);
const isAuthRequired = !!(fileId || isBackendUrl);
const isAuthRequired = !!(extractedFileId || isBackendUrl);
useEffect(() => {
// If it's already a blob URL (local preview) or a data URL, use it directly
@ -100,8 +108,8 @@ export const AuthenticatedImage = ({
try {
const fetchPromise = (async () => {
let url: string;
if (fileId) {
url = await fileService.getPreview(fileId);
if (extractedFileId) {
url = await fileService.getPreview(extractedFileId);
} else {
// If useBackendUrl is true, src is guaranteed to be non-null
const response = await apiClient.get(src!, {