Merge pull request Expensify#6850 from mananjadhav/fix/filename-in-at…

…tachment-preview Show filename in attachment preview
Habben101 · Dec 21, 2021 · ca0fb43 · ca0fb43
2 parents 03a4a6d + 31f75a7
commit ca0fb43
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js
@@ -35,6 +35,9 @@ const propTypes = {
     /** Optional callback to fire when we want to do something after modal hide. */
     onModalHide: PropTypes.func,
 
+    /** Optional original filename when uploading */
+    originalFileName: PropTypes.string,
+
     /** A function as a child to pass modal launching methods to */
     children: PropTypes.func.isRequired,
 
@@ -50,6 +53,7 @@ const defaultProps = {
     isUploadingAttachment: false,
     sourceURL: null,
     onConfirm: null,
+    originalFileName: null,
     isAuthTokenRequired: false,
     onModalHide: () => {},
 };
@@ -144,6 +148,7 @@ class AttachmentModal extends PureComponent {
                         shouldShowDownloadButton={!this.props.isUploadingAttachment}
                         onDownloadButtonPress={() => fileDownload(sourceURL)}
                         onCloseButtonPress={() => this.setState({isModalOpen: false})}
+                        subtitle={this.props.originalFileName ? this.props.originalFileName : lodashGet(this.state, 'file.name', '')}
                     />
                     <View style={attachmentViewStyles}>
                         {this.state.sourceURL && (

diff --git a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js
@@ -216,6 +216,7 @@ function ImgRenderer(props) {
     //           control and thus require no authToken to verify access.
     //
     const isAttachment = Boolean(htmlAttribs['data-expensify-source']);
+    const originalFileName = htmlAttribs['data-name'];
     let previewSource = htmlAttribs.src;
     let source = isAttachment
         ? htmlAttribs['data-expensify-source']
@@ -233,9 +234,9 @@ function ImgRenderer(props) {
 
     return (
         <AttachmentModal
-            title="Attachment"
             sourceURL={source}
             isAuthTokenRequired={isAttachment}
+            originalFileName={originalFileName}
         >
             {({show}) => (
                 <TouchableOpacity

diff --git a/src/components/HeaderWithCloseButton.js b/src/components/HeaderWithCloseButton.js
@@ -16,6 +16,9 @@ const propTypes = {
     /** Title of the Header */
     title: PropTypes.string,
 
+    /** Subtitle of the header */
+    subtitle: PropTypes.string,
+
     /** Method to trigger when pressing download button of the header */
     onDownloadButtonPress: PropTypes.func,
 
@@ -74,6 +77,7 @@ const propTypes = {
 
 const defaultProps = {
     title: '',
+    subtitle: '',
     onDownloadButtonPress: () => {},
     onCloseButtonPress: () => {},
     onBackButtonPress: () => {},
@@ -117,7 +121,7 @@ const HeaderWithCloseButton = props => (
             )}
             <Header
                 title={props.title}
-                subtitle={props.stepCounter && props.shouldShowStepCounter ? props.translate('stepCounter', props.stepCounter) : ''}
+                subtitle={props.stepCounter && props.shouldShowStepCounter ? props.translate('stepCounter', props.stepCounter) : props.subtitle}
             />
             <View style={[styles.reportOptions, styles.flexRow, styles.pr5]}>
                 {