everything seems to work as expected

src/widgets/doc-preview.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import SendMessage from '../widgets/send-message.jsx';
 
-import { bytesToHumanSize } from '../lib/strformat.js';
+import { bytesToHumanSize, shortenFileName } from '../lib/strformat.js';
 
 // Get material icon name from mime type.
 function iconFromMime(mime) {
@@ -31,12 +31,14 @@ export default class DocPreview extends React.PureComponent {
     return (
       <div id="image-preview">
         <div id="image-preview-caption-panel">
-          <span>{this.props.content.filename}</span>
+          <span>{this.props.content.name}</span>
           <a href="#" onClick={(e) => {e.preventDefault(); this.props.onClose();}}><i className="material-icons gray">close</i></a>
         </div>
         <div id="image-preview-container">
           <div className="flex-column narrow">
             <i className="material-icons gray">{iconFromMime(this.props.content.type)}</i>
+            <div><b><FormattedMessage id="label_file_name" defaultMessage="File name:"
+              description="Label for a file name" /></b> {shortenFileName(this.props.content.name, 24) || '-'}</div>
             <div><b><FormattedMessage id="label_content_type" defaultMessage="Content type:"
               description="Label for file content type (mime)" /></b> {this.props.content.type || 'application/octet-stream'}</div>
             <div><b><FormattedMessage id="label_size" defaultMessage="Size:"