Merge pull request #51855 from huult/51161-image-display-on-search-tap

fix image not displayed when tapped on search page
Expensify · Nov 12, 2024 · 0af94cc · 0af94cc
2 parents 058b3af + 8fac4c0
commit 0af94cc
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 3 deletions.
diff --git a/src/CONST.ts b/src/CONST.ts
@@ -297,6 +297,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
@@ -310,11 +310,13 @@ const ROUTES = {
     },
     ATTACHMENTS: {
         route: 'attachment',
-        getRoute: (reportID: string, type: ValueOf<typeof CONST.ATTACHMENT_TYPE>, url: string, accountID?: number, isAuthTokenRequired?: boolean) => {
+        getRoute: (reportID: string, type: ValueOf<typeof CONST.ATTACHMENT_TYPE>, 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
@@ -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 = (
         <ThumbnailImage
             previewSourceURL={previewSource}
@@ -101,7 +107,7 @@ function ImageRenderer({tnode}: ImageRendererProps) {
                                     return;
                                 }
 
-                                const route = ROUTES.ATTACHMENTS?.getRoute(reportID ?? '-1', type, source, accountID, isAttachmentOrReceipt);
+                                const route = ROUTES.ATTACHMENTS?.getRoute(reportID ?? '-1', type, source, accountID, isAttachmentOrReceipt, fileName);
                                 Navigation.navigate(route);
                             }}
                             onLongPress={(event) => {

diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts
@@ -1552,6 +1552,7 @@ type AuthScreensParamList = CentralPaneScreensParamList &
             type: ValueOf<typeof CONST.ATTACHMENT_TYPE>;
             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
@@ -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 ?? ''}
         />
     );
 }