diff --git a/app/components/file_attachment_list/file_attachment.js b/app/components/file_attachment_list/file_attachment.js
index f97238d1b..73c82fac2 100644
--- a/app/components/file_attachment_list/file_attachment.js
+++ b/app/components/file_attachment_list/file_attachment.js
@@ -58,23 +58,29 @@ export default class FileAttachment extends PureComponent {
 
     renderFileInfo() {
         const {file, theme} = this.props;
+        const {data} = file;
         const style = getStyleSheet(theme);
 
-        if (!file.id) {
+        if (!data || !data.id) {
             return null;
         }
 
         return (
             <View style={style.attachmentContainer}>
                 <Text
-                    numberOfLines={4}
+                    numberOfLines={2}
+                    ellipsizeMode='tail'
                     style={style.fileName}
                 >
-                    {file.name.trim()}
+                    {file.caption.trim()}
                 </Text>
                 <View style={style.fileDownloadContainer}>
-                    <Text style={style.fileInfo}>
-                        {`${file.extension.toUpperCase()} ${Utils.getFormattedFileSize(file)}`}
+                    <Text
+                        numberOfLines={2}
+                        ellipsizeMode='tail'
+                        style={style.fileInfo}
+                    >
+                        {`${data.extension.toUpperCase()} ${Utils.getFormattedFileSize(data)}`}
                     </Text>
                 </View>
             </View>
@@ -89,21 +95,22 @@ export default class FileAttachment extends PureComponent {
             theme,
             navigator,
         } = this.props;
+        const {data} = file;
         const style = getStyleSheet(theme);
 
         let fileAttachmentComponent;
-        if (file.has_preview_image || file.loading || isGif(file)) {
+        if ((data && data.has_preview_image) || file.loading || isGif(data)) {
             fileAttachmentComponent = (
                 <TouchableOpacity onPress={this.handlePreviewPress}>
                     <FileAttachmentImage
-                        file={file}
+                        file={data || {}}
                         onCaptureRef={this.handleCaptureRef}
                         onCapturePreviewRef={this.handleCapturePreviewRef}
                         theme={theme}
                     />
                 </TouchableOpacity>
             );
-        } else if (isDocument(file)) {
+        } else if (isDocument(data)) {
             fileAttachmentComponent = (
                 <FileAttachmentDocument
                     file={file}
@@ -115,7 +122,7 @@ export default class FileAttachment extends PureComponent {
             fileAttachmentComponent = (
                 <TouchableOpacity onPress={this.handlePreviewPress}>
                     <FileAttachmentIcon
-                        file={file}
+                        file={data}
                         onCaptureRef={this.handleCaptureRef}
                         onCapturePreviewRef={this.handleCapturePreviewRef}
                         theme={theme}
diff --git a/app/components/file_attachment_list/file_attachment_document.js b/app/components/file_attachment_list/file_attachment_document.js
index 49a2af9c9..dd52660ae 100644
--- a/app/components/file_attachment_list/file_attachment_document.js
+++ b/app/components/file_attachment_list/file_attachment_document.js
@@ -100,7 +100,8 @@ export default class FileAttachmentDocument extends PureComponent {
     };
 
     downloadAndPreviewFile = async (file) => {
-        const path = `${DOCUMENTS_PATH}/${file.name}`;
+        const {data} = file;
+        const path = `${DOCUMENTS_PATH}/${data.id}-${file.caption}`;
 
         this.setState({didCancel: false});
 
@@ -116,14 +117,14 @@ export default class FileAttachmentDocument extends PureComponent {
             }
 
             const options = {
-                session: file.id,
+                session: data.id,
                 timeout: 10000,
                 indicator: true,
                 overwrite: true,
                 path,
             };
 
-            const mime = file.mime_type.split(';')[0];
+            const mime = data.mime_type.split(';')[0];
             let openDocument = this.openDocument;
             if (TEXT_PREVIEW_FORMATS.includes(mime)) {
                 openDocument = this.previewTextFile;
@@ -134,7 +135,7 @@ export default class FileAttachmentDocument extends PureComponent {
                 openDocument(file, 0);
             } else {
                 this.setState({downloading: true});
-                this.downloadTask = RNFetchBlob.config(options).fetch('GET', getFileUrl(file.id));
+                this.downloadTask = RNFetchBlob.config(options).fetch('GET', getFileUrl(data.id));
                 this.downloadTask.progress((received, total) => {
                     const progress = (received / total) * 100;
                     if (this.mounted) {
@@ -179,15 +180,16 @@ export default class FileAttachmentDocument extends PureComponent {
 
     previewTextFile = (file, delay = 2000) => {
         const {navigator, theme} = this.props;
+        const {data} = file;
         const prefix = Platform.OS === 'android' ? 'file:/' : '';
-        const path = `${DOCUMENTS_PATH}/${file.name}`;
+        const path = `${DOCUMENTS_PATH}/${data.id}-${file.caption}`;
         const readFile = RNFetchBlob.fs.readFile(`${prefix}${path}`, 'utf8');
         setTimeout(async () => {
             try {
                 const content = await readFile;
                 navigator.push({
                     screen: 'TextPreview',
-                    title: file.name,
+                    title: file.caption,
                     animated: true,
                     backButtonTitle: '',
                     passProps: {
@@ -213,13 +215,15 @@ export default class FileAttachmentDocument extends PureComponent {
         // shown nicely and smooth
         setTimeout(() => {
             if (!this.state.didCancel && this.mounted) {
+                const {data} = file;
                 const prefix = Platform.OS === 'android' ? 'file:/' : '';
-                const path = `${DOCUMENTS_PATH}/${file.name}`;
+                const path = `${DOCUMENTS_PATH}/${data.id}-${file.caption}`;
                 this.setStatusBarColor('dark-content');
                 OpenFile.openDoc([{
                     url: `${prefix}${path}`,
-                    fileName: file.name,
-                    fileType: file.extension,
+                    fileNameOptional: file.caption,
+                    fileName: data.name,
+                    fileType: data.extension,
                     cache: false,
                 }], (error) => {
                     if (error) {
@@ -233,7 +237,7 @@ export default class FileAttachmentDocument extends PureComponent {
                                 id: 'mobile.document_preview.failed_description',
                                 defaultMessage: 'An error occurred while opening the document. Please make sure you have a {fileType} viewer installed and try again.\n',
                             }, {
-                                fileType: file.extension.toUpperCase(),
+                                fileType: data.extension.toUpperCase(),
                             }),
                             [{
                                 text: intl.formatMessage({
@@ -270,7 +274,7 @@ export default class FileAttachmentDocument extends PureComponent {
         return (
             <View style={[style.circularProgressContent, {width: wrapperWidth}]}>
                 <FileAttachmentIcon
-                    file={file}
+                    file={file.data}
                     iconHeight={iconHeight}
                     iconWidth={iconWidth}
                     theme={theme}
@@ -324,7 +328,7 @@ export default class FileAttachmentDocument extends PureComponent {
         } else {
             fileAttachmentComponent = (
                 <FileAttachmentIcon
-                    file={file}
+                    file={file.data}
                     theme={theme}
                     iconHeight={iconHeight}
                     iconWidth={iconWidth}
diff --git a/app/components/file_attachment_list/file_attachment_list.js b/app/components/file_attachment_list/file_attachment_list.js
index 0da912547..483ca0edc 100644
--- a/app/components/file_attachment_list/file_attachment_list.js
+++ b/app/components/file_attachment_list/file_attachment_list.js
@@ -212,26 +212,33 @@ export default class FileAttachmentList extends Component {
             ));
         }
 
-        return files.map((file, idx) => (
-            <TouchableOpacity
-                key={file.id}
-                onLongPress={this.props.onLongPress}
-                onPressIn={this.handlePressIn}
-                onPressOut={this.handlePressOut}
-            >
-                <FileAttachment
-                    deviceWidth={deviceWidth}
-                    file={file}
-                    index={idx}
-                    navigator={navigator}
-                    onCaptureRef={this.handleCaptureRef}
-                    onCapturePreviewRef={this.handleCapturePreviewRef}
-                    onInfoPress={this.handleInfoPress}
-                    onPreviewPress={this.handlePreviewPress}
-                    theme={this.props.theme}
-                />
-            </TouchableOpacity>
-        ));
+        return files.map((file, idx) => {
+            const f = {
+                caption: file.name,
+                data: file,
+            };
+
+            return (
+                <TouchableOpacity
+                    key={file.id}
+                    onLongPress={this.props.onLongPress}
+                    onPressIn={this.handlePressIn}
+                    onPressOut={this.handlePressOut}
+                >
+                    <FileAttachment
+                        deviceWidth={deviceWidth}
+                        file={f}
+                        index={idx}
+                        navigator={navigator}
+                        onCaptureRef={this.handleCaptureRef}
+                        onCapturePreviewRef={this.handleCapturePreviewRef}
+                        onInfoPress={this.handleInfoPress}
+                        onPreviewPress={this.handlePreviewPress}
+                        theme={this.props.theme}
+                    />
+                </TouchableOpacity>
+            );
+        });
     };
 
     render() {
diff --git a/app/screens/image_preview/downloader.android.js b/app/screens/image_preview/downloader.android.js
index 20e6f30d0..75f203b0f 100644
--- a/app/screens/image_preview/downloader.android.js
+++ b/app/screens/image_preview/downloader.android.js
@@ -64,6 +64,7 @@ export default class Downloader extends PureComponent {
     handleDownload = async () => {
         const {file, onDownloadCancel, onDownloadStart, onDownloadSuccess} = this.props;
         const {intl} = this.context;
+        const {data} = file;
 
         const canWriteToStorage = await this.checkForPermissions();
         if (!canWriteToStorage) {
@@ -88,11 +89,9 @@ export default class Downloader extends PureComponent {
             ToastAndroid.show(started, ToastAndroid.SHORT);
             onDownloadStart();
 
-            const dest = `${RNFetchBlob.fs.dirs.DownloadDir}/${file.caption}`;
+            const dest = `${RNFetchBlob.fs.dirs.DownloadDir}/${data.id}-${file.caption}`;
             let downloadFile = true;
 
-            const {data} = file;
-
             if (data.localPath) {
                 const exists = await RNFetchBlob.fs.exists(data.localPath);
 
@@ -101,7 +100,7 @@ export default class Downloader extends PureComponent {
                     await RNFetchBlob.fs.cp(data.localPath, dest);
                 }
             } else if (isVideo(data)) {
-                const path = `${VIDEOS_PATH}/${data.id}.${data.extension}`;
+                const path = `${VIDEOS_PATH}/${data.id}-${file.caption}`;
                 const exists = await RNFetchBlob.fs.exists(path);
 
                 if (exists) {
@@ -109,7 +108,7 @@ export default class Downloader extends PureComponent {
                     await RNFetchBlob.fs.cp(path, dest);
                 }
             } else if (isDocument(data)) {
-                const path = `${DOCUMENTS_PATH}/${data.name}`;
+                const path = `${DOCUMENTS_PATH}/${data.id}-${file.caption}`;
                 const exists = await RNFetchBlob.fs.exists(path);
 
                 if (exists) {
@@ -127,7 +126,7 @@ export default class Downloader extends PureComponent {
                         useDownloadManager: true,
                         notification: true,
                         path: dest,
-                        title: `${data.name} ${title}`,
+                        title: `${file.caption} ${title}`,
                         mime: data.mime_type,
                         description: data.name,
                         mediaScannable: true,
diff --git a/app/screens/image_preview/downloader.ios.js b/app/screens/image_preview/downloader.ios.js
index 64ef8ff50..d6865452d 100644
--- a/app/screens/image_preview/downloader.ios.js
+++ b/app/screens/image_preview/downloader.ios.js
@@ -271,7 +271,7 @@ export default class Downloader extends PureComponent {
 
             let path;
             let res;
-            if (data.localPath) {
+            if (data && data.localPath) {
                 path = data.localPath;
                 downloadFile = false;
                 this.setState({
@@ -300,7 +300,7 @@ export default class Downloader extends PureComponent {
                         }
                     }
 
-                    options.path = `${downloadPath}/${file.caption}`;
+                    options.path = `${downloadPath}/${data.id}-${file.caption}`;
                 } else {
                     options.fileCache = true;
                     options.appendExt = data.extension;
@@ -352,7 +352,7 @@ export default class Downloader extends PureComponent {
         } catch (error) {
             // cancellation throws so we need to catch
             if (downloadPath) {
-                RNFetchBlob.fs.unlink(`${downloadPath}/${file.id}.${file.extension}`);
+                RNFetchBlob.fs.unlink(`${downloadPath}/${data.id}-${file.caption}`);
             }
             if (error.message !== 'cancelled' && this.mounted) {
                 this.showDownloadFailedAlert();
diff --git a/app/screens/image_preview/image_preview.js b/app/screens/image_preview/image_preview.js
index 442e468e0..3fdc390ed 100644
--- a/app/screens/image_preview/image_preview.js
+++ b/app/screens/image_preview/image_preview.js
@@ -370,9 +370,9 @@ export default class ImagePreview extends PureComponent {
 
         if (file.data) {
             if (isDocument(file.data)) {
-                return this.renderAttachmentDocument(file.data);
+                return this.renderAttachmentDocument(file);
             } else if (isVideo(file.data)) {
-                return this.renderVideoPreview(file.data);
+                return this.renderVideoPreview(file);
             }
 
             return this.renderAttachmentIcon(file.data);
diff --git a/app/screens/image_preview/video_preview.js b/app/screens/image_preview/video_preview.js
index cae038fc5..e0104751c 100644
--- a/app/screens/image_preview/video_preview.js
+++ b/app/screens/image_preview/video_preview.js
@@ -5,6 +5,7 @@ import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import {
     Alert,
+    Platform,
     StyleSheet,
     TouchableOpacity,
     View,
@@ -62,8 +63,9 @@ export default class VideoPreview extends PureComponent {
 
     async initializeComponent() {
         const {file} = this.props;
-        const path = `${VIDEOS_PATH}/${file.id}.${file.extension}`;
-        const exist = await RNFetchBlob.fs.exists(path);
+        const prefix = Platform.OS === 'android' ? 'file:/' : '';
+        const path = `${VIDEOS_PATH}/${file.data.id}-${file.caption}`;
+        const exist = await RNFetchBlob.fs.exists(`${prefix}${path}`);
 
         if (exist) {
             this.setState({path});
@@ -82,7 +84,7 @@ export default class VideoPreview extends PureComponent {
 
     onDownloadSuccess = () => {
         const {file} = this.props;
-        const path = `${VIDEOS_PATH}/${file.id}.${file.extension}`;
+        const path = `${VIDEOS_PATH}/${file.data.id}-${file.caption}`;
 
         this.setState({showDownloader: false, path});
     };
diff --git a/package-lock.json b/package-lock.json
index f337f8656..a6c33def3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6798,6 +6798,12 @@
           "resolved": "https://registry.npmjs.org/redux-batched-actions/-/redux-batched-actions-0.2.0.tgz",
           "integrity": "sha1-2gAAyIKw5shhqW1YI702rfXZwN0="
         },
+        "redux-offline": {
+          "version": "git+https://github.com/enahum/redux-offline.git#4bd85e7e3b279a2b11fb4d587808d583d2b5e7b5",
+          "requires": {
+            "redux-persist": "4.9.1"
+          }
+        },
         "redux-persist": {
           "version": "4.9.1",
           "resolved": "https://registry.npmjs.org/redux-persist/-/redux-persist-4.9.1.tgz",
@@ -11209,9 +11215,9 @@
       "integrity": "sha1-MohiQrPyMX4SHzrrmwpYXiuHm0k="
     },
     "react-native-doc-viewer": {
-      "version": "2.7.3",
-      "resolved": "https://registry.npmjs.org/react-native-doc-viewer/-/react-native-doc-viewer-2.7.3.tgz",
-      "integrity": "sha1-exzNWBT71S9M3sRmmSjAWOtO4To="
+      "version": "2.7.8",
+      "resolved": "https://registry.npmjs.org/react-native-doc-viewer/-/react-native-doc-viewer-2.7.8.tgz",
+      "integrity": "sha1-Q9BlMo+xt+yQ0yHlvSNHEegHyPY="
     },
     "react-native-drawer": {
       "version": "2.5.0",
@@ -11731,12 +11737,6 @@
         "symbol-observable": "1.2.0"
       }
     },
-    "redux-offline": {
-      "version": "git+https://github.com/enahum/redux-offline.git#4bd85e7e3b279a2b11fb4d587808d583d2b5e7b5",
-      "requires": {
-        "redux-persist": "4.10.2"
-      }
-    },
     "redux-persist": {
       "version": "4.10.2",
       "resolved": "https://registry.npmjs.org/redux-persist/-/redux-persist-4.10.2.tgz",