diff --git a/components/file_attachment.jsx b/components/file_attachment.jsx
index 33bf60ffccd8..6aa9b181c1bf 100644
--- a/components/file_attachment.jsx
+++ b/components/file_attachment.jsx
@@ -5,11 +5,19 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {getFileThumbnailUrl, getFileUrl} from 'mattermost-redux/utils/file_utils';
 
-import Constants, {FileTypes} from 'utils/constants.jsx';
-import * as FileUtils from 'utils/file_utils';
-import * as Utils from 'utils/utils.jsx';
+import {FileTypes} from 'utils/constants.jsx';
+import {
+    canDownloadFiles,
+    trimFilename
+} from 'utils/file_utils';
+import {
+    fileSizeToString,
+    getFileType,
+    loadImage
+} from 'utils/utils.jsx';
 
 import FilenameOverlay from 'components/file_attachment/filename_overlay.jsx';
+import FileThumbnail from 'components/file_attachment/file_thumbnail.jsx';
 import DownloadIcon from 'components/svg/download_icon';
 
 export default class FileAttachment extends React.PureComponent {
@@ -40,7 +48,7 @@ export default class FileAttachment extends React.PureComponent {
         super(props);
 
         this.state = {
-            loaded: Utils.getFileType(props.fileInfo.extension) !== FileTypes.IMAGE
+            loaded: getFileType(props.fileInfo.extension) !== FileTypes.IMAGE
         };
     }
 
@@ -53,7 +61,7 @@ export default class FileAttachment extends React.PureComponent {
             const extension = nextProps.fileInfo.extension;
 
             this.setState({
-                loaded: Utils.getFileType(extension) !== FileTypes.IMAGE && extension !== FileTypes.SVG
+                loaded: getFileType(extension) !== FileTypes.IMAGE && extension !== FileTypes.SVG
             });
         }
     }
