Add download option to show in context menu for attachments

src/CONST.js

@@ -399,6 +399,8 @@ const CONST = {
     },
 
     ATTACHMENT_SOURCE_ATTRIBUTE: 'data-expensify-source',
+    ATTACHMENT_PREVIEW_ATTRIBUTE: 'src',
+    ATTACHMENT_ORIGINAL_FILENAME_ATTRIBUTE: 'data-name',
 
     ATTACHMENT_PICKER_TYPE: {
         FILE: 'file',

src/libs/fileDownload/getAttachmentDetails.js

@@ -0,0 +1,37 @@
+import CONST from '../../CONST';
+import Config from '../../CONFIG';
+
+/**
+ * Extract the thumbnail URL, source URL and the original filename from the HTML.
+ * @param {String} html
+ * @returns {Object}
+ */
+const PREVIEW_SOURCE_REGEX = new RegExp(`${CONST.ATTACHMENT_PREVIEW_ATTRIBUTE}*=*"(.+?)"`, 'i');
+const SOURCE_REGEX = new RegExp(`${CONST.ATTACHMENT_SOURCE_ATTRIBUTE}*=*"(.+?)"`, 'i');
+const ORIGINAL_FILENAME_REGEX = new RegExp(`${CONST.ATTACHMENT_ORIGINAL_FILENAME_ATTRIBUTE}*=*"(.+?)"`, 'i');
+
+export default function getAttachmentName(html) {
+    if (!html) {
+        return {
+            previewSourceURL: null,
+            sourceURL: null,
+            originalFileName: null,
+        };
+    }
+    const previewSourceURL = html.match(PREVIEW_SOURCE_REGEX)[1].replace(
+        Config.EXPENSIFY.EXPENSIFY_URL,
+        Config.EXPENSIFY.URL_API_ROOT,
+    );
+    const sourceURL = html.match(SOURCE_REGEX)[1].replace(
+        Config.EXPENSIFY.EXPENSIFY_URL,
+        Config.EXPENSIFY.URL_API_ROOT,
+    );
+    const originalFileName = html.match(ORIGINAL_FILENAME_REGEX)[1];
+
+    // Update the image URL so the images can be accessed depending on the config environment
+    return {
+        previewSourceURL,
+        sourceURL,
+        originalFileName,
+    };
+}

src/pages/home/report/ContextMenu/ContextMenuActions.js

@@ -8,6 +8,9 @@ import * as ReportUtils from '../../../../libs/reportUtils';
 import ReportActionComposeFocusManager from '../../../../libs/ReportActionComposeFocusManager';
 import {hideContextMenu, showDeleteModal} from './ReportActionContextMenu';
 import CONST from '../../../../CONST';
+import getAttachmentDetails from '../../../../libs/fileDownload/getAttachmentDetails';
+import fileDownload from '../../../../libs/fileDownload';
+import addEncryptedAuthTokenToURL from '../../../../libs/addEncryptedAuthTokenToURL';
 
 /**
  * Gets the HTML version of the message in an action.
@@ -27,6 +30,28 @@ const CONTEXT_MENU_TYPES = {
 
 // A list of all the context actions in this menu.
 export default [
+    {
+        textTranslateKey: 'common.download',
+        icon: Expensicons.Download,
+        successTextTranslateKey: 'common.download',
+        successIcon: Expensicons.Download,
+        shouldShow: (type, reportAction) => {
+            const message = _.last(lodashGet(reportAction, 'message', [{}]));
+            const isAttachment = _.has(reportAction, 'isAttachment')
+                ? reportAction.isAttachment
+                : ReportUtils.isReportMessageAttachment(message);
+            return isAttachment && reportAction.reportActionID;
+        },
+        onPress: (closePopover, {reportAction}) => {
+            const message = _.last(lodashGet(reportAction, 'message', [{}]));
+            const html = lodashGet(message, 'html', '');
+            const attachmentDetails = getAttachmentDetails(html);
+            const {originalFileName} = attachmentDetails;
+            let {sourceURL} = attachmentDetails;
+            sourceURL = addEncryptedAuthTokenToURL(sourceURL);
+            fileDownload(sourceURL, originalFileName);
+        },
+    },
     {
         textTranslateKey: 'reportActionContextMenu.copyURLToClipboard',
         icon: Expensicons.Clipboard,