From 1604913877f97eb083e2e857848a420eddb87c3d Mon Sep 17 00:00:00 2001 From: Huu Le <20178761+huult@users.noreply.github.com> Date: Fri, 1 Nov 2024 20:29:10 +0700 Subject: [PATCH 1/2] fix image not displayed when tapped on search page --- src/CONST.ts | 1 + src/ROUTES.ts | 6 ++++-- .../HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx | 8 +++++++- src/libs/Navigation/types.ts | 1 + src/pages/home/report/ReportAttachments.tsx | 2 ++ 5 files changed, 15 insertions(+), 3 deletions(-) diff --git a/src/CONST.ts b/src/CONST.ts index e793ea70cfc8..0cc426eba250 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -192,6 +192,7 @@ const CONST = { DEFAULT_TABLE_NAME: 'keyvaluepairs', DEFAULT_ONYX_DUMP_FILE_NAME: 'onyx-state.txt', DEFAULT_POLICY_ROOM_CHAT_TYPES: [chatTypes.POLICY_ADMINS, chatTypes.POLICY_ANNOUNCE, chatTypes.DOMAIN_ALL], + DEFAULT_IMAGE_FILE_NAME: 'image', DISABLED_MAX_EXPENSE_VALUE: 10000000000, POLICY_BILLABLE_MODES: { BILLABLE: 'billable', diff --git a/src/ROUTES.ts b/src/ROUTES.ts index 45501bf46374..6b3bbc05111c 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -310,11 +310,13 @@ const ROUTES = { }, ATTACHMENTS: { route: 'attachment', - getRoute: (reportID: string, type: ValueOf, url: string, accountID?: number, isAuthTokenRequired?: boolean) => { + getRoute: (reportID: string, type: ValueOf, url: string, accountID?: number, isAuthTokenRequired?: boolean, fileName?: string) => { const reportParam = reportID ? `&reportID=${reportID}` : ''; const accountParam = accountID ? `&accountID=${accountID}` : ''; const authTokenParam = isAuthTokenRequired ? '&isAuthTokenRequired=true' : ''; - return `attachment?source=${encodeURIComponent(url)}&type=${type}${reportParam}${accountParam}${authTokenParam}` as const; + const fileNameParam = fileName ? `&fileName=${fileName}` : ''; + + return `attachment?source=${encodeURIComponent(url)}&type=${type}${reportParam}${accountParam}${authTokenParam}${fileNameParam}` as const; }, }, REPORT_PARTICIPANTS: { diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx index 17fbe1656020..06512f04bb95 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx +++ b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx @@ -70,6 +70,12 @@ function ImageRenderer({tnode}: ImageRendererProps) { const [hasLoadFailed, setHasLoadFailed] = useState(true); const theme = useTheme(); + let fileName = htmlAttribs[CONST.ATTACHMENT_ORIGINAL_FILENAME_ATTRIBUTE] || FileUtils.getFileName(`${isAttachmentOrReceipt ? attachmentSourceAttribute : htmlAttribs.src}`); + const fileInfo = FileUtils.splitExtensionFromFileName(fileName); + if (!fileInfo.fileExtension) { + fileName = `${fileInfo.fileName || CONST.DEFAULT_IMAGE_FILE_NAME}.jpg`; + } + const thumbnailImageComponent = ( { diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts index 3eae46ac2855..07f2fac2e46a 100644 --- a/src/libs/Navigation/types.ts +++ b/src/libs/Navigation/types.ts @@ -1549,6 +1549,7 @@ type AuthScreensParamList = CentralPaneScreensParamList & type: ValueOf; accountID: string; isAuthTokenRequired?: string; + fileName?: string; }; [SCREENS.PROFILE_AVATAR]: { accountID: string; diff --git a/src/pages/home/report/ReportAttachments.tsx b/src/pages/home/report/ReportAttachments.tsx index d30d8e9aabc1..c4895de3fea5 100644 --- a/src/pages/home/report/ReportAttachments.tsx +++ b/src/pages/home/report/ReportAttachments.tsx @@ -20,6 +20,7 @@ function ReportAttachments({route}: ReportAttachmentsProps) { const isAuthTokenRequired = route.params.isAuthTokenRequired; const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID || -1}`); const [isLoadingApp] = useOnyx(ONYXKEYS.IS_LOADING_APP); + const fileName = route.params.fileName; // In native the imported images sources are of type number. Ref: https://reactnative.dev/docs/image#imagesource const source = Number(route.params.source) || route.params.source; @@ -48,6 +49,7 @@ function ReportAttachments({route}: ReportAttachmentsProps) { onCarouselAttachmentChange={onCarouselAttachmentChange} shouldShowNotFoundPage={!isLoadingApp && type !== CONST.ATTACHMENT_TYPE.SEARCH && !report?.reportID} isAuthTokenRequired={!!isAuthTokenRequired} + originalFileName={fileName ?? ''} /> ); } From 8fac4c0708802b1e44a716fbc876a462cae224b7 Mon Sep 17 00:00:00 2001 From: Huu Le <20178761+huult@users.noreply.github.com> Date: Sun, 3 Nov 2024 22:00:20 +0700 Subject: [PATCH 2/2] handle undefined fileName parameter in route params --- .../HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx | 2 +- src/pages/home/report/ReportAttachments.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx index 06512f04bb95..43177be408ff 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx +++ b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx @@ -73,7 +73,7 @@ function ImageRenderer({tnode}: ImageRendererProps) { let fileName = htmlAttribs[CONST.ATTACHMENT_ORIGINAL_FILENAME_ATTRIBUTE] || FileUtils.getFileName(`${isAttachmentOrReceipt ? attachmentSourceAttribute : htmlAttribs.src}`); const fileInfo = FileUtils.splitExtensionFromFileName(fileName); if (!fileInfo.fileExtension) { - fileName = `${fileInfo.fileName || CONST.DEFAULT_IMAGE_FILE_NAME}.jpg`; + fileName = `${fileInfo?.fileName || CONST.DEFAULT_IMAGE_FILE_NAME}.jpg`; } const thumbnailImageComponent = ( diff --git a/src/pages/home/report/ReportAttachments.tsx b/src/pages/home/report/ReportAttachments.tsx index c4895de3fea5..871d692b59a3 100644 --- a/src/pages/home/report/ReportAttachments.tsx +++ b/src/pages/home/report/ReportAttachments.tsx @@ -20,7 +20,7 @@ function ReportAttachments({route}: ReportAttachmentsProps) { const isAuthTokenRequired = route.params.isAuthTokenRequired; const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID || -1}`); const [isLoadingApp] = useOnyx(ONYXKEYS.IS_LOADING_APP); - const fileName = route.params.fileName; + const fileName = route.params?.fileName; // In native the imported images sources are of type number. Ref: https://reactnative.dev/docs/image#imagesource const source = Number(route.params.source) || route.params.source;