@@ -66,14 +74,14 @@ export default class FileAttachment extends React.PureComponent {
 
     loadFiles = () => {
         const fileInfo = this.props.fileInfo;
-        const fileType = Utils.getFileType(fileInfo.extension);
+        const fileType = getFileType(fileInfo.extension);
 
         if (fileType === FileTypes.IMAGE) {
             const thumbnailUrl = getFileThumbnailUrl(fileInfo.id);
 
-            Utils.loadImage(thumbnailUrl, this.handleImageLoaded);
+            loadImage(thumbnailUrl, this.handleImageLoaded);
         } else if (fileInfo.extension === FileTypes.SVG) {
-            Utils.loadImage(getFileUrl(fileInfo.id), this.handleImageLoaded);
+            loadImage(getFileUrl(fileInfo.id), this.handleImageLoaded);
         }
     }
 
@@ -89,67 +97,14 @@ export default class FileAttachment extends React.PureComponent {
     }
 
     render() {
-        const fileInfo = this.props.fileInfo;
-        const fileName = fileInfo.name;
-        const fileUrl = getFileUrl(fileInfo.id);
-
-        let thumbnail;
-        if (this.state.loaded) {
-            const type = Utils.getFileType(fileInfo.extension);
-
-            if (type === FileTypes.IMAGE) {
-                let className = 'post-image';
-
-                if (fileInfo.width < Constants.THUMBNAIL_WIDTH && fileInfo.height < Constants.THUMBNAIL_HEIGHT) {
-                    className += ' small';
-                } else {
-                    className += ' normal';
-                }
-
-                let thumbnailUrl = getFileThumbnailUrl(fileInfo.id);
-                if (Utils.isGIFImage(fileInfo.extension) && !fileInfo.has_preview_image) {
-                    thumbnailUrl = getFileUrl(fileInfo.id);
-                }
-
-                thumbnail = (
-                    <div
-                        className={className}
-                        style={{
-                            backgroundImage: `url(${thumbnailUrl})`,
-                            backgroundSize: 'cover'
-                        }}
-                    />
-                );
-            } else if (fileInfo.extension === FileTypes.SVG) {
-                thumbnail = (
-                    <img
-                        className='post-image normal'
-                        src={getFileUrl(fileInfo.id)}
-                    />
-                );
-            } else {
-                thumbnail = <div className={'file-icon ' + Utils.getIconClassName(type)}/>;
-            }
-        } else {
-            thumbnail = <div className='post-image__load'/>;
-        }
+        const {
+            compactDisplay,
+            fileInfo,
+            index
+        } = this.props;
 
-        const canDownloadFiles = FileUtils.canDownloadFiles();
-
-        let downloadButton = null;
-        if (canDownloadFiles) {
-            downloadButton = (
-                <a
-                    href={fileUrl}
-                    download={fileName}
-                    className='post-image__download'
-                    target='_blank'
-                    rel='noopener noreferrer'
-                >
-                    <DownloadIcon/>
-                </a>
-            );
-        }
+        const trimmedFilename = trimFilename(fileInfo.name);
+        const canDownload = canDownloadFiles();
 
         return (
             <div className='post-image__column'>
@@ -158,7 +113,11 @@ export default class FileAttachment extends React.PureComponent {
                     href='#'
                     onClick={this.onAttachmentClick}
                 >
-                    {thumbnail}
+                    {this.state.loaded ? (
+                        <FileThumbnail fileInfo={fileInfo}/>
+                    ) : (
+                        <div className='post-image__load'/>
+                    )}
                 </a>
                 <div className='post-image__details'>
                     <div
@@ -166,18 +125,24 @@ export default class FileAttachment extends React.PureComponent {
                         onClick={this.onAttachmentClick}
                     >
                         <div className='post-image__detail'>
-                            <FilenameOverlay
-                                fileInfo={this.props.fileInfo}
-                                index={this.props.index}
-                                handleImageClick={this.props.handleImageClick}
-                                compactDisplay={this.props.compactDisplay}
-                                canDownload={canDownloadFiles}
-                            />
+                            <span className={'post-image__name'}>
+                                {trimmedFilename}
+                            </span>
                             <span className='post-image__type'>{fileInfo.extension.toUpperCase()}</span>
-                            <span className='post-image__size'>{Utils.fileSizeToString(fileInfo.size)}</span>
+                            <span className='post-image__size'>{fileSizeToString(fileInfo.size)}</span>
                         </div>
                     </div>
-                    {downloadButton}
+                    {canDownload &&
+                    <FilenameOverlay
+                        fileInfo={fileInfo}
+                        compactDisplay={compactDisplay}
+                        canDownload={canDownload}
+                        iconClass={'post-image__download'}
+                        index={index}
+                    >
+                        <DownloadIcon/>
+                    </FilenameOverlay>
+                    }
                 </div>
             </div>
         );
diff --git a/components/file_attachment/file_thumbnail.jsx b/components/file_attachment/file_thumbnail.jsx
new file mode 100644
index 000000000000..527c1648b652
--- /dev/null
+++ b/components/file_attachment/file_thumbnail.jsx
@@ -0,0 +1,67 @@
+// Copyright (c) 2018-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import {getFileThumbnailUrl, getFileUrl} from 'mattermost-redux/utils/file_utils';
+
+import Constants, {FileTypes} from 'utils/constants.jsx';
+import {
+    getFileType,
+    getIconClassName,
+    isGIFImage
+} from 'utils/utils.jsx';
+
+export default class FileThumbnail extends React.PureComponent {
+
+    static propTypes = {
+
+        /*
+         * File detailed information
+         */
+        fileInfo: PropTypes.object.isRequired
+    }
+
+    render() {
+        const {fileInfo} = this.props;
+        const type = getFileType(fileInfo.extension);
+
+        let thumbnail;
+        if (type === FileTypes.IMAGE) {
+            let className = 'post-image';
+
+            if (fileInfo.width < Constants.THUMBNAIL_WIDTH && fileInfo.height < Constants.THUMBNAIL_HEIGHT) {
+                className += ' small';
+            } else {
+                className += ' normal';
+            }
+
+            let thumbnailUrl = getFileThumbnailUrl(fileInfo.id);
+            if (isGIFImage(fileInfo.extension) && !fileInfo.has_preview_image) {
+                thumbnailUrl = getFileUrl(fileInfo.id);
+            }
+
+            return (
+                <div
+                    className={className}
+                    style={{
+                        backgroundImage: `url(${thumbnailUrl})`,
+                        backgroundSize: 'cover'
+                    }}
+                />
+            );
+        } else if (fileInfo.extension === FileTypes.SVG) {
+            thumbnail = (
+                <img
+                    className='post-image normal'
+                    src={getFileUrl(fileInfo.id)}
+                />
+            );
+        } else {
+            thumbnail = <div className={'file-icon ' + getIconClassName(type)}/>;
+        }
+
+        return thumbnail;
+    }
+}
diff --git a/components/file_attachment/filename_overlay.jsx b/components/file_attachment/filename_overlay.jsx
index 4c8166fb5e06..b0e9994f34f9 100644
--- a/components/file_attachment/filename_overlay.jsx
+++ b/components/file_attachment/filename_overlay.jsx
@@ -7,7 +7,8 @@ import {OverlayTrigger, Tooltip} from 'react-bootstrap';
 import {getFileUrl} from 'mattermost-redux/utils/file_utils';
 
 import AttachmentIcon from 'components/svg/attachment_icon';
-import * as Utils from 'utils/utils.jsx';
+import {trimFilename} from 'utils/file_utils';
+import {localizeMessage} from 'utils/utils.jsx';
 
 export default class FilenameOverlay extends React.PureComponent {
     static propTypes = {
@@ -35,7 +36,17 @@ export default class FilenameOverlay extends React.PureComponent {
         /*
          * If it should display link to download on file name
          */
-        canDownload: PropTypes.bool
+        canDownload: PropTypes.bool,
+
+        /**
+         * Optional children like download icon
+         */
+        children: PropTypes.element,
+
+        /**
+         * Optional class like for icon
+         */
+        iconClass: PropTypes.string
     };
 
     onAttachmentClick = (e) => {
@@ -44,19 +55,20 @@ export default class FilenameOverlay extends React.PureComponent {
     }
 
     render() {
-        const fileInfo = this.props.fileInfo;
+        const {
+            canDownload,
+            children,
+            compactDisplay,
+            fileInfo,
+            iconClass
+        } = this.props;
+
         const fileName = fileInfo.name;
+        const trimmedFilename = trimFilename(fileName);
         const fileUrl = getFileUrl(fileInfo.id);
 
-        let trimmedFilename;
-        if (fileName.length > 35) {
-            trimmedFilename = fileName.substring(0, Math.min(35, fileName.length)) + '...';
-        } else {
-            trimmedFilename = fileName;
-        }
-
         let filenameOverlay;
-        if (this.props.compactDisplay) {
+        if (compactDisplay) {
             filenameOverlay = (
                 <OverlayTrigger
                     trigger={['hover', 'focus']}
@@ -75,24 +87,28 @@ export default class FilenameOverlay extends React.PureComponent {
                     </a>
                 </OverlayTrigger>
             );
-        } else if (this.props.canDownload) {
+        } else if (canDownload) {
             filenameOverlay = (
-                <OverlayTrigger
-                    trigger={['hover', 'focus']}
-                    delayShow={1000}
-                    placement='top'
-                    overlay={<Tooltip id='file-name__tooltip'>{Utils.localizeMessage('file_attachment.download', 'Download') + ' "' + fileName + '"'}</Tooltip>}
+                <a
+                    href={fileUrl}
+                    download={fileName}
+                    className={iconClass || 'post-image__name'}
+                    target='_blank'
+                    rel='noopener noreferrer'
                 >
-                    <a
-                        href={fileUrl}
-                        download={fileName}
-                        className='post-image__name'
-                        target='_blank'
-                        rel='noopener noreferrer'
+                    <OverlayTrigger
+                        trigger={['hover', 'focus']}
+                        delayShow={1000}
+                        placement='top'
+                        overlay={
+                            <Tooltip id='file-name__tooltip'>
+                                {localizeMessage('file_attachment.download', 'Download')}
+                            </Tooltip>
+                        }
                     >
-                        {trimmedFilename}
-                    </a>
-                </OverlayTrigger>
+                        {children || trimmedFilename}
+                    </OverlayTrigger>
+                </a>
             );
         } else {
             filenameOverlay = (
diff --git a/sass/components/_files.scss b/sass/components/_files.scss
index f7d303bd2e2e..bd418fc6187b 100644
--- a/sass/components/_files.scss
+++ b/sass/components/_files.scss
@@ -357,7 +357,7 @@
         height: 100%;
         justify-content: center;
         line-height: 0;
-        padding-right: 10px;
+        padding: 0 5px;
         position: absolute;
         right: 0;
         text-align: center;
diff --git a/tests/components/__snapshots__/file_attachment.test.jsx.snap b/tests/components/__snapshots__/file_attachment.test.jsx.snap
index e8411c64071e..44c66745292f 100644
--- a/tests/components/__snapshots__/file_attachment.test.jsx.snap
+++ b/tests/components/__snapshots__/file_attachment.test.jsx.snap
@@ -9,12 +9,15 @@ exports[`component/FileAttachment should match snapshot, after change from file
     href="#"
     onClick={[Function]}
   >
-    <div
-      className="post-image normal"
-      style={
+    <FileThumbnail
+      fileInfo={
         Object {
-          "backgroundImage": "url(/api/v4/files/2/thumbnail)",
-          "backgroundSize": "cover",
+          "extension": "png",
+          "height": 400,
+          "id": 2,
+          "name": "test.png",
+          "size": 100,
+          "width": 600,
         }
       }
     />
@@ -29,21 +32,11 @@ exports[`component/FileAttachment should match snapshot, after change from file
       <div
         className="post-image__detail"
       >
-        <FilenameOverlay
-          canDownload={true}
-          fileInfo={
-            Object {
-              "extension": "png",
-              "height": 400,
-              "id": 2,
-              "name": "test.png",
-              "size": 100,
-              "width": 600,
-            }
-          }
-          handleImageClick={[MockFunction]}
-          index={3}
-        />
+        <span
+          className="post-image__name"
+        >
+          test.png
+        </span>
         <span
           className="post-image__type"
         >
@@ -56,15 +49,23 @@ exports[`component/FileAttachment should match snapshot, after change from file
         </span>
       </div>
     </div>
-    <a
-      className="post-image__download"
-      download="test.png"
-      href="/api/v4/files/2"
-      rel="noopener noreferrer"
-      target="_blank"
+    <FilenameOverlay
+      canDownload={true}
+      fileInfo={
+        Object {
+          "extension": "png",
+          "height": 400,
+          "id": 2,
+          "name": "test.png",
+          "size": 100,
+          "width": 600,
+        }
+      }
+      iconClass="post-image__download"
+      index={3}
     >
       <DownloadIcon />
-    </a>
+    </FilenameOverlay>
   </div>
 </div>
 `;
@@ -78,8 +79,15 @@ exports[`component/FileAttachment should match snapshot, file with long name 1`]
     href="#"
     onClick={[Function]}
   >
-    <div
-      className="file-icon pdf"
+    <FileThumbnail
+      fileInfo={
+        Object {
+          "extension": "pdf",
+          "id": 1,
+          "name": "a-quite-long-filename-to-test-the-filename-shortener.pdf",
+          "size": 100,
+        }
+      }
     />
   </a>
   <div
@@ -92,19 +100,11 @@ exports[`component/FileAttachment should match snapshot, file with long name 1`]
       <div
         className="post-image__detail"
       >
-        <FilenameOverlay
-          canDownload={true}
-          fileInfo={
-            Object {
-              "extension": "pdf",
-              "id": 1,
-              "name": "a-quite-long-filename-to-test-the-filename-shortener.pdf",
-              "size": 100,
-            }
-          }
-          handleImageClick={[MockFunction]}
-          index={3}
-        />
+        <span
+          className="post-image__name"
+        >
+          a-quite-long-filename-to-test-the-f...
+        </span>
         <span
           className="post-image__type"
         >
@@ -117,15 +117,21 @@ exports[`component/FileAttachment should match snapshot, file with long name 1`]
         </span>
       </div>
     </div>
-    <a
-      className="post-image__download"
-      download="a-quite-long-filename-to-test-the-filename-shortener.pdf"
-      href="/api/v4/files/1"
-      rel="noopener noreferrer"
-      target="_blank"
+    <FilenameOverlay
+      canDownload={true}
+      fileInfo={
+        Object {
+          "extension": "pdf",
+          "id": 1,
+          "name": "a-quite-long-filename-to-test-the-filename-shortener.pdf",
+          "size": 100,
+        }
+      }
+      iconClass="post-image__download"
+      index={3}
     >
       <DownloadIcon />
-    </a>
+    </FilenameOverlay>
   </div>
 </div>
 `;
@@ -139,8 +145,15 @@ exports[`component/FileAttachment should match snapshot, regular file 1`] = `
     href="#"
     onClick={[Function]}
   >
-    <div
-      className="file-icon pdf"
+    <FileThumbnail
+      fileInfo={
+        Object {
+          "extension": "pdf",
+          "id": 1,
+          "name": "test.pdf",
+          "size": 100,
+        }
+      }
     />
   </a>
   <div
@@ -153,19 +166,11 @@ exports[`component/FileAttachment should match snapshot, regular file 1`] = `
       <div
         className="post-image__detail"
       >
-        <FilenameOverlay
-          canDownload={true}
-          fileInfo={
-            Object {
-              "extension": "pdf",
-              "id": 1,
-              "name": "test.pdf",
-              "size": 100,
-            }
-          }
-          handleImageClick={[MockFunction]}
-          index={3}
-        />
+        <span
+          className="post-image__name"
+        >
+          test.pdf
+        </span>
         <span
           className="post-image__type"
         >
@@ -178,15 +183,21 @@ exports[`component/FileAttachment should match snapshot, regular file 1`] = `
         </span>
       </div>
     </div>
-    <a
-      className="post-image__download"
-      download="test.pdf"
-      href="/api/v4/files/1"
-      rel="noopener noreferrer"
-      target="_blank"
+    <FilenameOverlay
+      canDownload={true}
+      fileInfo={
+        Object {
+          "extension": "pdf",
+          "id": 1,
+          "name": "test.pdf",
+          "size": 100,
+        }
+      }
+      iconClass="post-image__download"
+      index={3}
     >
       <DownloadIcon />
-    </a>
+    </FilenameOverlay>
   </div>
 </div>
 `;
@@ -200,12 +211,15 @@ exports[`component/FileAttachment should match snapshot, regular image 1`] = `
     href="#"
     onClick={[Function]}
   >
-    <div
-      className="post-image normal"
-      style={
+    <FileThumbnail
+      fileInfo={
         Object {
-          "backgroundImage": "url(/api/v4/files/1/thumbnail)",
-          "backgroundSize": "cover",
+          "extension": "png",
+          "height": 400,
+          "id": 1,
+          "name": "test.png",
+          "size": 100,
+          "width": 600,
         }
       }
     />
@@ -220,21 +234,11 @@ exports[`component/FileAttachment should match snapshot, regular image 1`] = `
       <div
         className="post-image__detail"
       >
-        <FilenameOverlay
-          canDownload={true}
-          fileInfo={
-            Object {
-              "extension": "png",
-              "height": 400,
-              "id": 1,
-              "name": "test.png",
-              "size": 100,
-              "width": 600,
-            }
-          }
-          handleImageClick={[MockFunction]}
-          index={3}
-        />
+        <span
+          className="post-image__name"
+        >
+          test.png
+        </span>
         <span
           className="post-image__type"
         >
@@ -247,15 +251,23 @@ exports[`component/FileAttachment should match snapshot, regular image 1`] = `
         </span>
       </div>
     </div>
-    <a
-      className="post-image__download"
-      download="test.png"
-      href="/api/v4/files/1"
-      rel="noopener noreferrer"
-      target="_blank"
+    <FilenameOverlay
+      canDownload={true}
+      fileInfo={
+        Object {
+          "extension": "png",
+          "height": 400,
+          "id": 1,
+          "name": "test.png",
+          "size": 100,
+          "width": 600,
+        }
+      }
+      iconClass="post-image__download"
+      index={3}
     >
       <DownloadIcon />
-    </a>
+    </FilenameOverlay>
   </div>
 </div>
 `;
@@ -269,12 +281,15 @@ exports[`component/FileAttachment should match snapshot, small image 1`] = `
     href="#"
     onClick={[Function]}
   >
-    <div
-      className="post-image small"
-      style={
+    <FileThumbnail
+      fileInfo={
         Object {
-          "backgroundImage": "url(/api/v4/files/1/thumbnail)",
-          "backgroundSize": "cover",
+          "extension": "png",
+          "height": 16,
+          "id": 1,
+          "name": "test.png",
+          "size": 100,
+          "width": 16,
         }
       }
     />
@@ -289,21 +304,11 @@ exports[`component/FileAttachment should match snapshot, small image 1`] = `
       <div
         className="post-image__detail"
       >
-        <FilenameOverlay
-          canDownload={true}
-          fileInfo={
-            Object {
-              "extension": "png",
-              "height": 16,
-              "id": 1,
-              "name": "test.png",
-              "size": 100,
-              "width": 16,
-            }
-          }
-          handleImageClick={[MockFunction]}
-          index={3}
-        />
+        <span
+          className="post-image__name"
+        >
+          test.png
+        </span>
         <span
           className="post-image__type"
         >
@@ -316,15 +321,23 @@ exports[`component/FileAttachment should match snapshot, small image 1`] = `
         </span>
       </div>
     </div>
-    <a
-      className="post-image__download"
-      download="test.png"
-      href="/api/v4/files/1"
-      rel="noopener noreferrer"
-      target="_blank"
+    <FilenameOverlay
+      canDownload={true}
+      fileInfo={
+        Object {
+          "extension": "png",
+          "height": 16,
+          "id": 1,
+          "name": "test.png",
+          "size": 100,
+          "width": 16,
+        }
+      }
+      iconClass="post-image__download"
+      index={3}
     >
       <DownloadIcon />
-    </a>
+    </FilenameOverlay>
   </div>
 </div>
 `;
@@ -338,9 +351,17 @@ exports[`component/FileAttachment should match snapshot, svg image 1`] = `
     href="#"
     onClick={[Function]}
   >
-    <img
-      className="post-image normal"
-      src="/api/v4/files/1"
+    <FileThumbnail
+      fileInfo={
+        Object {
+          "extension": "svg",
+          "height": 400,
+          "id": 1,
+          "name": "test.svg",
+          "size": 100,
+          "width": 600,
+        }
+      }
     />
   </a>
   <div
@@ -353,21 +374,11 @@ exports[`component/FileAttachment should match snapshot, svg image 1`] = `
       <div
         className="post-image__detail"
       >
-        <FilenameOverlay
-          canDownload={true}
-          fileInfo={
-            Object {
-              "extension": "svg",
-              "height": 400,
-              "id": 1,
-              "name": "test.svg",
-              "size": 100,
-              "width": 600,
-            }
-          }
-          handleImageClick={[MockFunction]}
-          index={3}
-        />
+        <span
+          className="post-image__name"
+        >
+          test.svg
+        </span>
         <span
           className="post-image__type"
         >
@@ -380,15 +391,23 @@ exports[`component/FileAttachment should match snapshot, svg image 1`] = `
         </span>
       </div>
     </div>
-    <a
-      className="post-image__download"
-      download="test.svg"
-      href="/api/v4/files/1"
-      rel="noopener noreferrer"
-      target="_blank"
+    <FilenameOverlay
+      canDownload={true}
+      fileInfo={
+        Object {
+          "extension": "svg",
+          "height": 400,
+          "id": 1,
+          "name": "test.svg",
+          "size": 100,
+          "width": 600,
+        }
+      }
+      iconClass="post-image__download"
+      index={3}
     >
       <DownloadIcon />
-    </a>
+    </FilenameOverlay>
   </div>
 </div>
 `;
@@ -416,19 +435,11 @@ exports[`component/FileAttachment should match snapshot, when file is not loaded
       <div
         className="post-image__detail"
       >
-        <FilenameOverlay
-          canDownload={true}
-          fileInfo={
-            Object {
-              "extension": "pdf",
-              "id": 1,
-              "name": "test.pdf",
-              "size": 100,
-            }
-          }
-          handleImageClick={[MockFunction]}
-          index={3}
-        />
+        <span
+          className="post-image__name"
+        >
+          test.pdf
+        </span>
         <span
           className="post-image__type"
         >
@@ -441,15 +452,21 @@ exports[`component/FileAttachment should match snapshot, when file is not loaded
         </span>
       </div>
     </div>
-    <a
-      className="post-image__download"
-      download="test.pdf"
-      href="/api/v4/files/1"
-      rel="noopener noreferrer"
-      target="_blank"
+    <FilenameOverlay
+      canDownload={true}
+      fileInfo={
+        Object {
+          "extension": "pdf",
+          "id": 1,
+          "name": "test.pdf",
+          "size": 100,
+        }
+      }
+      iconClass="post-image__download"
+      index={3}
     >
       <DownloadIcon />
-    </a>
+    </FilenameOverlay>
   </div>
 </div>
 `;
@@ -463,8 +480,15 @@ exports[`component/FileAttachment should match snapshot, with compact display 1`
     href="#"
     onClick={[Function]}
   >
-    <div
-      className="file-icon pdf"
+    <FileThumbnail
+      fileInfo={
+        Object {
+          "extension": "pdf",
+          "id": 1,
+          "name": "test.pdf",
+          "size": 100,
+        }
+      }
     />
   </a>
   <div
@@ -477,20 +501,11 @@ exports[`component/FileAttachment should match snapshot, with compact display 1`
       <div
         className="post-image__detail"
       >
-        <FilenameOverlay
-          canDownload={true}
-          compactDisplay={true}
-          fileInfo={
-            Object {
-              "extension": "pdf",
-              "id": 1,
-              "name": "test.pdf",
-              "size": 100,
-            }
-          }
-          handleImageClick={[MockFunction]}
-          index={3}
-        />
+        <span
+          className="post-image__name"
+        >
+          test.pdf
+        </span>
         <span
           className="post-image__type"
         >
@@ -503,15 +518,22 @@ exports[`component/FileAttachment should match snapshot, with compact display 1`
         </span>
       </div>
     </div>
-    <a
-      className="post-image__download"
-      download="test.pdf"
-      href="/api/v4/files/1"
-      rel="noopener noreferrer"
-      target="_blank"
+    <FilenameOverlay
+      canDownload={true}
+      compactDisplay={true}
+      fileInfo={
+        Object {
+          "extension": "pdf",
+          "id": 1,
+          "name": "test.pdf",
+          "size": 100,
+        }
+      }
+      iconClass="post-image__download"
+      index={3}
     >
       <DownloadIcon />
-    </a>
+    </FilenameOverlay>
   </div>
 </div>
 `;
@@ -525,8 +547,15 @@ exports[`component/FileAttachment should match snapshot, without compact display
     href="#"
     onClick={[Function]}
   >
-    <div
-      className="file-icon pdf"
+    <FileThumbnail
+      fileInfo={
+        Object {
+          "extension": "pdf",
+          "id": 1,
+          "name": "test.pdf",
+          "size": 100,
+        }
+      }
     />
   </a>
   <div
@@ -539,19 +568,11 @@ exports[`component/FileAttachment should match snapshot, without compact display
       <div
         className="post-image__detail"
       >
-        <FilenameOverlay
-          canDownload={false}
-          fileInfo={
-            Object {
-              "extension": "pdf",
-              "id": 1,
-              "name": "test.pdf",
-              "size": 100,
-            }
-          }
-          handleImageClick={[MockFunction]}
-          index={3}
-        />
+        <span
+          className="post-image__name"
+        >
+          test.pdf
+        </span>
         <span
           className="post-image__type"
         >
diff --git a/tests/components/file_attachment/__snapshots__/file_thumbnail.test.jsx.snap b/tests/components/file_attachment/__snapshots__/file_thumbnail.test.jsx.snap
new file mode 100644
index 000000000000..6b5eb87d7648
--- /dev/null
+++ b/tests/components/file_attachment/__snapshots__/file_thumbnail.test.jsx.snap
@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/file_attachment/FileThumbnail should match snapshot, normal size image 1`] = `
+<div
+  className="post-image normal"
+  style={
+    Object {
+      "backgroundImage": "url(/api/v4/files/thumbnail_id/thumbnail)",
+      "backgroundSize": "cover",
+    }
+  }
+/>
+`;
+
+exports[`components/file_attachment/FileThumbnail should match snapshot, pdf 1`] = `
+<div
+  className="file-icon pdf"
+/>
+`;
+
+exports[`components/file_attachment/FileThumbnail should match snapshot, small size image 1`] = `
+<div
+  className="post-image small"
+  style={
+    Object {
+      "backgroundImage": "url(/api/v4/files/thumbnail_id/thumbnail)",
+      "backgroundSize": "cover",
+    }
+  }
+/>
+`;
+
+exports[`components/file_attachment/FileThumbnail should match snapshot, svg 1`] = `
+<img
+  className="post-image normal"
+  src="/api/v4/files/thumbnail_id"
+/>
+`;
diff --git a/tests/components/file_attachment/file_thumbnail.test.jsx b/tests/components/file_attachment/file_thumbnail.test.jsx
new file mode 100644
index 000000000000..659bb5ff8355
--- /dev/null
+++ b/tests/components/file_attachment/file_thumbnail.test.jsx
@@ -0,0 +1,52 @@
+// Copyright (c) 2018-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+import {shallow} from 'enzyme';
+
+import FileThumbnail from 'components/file_attachment/file_thumbnail.jsx';
+
+describe('components/file_attachment/FileThumbnail', () => {
+    const fileInfo = {
+        id: 'thumbnail_id',
+        extension: 'jpg',
+        width: 100,
+        height: 80,
+        has_preview_image: true
+    };
+
+    test('should match snapshot, small size image', () => {
+        const wrapper = shallow(
+            <FileThumbnail fileInfo={fileInfo}/>
+        );
+
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    test('should match snapshot, normal size image', () => {
+        const newFileInfo = {...fileInfo, height: 150, width: 150};
+        const wrapper = shallow(
+            <FileThumbnail fileInfo={newFileInfo}/>
+        );
+
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    test('should match snapshot, svg', () => {
+        const newFileInfo = {...fileInfo, extension: 'svg'};
+        const wrapper = shallow(
+            <FileThumbnail fileInfo={newFileInfo}/>
+        );
+
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    test('should match snapshot, pdf', () => {
+        const newFileInfo = {...fileInfo, extension: 'pdf'};
+        const wrapper = shallow(
+            <FileThumbnail fileInfo={newFileInfo}/>
+        );
+
+        expect(wrapper).toMatchSnapshot();
+    });
+});
diff --git a/tests/utils/file_utils.test.jsx b/tests/utils/file_utils.test.jsx
new file mode 100644
index 000000000000..ff282ed39927
--- /dev/null
+++ b/tests/utils/file_utils.test.jsx
@@ -0,0 +1,22 @@
+// Copyright (c) 2018-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import assert from 'assert';
+
+import {trimFilename} from 'utils/file_utils.jsx';
+
+describe('FileUtils.trimFilename', function() {
+    it('trimFilename', function() {
+        assert.equal(
+            trimFilename('abcdefghijklmnopqrstuvwxyz'),
+            'abcdefghijklmnopqrstuvwxyz',
+            'should return same filename'
+        );
+
+        assert.equal(
+            trimFilename('abcdefghijklmnopqrstuvwxyz0123456789'),
+            'abcdefghijklmnopqrstuvwxyz012345678...',
+            'should return trimmed filename'
+        );
+    });
+});
diff --git a/utils/constants.jsx b/utils/constants.jsx
index f1437885c1fb..7546097f144b 100644
--- a/utils/constants.jsx
+++ b/utils/constants.jsx
@@ -540,6 +540,7 @@ export const Constants = {
     },
     MAX_DISPLAY_FILES: 5,
     MAX_UPLOAD_FILES: 5,
+    MAX_FILENAME_LENGTH: 35,
     THUMBNAIL_WIDTH: 128,
     THUMBNAIL_HEIGHT: 100,
     PROFILE_WIDTH: 128,
diff --git a/utils/file_utils.jsx b/utils/file_utils.jsx
index 42feb11be260..ee0b196ef1ff 100644
--- a/utils/file_utils.jsx
+++ b/utils/file_utils.jsx
@@ -1,6 +1,7 @@
 // Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
+import Constants from 'utils/constants.jsx';
 import * as UserAgent from 'utils/user_agent';
 
 export function canUploadFiles() {
@@ -22,3 +23,12 @@ export function canDownloadFiles() {
 
     return true;
 }
+
+export function trimFilename(filename) {
+    let trimmedFilename = filename;
+    if (filename.length > Constants.MAX_FILENAME_LENGTH) {
+        trimmedFilename = filename.substring(0, Math.min(Constants.MAX_FILENAME_LENGTH, filename.length)) + '...';
+    }
+
+    return trimmedFilename;
+}