1 files changed, 57 insertions, 0 deletions
diff --git a/webapp/components/file_info_preview.jsx b/webapp/components/file_info_preview.jsx
new file mode 100644
index 000000000..a0ec282c4
--- /dev/null
+++ b/webapp/components/file_info_preview.jsx
@@ -0,0 +1,57 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import * as Utils from 'utils/utils.jsx';
+
+import {defineMessages} from 'react-intl';
+import React from 'react';
+
+const holders = defineMessages({
+    type: {
+        id: 'file_info_preview.type',
+        defaultMessage: 'File type '
+    },
+    size: {
+        id: 'file_info_preview.size',
+        defaultMessage: 'Size '
+    }
+});
+
+export default function FileInfoPreview({filename, fileUrl, fileInfo, formatMessage}) {
+    // non-image files include a section providing details about the file
+    const infoParts = [];
+
+    if (fileInfo.extension !== '') {
+        infoParts.push(formatMessage(holders.type) + fileInfo.extension.toUpperCase());
+    }
+
+    infoParts.push(formatMessage(holders.size) + Utils.fileSizeToString(fileInfo.size));
+
+    const infoString = infoParts.join(', ');
+
+    const name = decodeURIComponent(Utils.getFileName(filename));
+
+    return (
+        <div className='file-details__container'>
+            <a
+                className={'file-details__preview'}
+                href={fileUrl}
+                target='_blank'
+            >
+                <span className='file-details__preview-helper'/>
+                <img src={Utils.getPreviewImagePath(filename)}/>
+            </a>
+            <div className='file-details'>
+                <div className='file-details__name'>{name}</div>
+                <div className='file-details__info'>{infoString}</div>
+            </div>
+        </div>
+    );
+}
+
+FileInfoPreview.propTypes = {
+    filename: React.PropTypes.string.isRequired,
+    fileUrl: React.PropTypes.string.isRequired,
+    fileInfo: React.PropTypes.object.isRequired,
+    formatMessage: React.PropTypes.func.isRequired
+};