From 3b7a6df617a4fd5e48951002e01322cedd9d2036 Mon Sep 17 00:00:00 2001
From: Chris Duarte <csduarte@users.noreply.github.com>
Date: Fri, 17 Feb 2017 14:40:40 -0800
Subject: [PATCH] PLT-5530 Render placeholder icons + metadata for file
 attachments in posts list (#249)

* Add icons for file types

* Compress image files for file type icons

* Add constants for file types

* Add utils for file metadata

* Add actions & reducers for fetching file attachments

* Render file attachments in posts

* Add reducers for handling files requests

* Refactor getFileType in file utils

* Refactor getFileIconPath in file utils

* Refactor getFormattedFileSize in file utils

* Trim trailing whitespace in getTruncatedFilename

* Style file attachment metadata

* Remove entity store reducer for files fetch failure

* Change filesForPost to fileIdsForPost in files store

* Use a selector for getFilesForPost

* Memoize getFilesForPost selector

* Dispatch postId with getFilesForPost

* Add test for getFilesForPost

* Upload seed file in getFilesForPost test

* Display correct icon for image attachments

* Fix reducers for receiving files for post

Expect response data to be array not object

* Style attachment post

* Merge headers (defaults + opts) in Client.doFetch

* Upload file as FormData

* Use form-data lib instead of built-in polyfill

* Associate file with post in getFilesForPost test

* Improve assertions in getFilesForPost test

* Check for createPost failure in getFilesForPost test

* Use correct post id in getFilesForPost test

* Use client not action to create post in getFilesForPost test

* Fix file upload in getFilesForPost test

* Add assertion for name of uploaded file

* Update attachment post style

* Fix spelling of loadFilesForPostIfNecessary

* Remove eslint-disable no-magic-numbers from file_utils.js

* Remove unused index prop from FileAttachment

* Clarify code for merging headers in Client.getOptions

* Dynamically truncate file attachment names

* Extract component for FileAttachmentIcon

* Use white bg for FileAttachmentIcon to match webapp styles

* Match webapp styles for file attachment borders

* Move file icon path lookup to FileAttachmentIcon

* Use more logical ordering for file type lookup
---
 app/actions/views/channel.js                  |  13 +++
 .../file_attachment_list/file_attachment.js   | 107 ++++++++++++++++++
 .../file_attachment_icon.js                   |  76 +++++++++++++
 .../file_attachment_list.js                   |  43 +++++++
 .../file_attachment_list_container.js         |  32 ++++++
 app/components/post/post.js                   |  13 +++
 assets/base/images/icons/audio.png            | Bin 0 -> 1691 bytes
 assets/base/images/icons/code.png             | Bin 0 -> 1393 bytes
 assets/base/images/icons/excel.png            | Bin 0 -> 477 bytes
 assets/base/images/icons/generic.png          | Bin 0 -> 2262 bytes
 assets/base/images/icons/image.png            | Bin 0 -> 1012 bytes
 assets/base/images/icons/patch.png            | Bin 0 -> 1506 bytes
 assets/base/images/icons/pdf.png              | Bin 0 -> 2301 bytes
 assets/base/images/icons/ppt.png              | Bin 0 -> 2018 bytes
 assets/base/images/icons/video.png            | Bin 0 -> 662 bytes
 assets/base/images/icons/word.png             | Bin 0 -> 617 bytes
 package.json                                  |   1 +
 service/actions/files.js                      |  34 ++++++
 service/client/client.js                      |  28 ++++-
 service/constants/constants.js                |  17 ++-
 service/constants/files.js                    |  14 +++
 service/constants/index.js                    |   2 +
 service/reducers/entities/files.js            |  47 ++++++++
 service/reducers/entities/index.js            |   2 +
 service/reducers/requests/files.js            |  21 ++++
 service/reducers/requests/index.js            |   2 +
 service/selectors/entities/files.js           |  21 ++++
 service/utils/file_utils.js                   |  42 +++++++
 test/assets/images/test.png                   | Bin 0 -> 5054 bytes
 test/service/actions/files.test.js            |  69 +++++++++++
 30 files changed, 581 insertions(+), 3 deletions(-)
 create mode 100644 app/components/file_attachment_list/file_attachment.js
 create mode 100644 app/components/file_attachment_list/file_attachment_icon.js
 create mode 100644 app/components/file_attachment_list/file_attachment_list.js
 create mode 100644 app/components/file_attachment_list/file_attachment_list_container.js
 create mode 100644 assets/base/images/icons/audio.png
 create mode 100644 assets/base/images/icons/code.png
 create mode 100644 assets/base/images/icons/excel.png
 create mode 100644 assets/base/images/icons/generic.png
 create mode 100644 assets/base/images/icons/image.png
 create mode 100644 assets/base/images/icons/patch.png
 create mode 100644 assets/base/images/icons/pdf.png
 create mode 100644 assets/base/images/icons/ppt.png
 create mode 100644 assets/base/images/icons/video.png
 create mode 100644 assets/base/images/icons/word.png
 create mode 100644 service/actions/files.js
 create mode 100644 service/constants/files.js
 create mode 100644 service/reducers/entities/files.js
 create mode 100644 service/reducers/requests/files.js
 create mode 100644 service/selectors/entities/files.js
 create mode 100644 service/utils/file_utils.js
 create mode 100644 test/assets/images/test.png
 create mode 100644 test/service/actions/files.test.js

diff --git a/app/actions/views/channel.js b/app/actions/views/channel.js
index 91aef4c39..6e52d8891 100644
--- a/app/actions/views/channel.js
+++ b/app/actions/views/channel.js
@@ -13,6 +13,7 @@ import {
     selectChannel,
     leaveChannel as serviceLeaveChannel} from 'service/actions/channels';
 import {getPosts} from 'service/actions/posts';
+import {getFilesForPost} from 'service/actions/files';
 import {savePreferences, deletePreferences} from 'service/actions/preferences';
 import {getTeamMembersByIds} from 'service/actions/teams';
 import {Constants, UsersTypes} from 'service/constants';
@@ -98,6 +99,18 @@ export function loadPostsIfNecessary(channel) {
     };
 }
 
+export function loadFilesForPostIfNecessary(post) {
+    return async (dispatch, getState) => {
+        const {files, teams} = getState().entities;
+        const fileIdsForPost = files.fileIdsByPostId[post.id];
+
+        if (!fileIdsForPost) {
+            const teamId = teams.currentId;
+            await getFilesForPost(teamId, post.channel_id, post.id)(dispatch, getState);
+        }
+    };
+}
+
 export function selectInitialChannel(teamId) {
     return async (dispatch, getState) => {
         const state = getState();
diff --git a/app/components/file_attachment_list/file_attachment.js b/app/components/file_attachment_list/file_attachment.js
new file mode 100644
index 000000000..725544b19
--- /dev/null
+++ b/app/components/file_attachment_list/file_attachment.js
@@ -0,0 +1,107 @@
+// Copyright (c) 2017 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React, {
+    Component,
+    PropTypes
+} from 'react';
+
+import {
+    Text,
+    View,
+    StyleSheet
+} from 'react-native';
+
+import Icon from 'react-native-vector-icons/FontAwesome';
+
+import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
+import * as Utils from 'service/utils/file_utils.js';
+
+import FileAttachmentIcon from './file_attachment_icon';
+
+const getStyleSheet = makeStyleSheetFromTheme((theme) => {
+    return StyleSheet.create({
+        downloadIcon: {
+            color: changeOpacity(theme.centerChannelColor, 0.7),
+            marginRight: 5
+        },
+        fileDownloadContainer: {
+            flexDirection: 'row',
+            marginTop: 3
+        },
+        fileInfo: {
+            marginLeft: 2,
+            fontSize: 14,
+            color: changeOpacity(theme.centerChannelColor, 0.5)
+        },
+        fileInfoContainer: {
+            flex: 1,
+            paddingHorizontal: 8,
+            paddingVertical: 5,
+            borderLeftWidth: 1,
+            borderLeftColor: changeOpacity(theme.centerChannelColor, 0.2)
+        },
+        fileName: {
+            flexDirection: 'column',
+            flexWrap: 'wrap',
+            marginLeft: 2,
+            fontSize: 14,
+            color: theme.centerChannelColor
+        },
+        fileWrapper: {
+            flex: 1,
+            flexDirection: 'row',
+            marginTop: 10,
+            borderWidth: 1,
+            borderColor: changeOpacity(theme.centerChannelColor, 0.2)
+        }
+    });
+});
+
+export default class FileAttachment extends Component {
+    static propTypes = {
+        file: PropTypes.object.isRequired,
+        theme: PropTypes.object.isRequired
+    };
+
+    renderFileInfo() {
+        const {file, theme} = this.props;
+        const style = getStyleSheet(theme);
+
+        return (
+            <View style={style.fileInfoContainer}>
+                <Text
+                    numberOfLines={4}
+                    style={style.fileName}
+                >
+                    {file.name.trim()}
+                </Text>
+                <View style={style.fileDownloadContainer}>
+                    <Icon
+                        name='download'
+                        size={16}
+                        style={style.downloadIcon}
+                    />
+                    <Text style={style.fileInfo}>
+                        {`${file.extension.toUpperCase()} ${Utils.getFormattedFileSize(file)}`}
+                    </Text>
+                </View>
+            </View>
+        );
+    }
+
+    render() {
+        const {file, theme} = this.props;
+        const style = getStyleSheet(theme);
+
+        return (
+            <View style={style.fileWrapper}>
+                <FileAttachmentIcon
+                    file={file}
+                    theme={theme}
+                />
+                {this.renderFileInfo()}
+            </View>
+        );
+    }
+}
diff --git a/app/components/file_attachment_list/file_attachment_icon.js b/app/components/file_attachment_list/file_attachment_icon.js
new file mode 100644
index 000000000..86d93f6db
--- /dev/null
+++ b/app/components/file_attachment_list/file_attachment_icon.js
@@ -0,0 +1,76 @@
+// Copyright (c) 2017 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React, {
+    Component,
+    PropTypes
+} from 'react';
+
+import {
+    View,
+    Image,
+    StyleSheet
+} from 'react-native';
+
+import * as Utils from 'service/utils/file_utils';
+
+import audioIcon from 'assets/images/icons/audio.png';
+import codeIcon from 'assets/images/icons/code.png';
+import excelIcon from 'assets/images/icons/excel.png';
+import genericIcon from 'assets/images/icons/generic.png';
+import imageIcon from 'assets/images/icons/image.png';
+import patchIcon from 'assets/images/icons/patch.png';
+import pdfIcon from 'assets/images/icons/pdf.png';
+import pptIcon from 'assets/images/icons/ppt.png';
+import videoIcon from 'assets/images/icons/video.png';
+import wordIcon from 'assets/images/icons/word.png';
+
+const styles = StyleSheet.create({
+    fileIcon: {
+        width: 60,
+        height: 60
+    },
+    fileIconWrapper: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: 100,
+        height: 100,
+        backgroundColor: '#fff'
+    }
+});
+
+const ICON_PATH_FROM_FILE_TYPE = {
+    audio: audioIcon,
+    code: codeIcon,
+    image: imageIcon,
+    other: genericIcon,
+    patch: patchIcon,
+    pdf: pdfIcon,
+    presentation: pptIcon,
+    spreadsheet: excelIcon,
+    video: videoIcon,
+    word: wordIcon
+};
+
+export default class FileAttachmentIcon extends Component {
+    static propTypes = {
+        file: PropTypes.object.isRequired
+    };
+
+    getFileIconPath(file) {
+        const fileType = Utils.getFileType(file);
+        return ICON_PATH_FROM_FILE_TYPE[fileType] || ICON_PATH_FROM_FILE_TYPE.other;
+    }
+
+    render() {
+        const {file} = this.props;
+        return (
+            <View style={styles.fileIconWrapper}>
+                <Image
+                    style={styles.fileIcon}
+                    source={this.getFileIconPath(file)}
+                />
+            </View>
+        );
+    }
+}
diff --git a/app/components/file_attachment_list/file_attachment_list.js b/app/components/file_attachment_list/file_attachment_list.js
new file mode 100644
index 000000000..085ba6f9c
--- /dev/null
+++ b/app/components/file_attachment_list/file_attachment_list.js
@@ -0,0 +1,43 @@
+// Copyright (c) 2017 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React, {
+    Component,
+    PropTypes
+} from 'react';
+
+import {
+    View
+} from 'react-native';
+
+import FileAttachment from './file_attachment';
+
+export default class FileAttachmentList extends Component {
+    static propTypes = {
+        actions: PropTypes.object.isRequired,
+        post: PropTypes.object.isRequired,
+        files: PropTypes.array.isRequired,
+        theme: PropTypes.object.isRequired
+    };
+
+    componentDidMount() {
+        const {post} = this.props;
+        this.props.actions.loadFilesForPostIfNecessary(post);
+    }
+
+    render() {
+        const fileAttachments = this.props.files.map((file) => (
+            <FileAttachment
+                key={file.id}
+                file={file}
+                theme={this.props.theme}
+            />
+        ));
+
+        return (
+            <View>
+                {fileAttachments}
+            </View>
+        );
+    }
+}
diff --git a/app/components/file_attachment_list/file_attachment_list_container.js b/app/components/file_attachment_list/file_attachment_list_container.js
new file mode 100644
index 000000000..1c20bb733
--- /dev/null
+++ b/app/components/file_attachment_list/file_attachment_list_container.js
@@ -0,0 +1,32 @@
+// Copyright (c) 2017 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import {bindActionCreators} from 'redux';
+import {connect} from 'react-redux';
+
+import {makeGetFilesForPost} from 'service/selectors/entities/files';
+import {loadFilesForPostIfNecessary} from 'app/actions/views/channel';
+import {getTheme} from 'service/selectors/entities/preferences';
+
+import FileAttachmentList from './file_attachment_list';
+
+function makeMapStateToProps() {
+    const getFilesForPost = makeGetFilesForPost();
+    return function mapStateToProps(state, ownProps) {
+        return {
+            ...ownProps,
+            files: getFilesForPost(state, ownProps),
+            theme: getTheme(state)
+        };
+    };
+}
+
+function mapDispatchToProps(dispatch) {
+    return {
+        actions: bindActionCreators({
+            loadFilesForPostIfNecessary
+        }, dispatch)
+    };
+}
+
+export default connect(makeMapStateToProps, mapDispatchToProps)(FileAttachmentList);
diff --git a/app/components/post/post.js b/app/components/post/post.js
index 273322e9a..5163c3f12 100644
--- a/app/components/post/post.js
+++ b/app/components/post/post.js
@@ -14,6 +14,7 @@ import FormattedText from 'app/components/formatted_text';
 import FormattedTime from 'app/components/formatted_time';
 import MattermostIcon from 'app/components/mattermost_icon';
 import ProfilePicture from 'app/components/profile_picture';
+import FileAttachmentList from 'app/components/file_attachment_list/file_attachment_list_container';
 import {makeStyleSheetFromTheme} from 'app/utils/theme';
 
 import {isSystemMessage} from 'service/utils/post_utils.js';
@@ -166,6 +167,16 @@ export default class Post extends React.Component {
         return <View style={replyBarStyle}/>;
     }
 
+    renderFileAttachments() {
+        const {post} = this.props;
+        const fileIds = post.file_ids || [];
+        let attachments;
+        if (fileIds.length > 0) {
+            attachments = (<FileAttachmentList post={post}/>);
+        }
+        return attachments;
+    }
+
     render() {
         const style = getStyleSheet(this.props.theme);
         const PROFILE_PICTURE_SIZE = 32;
@@ -251,6 +262,7 @@ export default class Post extends React.Component {
                         </View>
                         <View style={style.messageContainerWithReplyBar}>
                             {this.renderReplyBar(style)}
+                            {this.renderFileAttachments()}
                             <Text style={messageStyle}>
                                 {this.props.post.message}
                             </Text>
@@ -275,6 +287,7 @@ export default class Post extends React.Component {
                             </Text>
                         </View>
                         <View style={style.messageContainer}>
+                            {this.renderFileAttachments()}
                             <Text style={messageStyle}>
                                 {this.props.post.message}
                             </Text>
diff --git a/assets/base/images/icons/audio.png b/assets/base/images/icons/audio.png
new file mode 100644
index 0000000000000000000000000000000000000000..93cf6ef33ba799f82c80e69c6b17e8b91da33a03
GIT binary patch
literal 1691
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

literal 0
HcmV?d00001

diff --git a/assets/base/images/icons/code.png b/assets/base/images/icons/code.png
new file mode 100644
index 0000000000000000000000000000000000000000..94ee7bf4032fad13e627a610a6105e35f0d53e59
GIT binary patch
literal 1393
zcmV-%1&;cOP)<h;3K|Lk000e1NJLTq004LZ004Lh1^@s6Ib=4{000FzNkl<ZcmeFe
z0RaF21OOo0?Dh@pr~&{000000fR{Dwodb~VOb~^C+qP}nwr$(CZ9LnyZQHi3wYRsb
zpD|}r_f68hovKru>734Yotbl6okbc>T1aX_dYN>Lo(>K0AX3pLG?Da}?CuQi;S6(g
zDj=O8w?hN`0;$NM8|8LrfSWtu=9Bi8*`2}NnUv-L+*@vk2Kaj5<@po29U9<20KjL;
z?a%;^cfg%3w>yJ-Jn-zTEVn}g{2BoG9=RPF;5H7p*`z)EE8B&=l~kSdF=?lmJnTx!
zbO7!gq2`yQYNV@6E8J&E1?ybIwhTG6kK2Kl=l4D8?MCXk&fHwm{iPjlERfmD{{Y}q
zz*@Vn3m1p13+{89fxBAm7;-2-Qyg%oM2Cw*RtMLihJpN?0(kk~_k)@P@&oGO0xBf!
z8Nk!~fS23-zenSc)xiZdm$Y2~U!5F2GD*9FFVD;LLB`=0dNiLwx;lWbJxJLOFKs;P
z-9gF`4><tbYXf<^2k`TnXU#i3A?Nu+Hn^z2%7CZidALDN0o-c>dz|I)G=3A)3^Eyg
zUI5%P0bhUc@Q{!nG`Okp`3d0d`V^e!j=+!&E_?0m@Rml}nTH!>GW0_HUxi?=dz11V
z{+i<zgF-gAfZqoJk1uScyH-As^F1LOT=rZ8@Od~77Y5njZbw?^@Hq;vs1P!nd@%yt
zs}k^baz5boXS`xi$PXD@xA!jrzgGnEa$5=^8(j83z~OfpX?q?n8*%`+=?Q~-5OB+~
z5mYRG$PcI5#7mOlau1IKzMtmdk{}yg?xQZSx%;3vmk>vXY;d<HEp>Pwgw~S}IXc`c
z6Z$*(6@dTmc(_E!kNBSCWi4>IpC5o8E>75vk8FR)`rx8H4R!Re5Lo0V7;<#DX#(IL
z2J}=5C?y5*qx#|cC+Befl|sl|<Q0u@xwpo^1=%m*J=_u*GB1$R3U^1+3OqSS9pw8<
zCN9?qmoLh-Ku@3YaE*|smrPpXF<}+y3T4ST=LrLx<-u!8lpFVHQXrGh(ZC+4ZFR!s
zg#tYJRc(;T-%)sSj!L+X0iUGhLMCso0zKR-`h6FGtMBU)z9Bo8w6}h^3L$f_Xokag
zH?`k==}--syxfE*=jes2_IGLW@h{-_H1)qftAmUu=gia(SK+;3_Im>0u^bQAeS1(F
zWcK<No}6QFMJ?fBpB){(vXJB)X-jnUudu|Eb2<u#i!ZX%1ev|v0r+{#;0lDyzRLL~
z=O|j}u74{F)t~9`Fu~wT+>C}N=lm-WF231JGi0jyA#m=SfKnRw1j~m^^}6B7IR;l$
zqys1C<T}pRGC6SZ$OeOqC+EB>6s|$0`Bi}P93>F0L8f`zlIDg_&IuBHX1SF#=RBbH
zFB0JzWIQ?NT7#P`$X9#R@8hVqg0y1-f5gDyDuld%v>i})KT>|&$vOC+a^L~rsw4h+
z+@3(q$ADVT1nBK}`EbKRZj_?roI=uJ@vp<y4;P0F{<R$ki!OFt(4oQl0{+@gJzU_A
zvKTH@<Kp;}b708&;R28uE<FD`0PrO|JUnFmaN%VuHA$b~aN*>frKIg+>T5UBSEL%g
z-@)zRU{T=1T3xvv8sMh|C+FA!0B!^Xi{i;Sc8E*P86dYq1AHa$^8BUT4h`_nf|GOX
z00572z@3LD=hz`JIj4ru_Uu3w*U7%eYJks|o}6O`w()KHW&n54)2V?zk@N<s1>ZIt
zL^{!~OmTZ~Kmq^&03hi9>!2O#0000000002W`Pb+AQlt+00000NkvXXu0mjfNpz{9

literal 0
HcmV?d00001

diff --git a/assets/base/images/icons/excel.png b/assets/base/images/icons/excel.png
new file mode 100644
index 0000000000000000000000000000000000000000..58a059ce225ff93438ef7127c735024ec5855063
GIT binary patch
literal 477
zcmeAS@N?(olHy`uVBq!ia0vp^6(G#P3?%t>9eV(z%mREuT!FOCq!?0>*(>8IK%GJ*
zL4Lsu4hjYT@1K7!u)jWFegAxe1mAqeC(9Wa7+pMF978G?k6dHTJ8B@%@^GW9*}eap
zo>pyHHNRr{euFtRijVhmZ{~=8B4jaT+x@Z|efL?Pv-ZEMeDeILWa<u)^OY?-=ENSD
zv*Eqy5x)%koJG$p^&2V^KfhXMxw>g*;%5V2hTM(TcHB%ENuPi2D&yQzJ58wJxa=&^
zx@8waFMKo1vq-rhwwrSy?>3=ZN!kl_w+YR<k(7}n92FkmtbdG!_f+0X-89et0m8FF
z4NbVSGLpI%cCKx;D^K!XSiIrJA;)m#Z30%a^2;VTs{d2yT-%_=u(9-Ur3<gw!uj_j
z`wy12+gW@TNVu<k?cM*ga<8*j-@9>rr`>_A*2&Yum)sPey<5LKxaf%A`TY7ax%rXx
z`P=)}GBh+OaAi6EKbytKU_SZ%@0V%}917;r@m&4wt*zggKRC3YQ|GmqGM@zB-Om&b
P3~dHaS3j3^P6<r_qCd+J

literal 0
HcmV?d00001

diff --git a/assets/base/images/icons/generic.png b/assets/base/images/icons/generic.png
new file mode 100644
index 0000000000000000000000000000000000000000..a142d4f3d5ad0aeddef7af795c89143904481d64
GIT binary patch
literal 2262
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

literal 0
HcmV?d00001

diff --git a/assets/base/images/icons/image.png b/assets/base/images/icons/image.png
new file mode 100644
index 0000000000000000000000000000000000000000..39c36f30a0860be7ea6c20c48c40a352df820d9f
GIT binary patch
literal 1012
zcmV<Q0}K3#P)<h;3K|Lk000e1NJLTq004LZ004Lh1^@s6Ib=4{000BKNkl<ZcmeFu
zK@9*P0K>o;#{ouB0Ty^Ja80V<B1x)k%(dU$fB_q@0UNLZ8?XTb{%^pkN`P+z3>dHg
z3$OqSFkrxd0Rt9b0Ty5Z1`HVRVc#BrBuSz;jK`d9+qP}nf%9GPY}>YN+cwv>y<>ak
zzu#KD)m`X_%E}iJzui&3=$vnyRrwU*0UnL_FdB6jjrVc1<#RYNvsS`4P=If-l4W!(
zFmqPH0H^>1u!^O0EAWR<2p?KXM*=frS9C%lbYfQr-q|}^;D;u^3`Ouv%Htl7eirzl
z$%CN?hNd{~iWm=J7vBT7KoPX2IPj~`3{UtTxE_k2KBaMwgyv9+MeR#;c!N?HcX^D3
z=5c%m0^1K+Jf@eR96t6r@Sacvd!#JxVFADHwO}Qm|IqO<6vD?Ti@PjFLjf-IIq-@h
zz84S1iYW{H9F)g@z8^NMg5RJ3zhTvs#XUI0U*fj#`nZsJ3*l6JgNf+CM0|r&u~5q5
zE`t$Jf$nxLu;+i+e+mj=3>LD$#o74b*df7r`=JvG>0k?-{HB+}NR(o`1m-P?Ay5Rb
zTj1n3eIGPKDYlL|?_nsSdMsmsliTptXoco58C%8p!%RCA!&w$Mna!5qcPNL6*dpY-
zB`^?*=_d=E%x2Gp0*uFIA?Do=C7=WAS>SjZT^XfN9^<e{0rPf4JCu+cEO5Myz6cd)
zEH)09wK)1g2^wgDqi=FAbV4DF#)b=+cQ;f7dsyJ`8(ajvp$JA|{dwl?j5eqUp7t_u
zoJ(9-dleMJ2&_9})?(-b6-fma^D*$XxGBQAbx{Y!Gz{zDcBsfs_U-1gg)kh#%^}x*
z0wrW5TA?EQ+_%7oLvy&Lz;(w!4r;}!9s~~jEWEwI!vs0%VqXsY*G3x@CNi(P7jjs4
zUjp9(1-LWEnyt_ZId1E$Uz4>6#z1-89dMZ7viq|h__(mwHu3-2P)3Z$!dVXdH59_*
zD1|cQ@T^`Jy#YEP&%Kq^!1q9Aas!sj+Pz7OVInk*IWKF0PlXJC-?A3?C&&Qk#D<v&
z%=*o89?YAYT@M_5eX$ve5~l;Rb_tY0Ihnm&4}6A24D`I~f&a9KfvT{ClYv>c4V0HT
z&DFq9L3x?4oeRvGrBMy#W!kX1Yk|+VaG_l8THvl0EtFn%XTy~C=zs(O002PH|JUsZ
z3|gQ70|pEjFkk@|U;!3jz<>dJHedq=Y`_L=zy@r<1`ODM4cLGU*nkaqFkk~VV88}!
izy@r<25i89$4Ls<M^KrJt0b}j0000<MNUMnLSTabYR4`B

literal 0
HcmV?d00001

diff --git a/assets/base/images/icons/patch.png b/assets/base/images/icons/patch.png
new file mode 100644
index 0000000000000000000000000000000000000000..31478971e595a6315a017930a232079ef3fe499e
GIT binary patch
literal 1506
zcmV<81s(c{P)<h;3K|Lk000e1NJLTq004LZ004Lh1^@s6Ib=4{000H4Nkl<ZcmeI*
z1CShB6oBE0ZQCiuwvA`owr$(CZQG1hjLn^Fv_9{D)?#+hx9{mQRbN-ib@T7AZ=a57
zc%1qC`1%-uqi_|T!pE4671)9-$RDz>1<NrTALA)pg(EQx^<wsL60<6X;B35s<&X?n
zhSzX52BNYR$V}AcI00{98^n<~UcoVFVr5c`S`WwKGZa8VrT`z|Xw<f1iH9AG$FT$A
ziEVfU{jFf}Q7d9Ed<*g1SJ({|EG+*C*c<a9%FK;)Xcj&SGa<@-k3mri+YYZmBBTh<
zp_TUc+0(EM5>Z=mA}VT&+Y#SEeq+8wJ1ub!!&b<@m^cpdIc#-23MrMjAJu$|+ZHn*
z2{GTJr7v;&VhyBR%u4hKd)z50eM&aj7$4TS`ym&S5|fMF!}v+L0Fo9aANz$R?!Fc`
zBl57j>$ubGWjUjAF~(Kgfq|T}HF0zgI&SMgzY3X^XdP7C8ct60nIBL!h`^6Sj1v!J
zI_?n=<J3W!irX36AjYXIv`cr~O86dPLg5QkNN3<PASP5!Ojq3Y_R<_mThsE@$@2|z
zMVN<=i}AIBKiub1jXN6Rsn5_Qfn6sTBH!ab;GwB(N}uELhmfif`TF-GDkOV;S3K1{
ziS_;f@zn0g>|tI6@zByFU$HKPcxnzRMCIB0Z3>$fBofbJ&wteTI?2EXK|J<(q6-}Y
zvA|yHm&ih&vB2JXq^w0Yz)lP7t!=1N+9FSeSYWRmUD_hQvcTT^sH6q9LZJorUOt)>
zx4;u27FdO2id*12u)sRJ{NKe@!!}r89pb3+&&7>^zyj+rp!gr!EwC16{c~||s|##_
zU-{?a)~X9^ftUQbuqF_|0xMF4x-kx8Ab<r{W>}2F32Fmd;3HxjZiG0t95d47kt738
z!i+RofLw@USH?KJ=y;@G52dp?>*7+!TXLU_arnaFzU3+rn67(>(=$tsc25?fQ-nq+
ze+qG6MvTKcNWf-CZ20*}&b|wCh(iMQPQ(K525}%O7RX6{3p^F#Ks?4l)CRV|dHMre
zV0($y{t_LB1nkp@1wIhsK$feoNpVz-P~f{<eoa~kap0VY#BGCYhyycR{#2QZgO$f^
ziv<uzK6HDs0r(ad;J7r|ErmgE$EC^1cnsSiu1_}H0MWqC2N!?3@OTTX`-H#VEjt!?
zsBOB_z3HxwZJX7;ZPqrvM`Ppr1?mD@;4}4Kd}bG)>A!r`E+19*K5T*UlI{@>7WnAm
z7T8kp5EdK4^2Z{-w7^QoD5-gww!lZ}9%X2w3~QIQ(5Ec0w;oPpp@S^2xB5hNAh-<#
zFXp!G;;GqAE)a8XxANYUV<E&tyHGn~x6Pf63Q@YP&Lv6QzHg`cXKyh##+nWBPyzNY
z$G+wH+HQ=c|JHWE$2bvFFz!DN#$DJ3(Qs?KWFx-{F`@LV-rLKXI9lnwL9{tR?=9ZV
z=cthG3#mFG8{(A7Lc1gqdUBs#vwx;9iF^#=gt;$>YhJ5k1|(4CJ5&wo!sgak2?>N*
ziPk}1z1|NyAQ@%i=<aenP%b1ROfJT_o<p$@3Lt4`ad!*Lu#tn)9@*mV6Sj#m``F8M
zT4ZBvSjPrUwi6R6*?|6GpAFRqt0AUbmZGaq)7`#@n1p<V7QRh+tAblm1Sys&#C53b
z`zYN_5c4k^FhSGI#;;*vfzQxN+hER$I3?oel;b!a6||4neI61aMR*RaqBI44R76fY
zevd(F!X>e}elN^}C^HAsWA^y#{dqThrQ`$D)RNz4Ep~rAhHVf}Y{P@-YXuVzT@T0L
zlaQXN%Et#d3bn0RYO$N(7`%cw#F5Q-0Y{**mB~!(${2{V@EVq8@T<)dyo56_5S6Te
zyO;B!I09GTNqm4=SdJ}!$Org0upBe+0iMJaI1GbPH>Tk63$8J(4Rr7=XaE2J07*qo
IM6N<$g8mWGBme*a

literal 0
HcmV?d00001

diff --git a/assets/base/images/icons/pdf.png b/assets/base/images/icons/pdf.png
new file mode 100644
index 0000000000000000000000000000000000000000..f6bec396e65697e19d9dde0606ad3e084550514d
GIT binary patch
literal 2301
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
X!Fh;2Ql@Z}00000NkvXXu0mjfDO6VW

literal 0
HcmV?d00001

diff --git a/assets/base/images/icons/ppt.png b/assets/base/images/icons/ppt.png
new file mode 100644
index 0000000000000000000000000000000000000000..3a082df1965ec7c9f179b03ab0e7e3c58e6b6120
GIT binary patch
literal 2018
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
AZ2$lO

literal 0
HcmV?d00001

diff --git a/assets/base/images/icons/video.png b/assets/base/images/icons/video.png
new file mode 100644
index 0000000000000000000000000000000000000000..d3e6c38d2c946231224db03a208e3a88aa543e8e
GIT binary patch
literal 662
zcmeAS@N?(olHy`uVBq!ia0vp^6(G#P1|%(0%q}r7FvWVhIEGX(zP;I)7Ro4d{9~}!
zQH_o!hZXEQ@>WT-Ef5fJ@V_Y1HDT`|5l4=_2i7I3c<={^E?hE2Vz>F$YwsU9gm0BK
zeE$CPWA21vyD#tOn3@@b!RD>4t%*^-kGEWXZQ{4sB&U!)^U=X6*^}6UABgfV&RMMa
zp^ZIoTj68HD|`kCjA8YSvzb=g9B5!<Haoy}gF!k$n=z+>*C63Q1Mdb#kPsJx^n*Wf
z;g_y|QM~I{?7Nb&?(6OMKkZ_@t7i)_@A=w3Z~4z<Zy2`Qda2Kv#C&Jl#CKQro^N=4
zKmEYh_r?!y$}OMl+sLR_J)iOVeuOYzt+%)Bj`I!KP-VZqOMdvj|9tsn#sj8}x8<1D
z@$O;VVfMl3!K?$XGY#J|$8i5h-!;GQcYKNMgXJ%KzCWlskbn8=mgCdcL>+kj(#`71
zmxKoHJCO&DzSnv1s9dbzpf&f7-*fj~-wvdI%w>)FbB<|UO*-TGEs<}}G3k}3Gwxqe
zo6Z>T_x{rCEfEjSF`0q<&&C7tJ~OKC8P4+*G+vQTU=&MWWYamo^hYz+fBEHqCezO?
zfBHq%X@BGOOBeU=Su)>O-tmj@k5sEYz50gFFY!z4X5VvZW4HB>J7udspP!h2aca2u
z4F;eU7PhZ%ES3E;$@^|yTiIvRmtW1|C+mIrZhEr4PyOW$`vUvs7vGnk(tnv|HI;9f
za;BZF$83Q=8y!O%StA-4`)xZm_0ImLFQj@ogUiN4n16B1WRnbg3!clX>eqRLW83Ns
c7}PPgzdPvrk4c^pnBEvXUHx3vIVCg!08ZgF)Bpeg

literal 0
HcmV?d00001

diff --git a/assets/base/images/icons/word.png b/assets/base/images/icons/word.png
new file mode 100644
index 0000000000000000000000000000000000000000..2096dc60936271bd3c6f07b096afa0a709584437
GIT binary patch
literal 617
zcmeAS@N?(olHy`uVBq!ia0vp^6(G#P3?%t>9eV(z%mREuT!C~%(jHRLHmCe+K%GJ*
zL4Lsu>;DHB)Zc$!(7#{7VgC690bhA>-75?Xj2Apz978G?lNK0Durgdbr4a2Tz}ED(
zgRAMlU;p3cM*Hv0*4aHRQo_@*>i3>EOqrql6F;wwYdcoCRU`4M*oxJ=B&F219gq=Y
z`mL2FX|Y)Bdiuox-PJQv9yoIMDNeX^|CS~@v+e>51B39l6Pr(o1?=Gv;g5W=KcA&G
z@j=8=P4<IRGhc8se~*4ybilo7vFoItk9Z%Pdyw%Uoo~0#hp8Vjrkt@n!L&c3Uex(h
z@6G53JU^AM_qyFki&U$~uGsSSK*q+ilkBB-|B&AqxT#2>b6duoIW<D6+1yGO#d>?Y
zRK5Ob$r%-W%=uew<h5?cuey`w-#n*jRI*IW=yA)rpc440dG`Cok5-Dr#Ch0#yw*GC
z|L3>&)2774PV_K1;Vb;O^~qh)PL?G7w>ttR#C)(nAl|$60jFcp@&63*CVU!gPhQ@g
zzCh=sgr<u4|9v7>4Q&sYBJCdWIsIx@F@C{tbi$ka(+k^`!#<qw=MoKORK6(P+rV{T
z%AcGN8SNLF7>kxjOp@&Um%+11U(ebydHMt$<p-UyauX}HmCJ5Es?A)|rl)B6a{XN^
zH3kN@CV^!O|D6pxx;ZAPVX7g+o}LXKL=zk4F$;=`vAwVqNKAxs?tNsu_U6MoqeB&L
Qz?f(7boFyt=akR{0G>AueE<Le

literal 0
HcmV?d00001

diff --git a/package.json b/package.json
index fc796900a..e280c98ee 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
     "eslint-plugin-mocha": "4.8.0",
     "eslint-plugin-react": "6.8.0",
     "fetch-mock": "5.8.1",
+    "form-data": "2.1.2",
     "mocha": "3.2.0",
     "react-addons-test-utils": "15.4.2",
     "react-dom": "15.4.2",
diff --git a/service/actions/files.js b/service/actions/files.js
new file mode 100644
index 000000000..8f03cdb2a
--- /dev/null
+++ b/service/actions/files.js
@@ -0,0 +1,34 @@
+// Copyright (c) 2017 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import {batchActions} from 'redux-batched-actions';
+
+import Client from 'service/client';
+import {FilesTypes} from 'service/constants';
+import {forceLogoutIfNecessary} from './helpers';
+
+export function getFilesForPost(teamId, channelId, postId) {
+    return async (dispatch, getState) => {
+        dispatch({type: FilesTypes.FETCH_FILES_FOR_POST_REQUEST}, getState);
+        let files;
+
+        try {
+            files = await Client.getFileInfosForPost(teamId, channelId, postId);
+        } catch (error) {
+            forceLogoutIfNecessary(error, dispatch);
+            dispatch({type: FilesTypes.FETCH_FILES_FOR_POST_FAILURE, error}, getState);
+            return;
+        }
+
+        dispatch(batchActions([
+            {
+                type: FilesTypes.RECEIVED_FILES_FOR_POST,
+                data: files,
+                postId
+            },
+            {
+                type: FilesTypes.FETCH_FILES_FOR_POST_SUCCESS
+            }
+        ]), getState);
+    };
+}
diff --git a/service/client/client.js b/service/client/client.js
index 1e7cd3413..4a29dbe91 100644
--- a/service/client/client.js
+++ b/service/client/client.js
@@ -127,9 +127,13 @@ export default class Client {
             headers[HEADER_AUTH] = `${HEADER_BEARER} ${this.token}`;
         }
 
+        if (options.headers) {
+            Object.assign(headers, options.headers);
+        }
+
         return {
-            headers,
-            ...options
+            ...options,
+            headers
         };
     }
 
@@ -613,6 +617,26 @@ export default class Client {
         );
     };
 
+    getFileInfosForPost = async (teamId, channelId, postId) => {
+        return this.doFetch(
+            `${this.getChannelNeededRoute(teamId, channelId)}/posts/${postId}/get_file_infos`,
+            {method: 'get'}
+        );
+    };
+
+    uploadFile = async (teamId, channelId, clientId, fileFormData, formBoundary) => {
+        return this.doFetch(
+            `${this.getTeamNeededRoute(teamId)}/files/upload`,
+            {
+                method: 'post',
+                headers: {
+                    'Content-Type': `multipart/form-data; boundary=${formBoundary}`
+                },
+                body: fileFormData
+            }
+        );
+    };
+
     // Preferences routes
     getMyPreferences = async () => {
         return this.doFetch(
diff --git a/service/constants/constants.js b/service/constants/constants.js
index f376bff73..f966a1625 100644
--- a/service/constants/constants.js
+++ b/service/constants/constants.js
@@ -37,4 +37,19 @@ const Constants = {
     POST_PURPOSE_CHANGE: 'system_purpose_change'
 };
 
-export default Constants;
+const FileConstants = {
+    AUDIO_TYPES: ['mp3', 'wav', 'wma', 'm4a', 'flac', 'aac', 'ogg'],
+    CODE_TYPES: ['as', 'applescript', 'osascript', 'scpt', 'bash', 'sh', 'zsh', 'clj', 'boot', 'cl2', 'cljc', 'cljs', 'cljs.hl', 'cljscm', 'cljx', 'hic', 'coffee', '_coffee', 'cake', 'cjsx', 'cson', 'iced', 'cpp', 'c', 'cc', 'h', 'c++', 'h++', 'hpp', 'cs', 'csharp', 'css', 'd', 'di', 'dart', 'delphi', 'dpr', 'dfm', 'pas', 'pascal', 'freepascal', 'lazarus', 'lpr', 'lfm', 'diff', 'django', 'jinja', 'dockerfile', 'docker', 'erl', 'f90', 'f95', 'fsharp', 'fs', 'gcode', 'nc', 'go', 'groovy', 'handlebars', 'hbs', 'html.hbs', 'html.handlebars', 'hs', 'hx', 'java', 'jsp', 'js', 'jsx', 'json', 'jl', 'kt', 'ktm', 'kts', 'less', 'lisp', 'lua', 'mk', 'mak', 'md', 'mkdown', 'mkd', 'matlab', 'm', 'mm', 'objc', 'obj-c', 'ml', 'perl', 'pl', 'php', 'php3', 'php4', 'php5', 'php6', 'ps', 'ps1', 'pp', 'py', 'gyp', 'r', 'ruby', 'rb', 'gemspec', 'podspec', 'thor', 'irb', 'rs', 'scala', 'scm', 'sld', 'scss', 'st', 'sql', 'swift', 'tex', 'txt', 'vbnet', 'vb', 'bas', 'vbs', 'v', 'veo', 'xml', 'html', 'xhtml', 'rss', 'atom', 'xsl', 'plist', 'yaml'],
+    IMAGE_TYPES: ['jpg', 'gif', 'bmp', 'png', 'jpeg'],
+    PATCH_TYPES: ['patch'],
+    PDF_TYPES: ['pdf'],
+    PRESENTATION_TYPES: ['ppt', 'pptx'],
+    SPREADSHEET_TYPES: ['xlsx', 'csv'],
+    VIDEO_TYPES: ['mp4', 'avi', 'webm', 'mkv', 'wmv', 'mpg', 'mov', 'flv'],
+    WORD_TYPES: ['doc', 'docx']
+};
+
+export default {
+    ...Constants,
+    ...FileConstants
+};
diff --git a/service/constants/files.js b/service/constants/files.js
new file mode 100644
index 000000000..81c9f4c56
--- /dev/null
+++ b/service/constants/files.js
@@ -0,0 +1,14 @@
+// Copyright (c) 2017 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import keyMirror from 'service/utils/key_mirror';
+
+const FilesTypes = keyMirror({
+    FETCH_FILES_FOR_POST_REQUEST: null,
+    FETCH_FILES_FOR_POST_SUCCESS: null,
+    FETCH_FILES_FOR_POST_FAILURE: null,
+
+    RECEIVED_FILES_FOR_POST: null
+});
+
+export default FilesTypes;
diff --git a/service/constants/index.js b/service/constants/index.js
index d83974f3d..9d07cdfb9 100644
--- a/service/constants/index.js
+++ b/service/constants/index.js
@@ -7,6 +7,7 @@ import GeneralTypes from './general';
 import UsersTypes from './users';
 import TeamsTypes from './teams';
 import PostsTypes from './posts';
+import FilesTypes from './files';
 import PreferencesTypes from './preferences';
 import RequestStatus from './request_status';
 import WebsocketEvents from './websocket';
@@ -23,6 +24,7 @@ export {
     TeamsTypes,
     ChannelTypes,
     PostsTypes,
+    FilesTypes,
     PreferencesTypes,
     Preferences,
     RequestStatus,
diff --git a/service/reducers/entities/files.js b/service/reducers/entities/files.js
new file mode 100644
index 000000000..bc9a3bad8
--- /dev/null
+++ b/service/reducers/entities/files.js
@@ -0,0 +1,47 @@
+// Copyright (c) 2017 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import {combineReducers} from 'redux';
+import {FilesTypes, UsersTypes} from 'service/constants';
+
+function files(state = {}, action) {
+    switch (action.type) {
+    case FilesTypes.RECEIVED_FILES_FOR_POST: {
+        const filesById = action.data.reduce((filesMap, file) => {
+            return {...filesMap,
+                [file.id]: file
+            };
+        }, {});
+        return {...state,
+            ...filesById
+        };
+    }
+
+    case UsersTypes.LOGOUT_SUCCESS:
+        return {};
+    default:
+        return state;
+    }
+}
+
+function fileIdsByPostId(state = {}, action) {
+    switch (action.type) {
+    case FilesTypes.RECEIVED_FILES_FOR_POST: {
+        const {data, postId} = action;
+        const filesIdsForPost = data.map((file) => file.id);
+        return {...state,
+            [postId]: filesIdsForPost
+        };
+    }
+
+    case UsersTypes.LOGOUT_SUCCESS:
+        return {};
+    default:
+        return state;
+    }
+}
+
+export default combineReducers({
+    files,
+    fileIdsByPostId
+});
diff --git a/service/reducers/entities/index.js b/service/reducers/entities/index.js
index 03753e6c9..7f90ef8ae 100644
--- a/service/reducers/entities/index.js
+++ b/service/reducers/entities/index.js
@@ -8,6 +8,7 @@ import general from './general';
 import users from './users';
 import teams from './teams';
 import posts from './posts';
+import files from './files';
 import preferences from './preferences';
 
 export default combineReducers({
@@ -16,5 +17,6 @@ export default combineReducers({
     teams,
     channels,
     posts,
+    files,
     preferences
 });
diff --git a/service/reducers/requests/files.js b/service/reducers/requests/files.js
new file mode 100644
index 000000000..044dd7b94
--- /dev/null
+++ b/service/reducers/requests/files.js
@@ -0,0 +1,21 @@
+// Copyright (c) 2017 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import {combineReducers} from 'redux';
+
+import {handleRequest, initialRequestState} from './helpers';
+import {FilesTypes} from 'service/constants';
+
+function getFilesForPost(state = initialRequestState(), action) {
+    return handleRequest(
+        FilesTypes.FETCH_FILES_FOR_POST_REQUEST,
+        FilesTypes.FETCH_FILES_FOR_POST_SUCCESS,
+        FilesTypes.FETCH_FILES_FOR_POST_FAILURE,
+        state,
+        action
+    );
+}
+
+export default combineReducers({
+    getFilesForPost
+});
diff --git a/service/reducers/requests/index.js b/service/reducers/requests/index.js
index 08bcf4103..b65caeda9 100644
--- a/service/reducers/requests/index.js
+++ b/service/reducers/requests/index.js
@@ -4,6 +4,7 @@
 import {combineReducers} from 'redux';
 
 import channels from './channels';
+import files from './files';
 import general from './general';
 import posts from './posts';
 import teams from './teams';
@@ -12,6 +13,7 @@ import preferences from './preferences';
 
 export default combineReducers({
     channels,
+    files,
     general,
     posts,
     teams,
diff --git a/service/selectors/entities/files.js b/service/selectors/entities/files.js
new file mode 100644
index 000000000..f0e6f448e
--- /dev/null
+++ b/service/selectors/entities/files.js
@@ -0,0 +1,21 @@
+// Copyright (c) 2017 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import {createSelector} from 'reselect';
+
+function getAllFiles(state) {
+    return state.entities.files.files;
+}
+
+function getFilesIdsForPost(state, props) {
+    return state.entities.files.fileIdsByPostId[props.post.id] || [];
+}
+
+export function makeGetFilesForPost() {
+    return createSelector(
+        [getAllFiles, getFilesIdsForPost],
+        (allFiles, fileIdsForPost) => {
+            return fileIdsForPost.map((id) => allFiles[id]);
+        }
+    );
+}
diff --git a/service/utils/file_utils.js b/service/utils/file_utils.js
new file mode 100644
index 000000000..55b73f7a7
--- /dev/null
+++ b/service/utils/file_utils.js
@@ -0,0 +1,42 @@
+// Copyright (c) 2017 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import {Constants} from 'service/constants';
+
+export function getFormattedFileSize(file) {
+    const bytes = file.size;
+    const fileSizes = [
+        ['TB', 1024 * 1024 * 1024 * 1024],
+        ['GB', 1024 * 1024 * 1024],
+        ['MB', 1024 * 1024],
+        ['KB', 1024]
+    ];
+    const size = fileSizes.find((unitAndMinBytes) => {
+        const minBytes = unitAndMinBytes[1];
+        return bytes > minBytes;
+    });
+    if (size) {
+        return `${Math.floor(bytes / size[1])} ${size[0]}`;
+    }
+    return `${bytes} B`;
+}
+
+export function getFileType(file) {
+    const fileExt = file.extension.toLowerCase();
+    const fileTypes = [
+        'image',
+        'code',
+        'pdf',
+        'video',
+        'audio',
+        'spreadsheet',
+        'word',
+        'presentation',
+        'patch'
+    ];
+    return fileTypes.find((fileType) => {
+        const constForFileTypeExtList = `${fileType}_types`.toUpperCase();
+        const fileTypeExts = Constants[constForFileTypeExtList];
+        return fileTypeExts.indexOf(fileExt) > -1;
+    }) || 'other';
+}
diff --git a/test/assets/images/test.png b/test/assets/images/test.png
new file mode 100644
index 0000000000000000000000000000000000000000..13ede8580481b96b347c2d70075dac61988fbb78
GIT binary patch
literal 5054
zcmZvAcQo5?*gjRYs#4UbhFC>wl~#>fLF`dg)TXIwt<)A(t-Yzel_*-9qSUO>QY*A(
zkeG=TBSu1a^F6;me(xXeIiK@<?&}%%eP7peKj%5;i7_$KW@fy}NJT}(tgEAGN<~FY
zpxCSQG?X^w@KA<|iiXO>z)WivB=Y~h!`^=K!2x-9k2o{8laqh8y?u-vzaWz@&dyH8
z{~q@KBD8m&pPr&5AIu4fFREyrZEj(`{15wnp(Gxlq~!2LpHH#4-Qv=-jZKWM33-2i
zzou?MQJv7%v0vLTcU$u4*T8Oh#nJD<b+<PQ4^?(Qmt*~c&bGEtcV!73-8&gM<h^}-
zQORaR?AgxFVb{--e^W%%Jk}S!@je12et%I-d&$&tzrK;Qw7d}(b@XTW48KcSS=~xX
zMMDgio;=(Bn2ynZy!yhG(AmBG)EXD`{&;+1J0*j-u()LObU|Kq#meER|My;bB@P}!
zXl*-P$8M)(;etQl0)jWgqvxd`9(@0S^MAVveZ7;Nw;36?lT&a!id<CI+{w&cb#mE?
zPd;5=-*^|c4)a}m>9%6+u=q&h<nQG17;?o9iuDOxkW)r$=wS>@x8jo4-MvnxXExr2
z;`594YwAgh=w&nOlgTNJp2^t`o;Wjm^k--@B4#^1dn^9qvboK=hxf_U^hQYd(ZHX*
z%9`b8_S>l$Xmy>vFO>&P-<M3xSD(My`&vb4?^-f8-z_OSXlYxqaXRej!}<rU!~8Zr
zL}I-I_UpbKkBqH4I$vB|Y{e#`?%Z2@4cjgKa?sd(JT!vO`-FxVY$bd=nfSMCW_9qb
zX<kNgURLS+=oq78jQ@lnVU~6grTBuPi}UlfS03~C<X0V>(OUZW!s1n@m&=xRBsAun
zL^{Q7tb6*bxwzxrewY=!yKG@gT3$hG>aW;7pA)>hWN5bE&_wvretvp3|KQR5eWexq
z7u(5cvjTT8+D03pk;GZlf`ZzDyxN?I)S@b6J2jIyzi@thj4^z&=K5wcD(;}Ul}sS4
zIlGb%4;PfcxWISoZ~S(03+F_o*Is#UC8nINuI*RXou8b{@{8@3eLWr?ofDHjU0dJD
z$|D~htynwG-&5F(N!Y8ZMct7(ClWWK<L87W_A06mnpzHj_AWiPAkLxCVBMp^p;?gV
zR%p;T<w(%@m>NC7|7^U;QWQ@`1$eEiscsfvw}sSja--&o=!RZcpLov2yU)R!+@DjI
z$zs)I<jMayzT)j`)I&INAYe(DPx7^KbwwSz{{{ZP39tJ%L*~6!-XvM)o}vQCpWng|
zQor{m>%vogkTByA-B!^bWg!B#;y=nPbT}J!aGND@bUQeO@xHtuk`QhQ5kyiN*P3{w
zd?S=l83+&aNtZS5RBwg9F6hu`4Y==8&;e=XVm=_~j`sl%2vvX*ku_YBu0`|E1Yb%u
z$M8f*s$^u3Qad1&z<)pxz<qTuuoJM&4=k&R1d;6m%2Wkyg%@y*QY95Mc!CJOj#RiW
z{7??}dPu1q7)oIA-6W_!DXFNz<f#-gsgu@UZ4!joaYUHWqLPTMgrP#&6o*D~$Nt0k
zi6@^;N?5|*ked05bP9p@jf}}xwMakbcMbX8-H0U|AMP4TbuwtdNrBU)_}e^h$hcqn
zg5G6B1L0h9LEsP7hT1?{SE)ouh(y`MG8<>qfh}Fzh~{+Z#Y?<VTSYnRqr}l$tX;?S
zNouTYmmKGhwT^-<Ow3Hwp^vZIWO__}Zk%s!axcroWfu@1T-F3!lJ~5QxJ<}iqkbHH
zg_XfaP*GG*Y~nh@%Kh7C{UdvAZZ#VVa9{gpjyvlt<=*Jrzf~w}U%Z4Xl?8$)<a}!D
z&-$kh^)F0KC6CjWfFVOxsbSGwSjl7mMeRV>IM@QDP=*;M3lA{%yKO+^9Gy2__pqIP
zNQZoj^wXw&VWY?;Z;aq9d&~TtJGeL0fc~V_9d96#a&hXflBJJr`EW^O{UO8BS^W8V
z{dzyO2gI}a4;^<H@8Xc<p+Xb0z`A+3%Nl7jLx@P7=a1A7et2z*1Oxa<jBvo?N+<0x
zVU^(wJ=}4zFX0-Ho%Fs+IfWk(^IskstPWH7`aTZwZ)9hiDB|i~sv28=AK6jcIaYn{
z+?x&h!iG&?APyb5rs_pt0$`j8Dc-fNTl3%6dwJBS$9(i{5Sv)f=BQu=Jl8kJb?WKA
z%|aeXUmt`$;9hqA8kA(PbrNnE%>*Pjq(}ezp!#GS%-5!&ErnlOfj5Zu=tM<fv9Bu7
zy?bBMYUz245&k=uUNROGj~Qe572z0t*jF@ww)#UR7K?*PN~dSsrbSaLw$7e<%&1!h
zNYPLhEMme~xigVw-+3NsYU7jXwIp#UdEO--!dQceGnHXl+D{E1f~<*1fFQz^fdz@=
zV^AxS6X72A-30)Z|6bDbg|bJaQ|w?B_R~D(s`r$9Hra|So$pR^z61Q1P=r^U<>D}9
zMteTXVE#@Q{ECJVjz*(XK^~WQ3Rj6gK_XuYUh8nOEj$4U!k!Ly!Dh1F_C_Uk$kHol
z-x+<-B0=MINx1U)6=?kV`^JbG1I<TRY%o89Trp~qETmuE!6{Sl9JtKS-%PXltnl)o
z58-1nx)2q0y?=NPv{vIJu?^xci)9X<11kXAg?r(u+&y@Ek;(eYtQj(l%kM->5f-%k
zJ`?nlsck%9+S6yte$mRWrN2%UWhB012Y*hg{lLbef#njEI|WU~AwREb2m^xyL+F`b
zuuJhq{?3Dy%;f_9h?T}j)WUWgG`TNx@Upue3u+sCIypbm%rPBI2W<Q-=a?nRoN)D$
z#?9=rTnD1V4+8lV>a)LMjWvW$=n;2DqIAAir4u|~ZP>FzrjV-d$L`iG3WfR~(7A&$
zz~1wJwWg4KQDfpcCzT4Cw;OIwfE-zd-7Pq5wIA;Dr?`#{J&tCd$<ArXUNc%LkF7@3
zM2y*0d^C4yOyK;i@;M^$Yw;!)2gm_G={KxbmFWRFQcH+Gy<w}(X|d@(hN^+mW%GbA
za#mTzqOFN4*TEs5BVGVVY`R`lLMPQ_EwF+dtRjh<z8%6O1;$?0-RDe3rgG$bjj2YI
zfw9l6=vURCH+8+(p=s5nEs1)RSgV16)&<N`*GFgyidjr+^}es3t`9JnDV+7H6^^l}
zQHaR%n>!aG>nTR@5pubx?A5EQ;RT=pRkiW<Z5OA=6s#irPWZ_9xH6#i(LP8-c&z3I
z!V1~j%OpqfUep6nq}-EWY(T_tf?@x5d)&Qoq}cd1r-x&vH&#jsIo*j}TS`;EL|PNy
z-RoT&H_chmH=%KSQd_^-w<ux3Ypd<aROjz9KtH&xj|A530xbjo<-1Oa#s9~rlCugJ
zHD;NTidMVOKbH>N&=p4d65IjS5LYt4Pf0S0t}IjwXRTpGIk#0H%uqKzc#IS@Wq-or
zIQj32)6-C*)hqWa20oO%xwuxRSa8y=o_k(I<u!3!@d?sA$^_J$LS}XgtBSN-|B5=T
zyY5ZV1!Oax0cHG4g!@)fVj*Ay4k^MWqMl$cHwt_V8we93ikjWA0zUBpwlmpyDQed9
zrEOfi5vPpmeSg6>fd7<%@8O~-vy90I6H3q%ZTejcwAIElH*dv=<3$f6w<&sFLhY*x
zJzL=Ydf32Yt34WKts<m*6y~L|O{py=OiqPPO3$2H<Fb-F1>?f3>zDoHr#KJXD9E@+
z0%2JtePhtKo>DWaSDS7AytZj(9&~SJv(@IKYbLC+ED$sr7pmMS++;BsB|7QbD&<W`
z2!+~x)IOJBhFYUq`dbR3M|n}Z5*XF$GFK?_&7(8)E&upN6=j5k`%tI}qP#L1(<?)*
zEOfM|kPYYzqe?+Srl83e0(gc(KoM2{@z5sYMmV?!N?9${CGl&ztJmnAsCSJU#rJd)
zcfK3>M6SGEU52vpEU0~91moh#iy+Z^8vk`LL495=p(^fA5Sz&!$31m=1C*k^^4p~^
zKtG6hej$JDrPUt_*+p-uR?E$_=Kc%;=Yv&>rkGC^$i58YLZ#QKh_Wlde1T<DlH`%y
zag$+K?Opr-Jb$$DIj;Kg(ky7Y;h7`_8!5J)#un-^{*3fop*RS6%5B@uVnhVF7uir)
ziU_qCi}~Nq$<^|*E{@4{@p#Gfd-jF~VJ618Ls_+W)DvmKqho0(_S|7dE9J9vD#Uw0
znP2Q-Bvx0t;rJ~2-PL=udSXG2gHtmyq}ScPt0$@dC~4P}rrmYe2zkXFOjpG<sy-sJ
zL5XZ(qIbtY*%jE%DIvkfEXMZV#3++NP!=iOmvB+sD3R=CV(SA`o(^MG>_SOzVk=yR
zvlzGqX(<=bY8aexNEr%jzn?wX5fP7Lq)7fHEt&R7hu0=H3+%es5)u@$eGx=J3$oua
zdjCa_vA9#PHGo&h>`T1LST3^0OG44y)P;6P85Fyaaw!*76g7xF4wNNbJ}y3m$j>UA
zKY2_TU;XCCAVhe~9bEnpaq+hu%cb^#Sv~9Sb**3cR}u_PF=pIkZ%+sx)`=j<IX>%=
z#bfM9xcyDeoaEiI7F%3%=uC*SjZaMY_U#78JN{TnUe(wVi<u4+cCxuA#2(}9b7Aa)
z(UcT-<J8txlz5@z>EPRCPN;Ddu*3{wM}KewH8OrRO<uYzr>`mXBaVY~0^sM0@JyZQ
zmtIoOnud5n79C_s%rK~bv~$6S^zO9iL^rD}VKOIAnL3(b@??mG&G6C9b~;VDx~3Ym
zLDREC_QJmfiJ$9|_(H;`T?Rr{-6p50WozK~;i97p{L{Lya!)>pcOjqozGPZ#Vrkz<
zlkPxDUi)vcOoc0N%e4{Sw>1@OA(&CL8PZA)wlr0H#JF0#%$yTQ&w8H!FA@wj5bCN5
zls;gqf$)hR@Lhic7@_@f<Y4Q$21a|&V6*Vh%(T$qN<T48QfBSVp3$E}m|6=&bA%4t
zBp20<OZkw=tJ}FX+?PJ){v1crL~;Flk_>Cvoe>uZ5zzGt(C_Xk6G2??2=pH4owD?p
zQE%yFH60IrSwwwzLq4YkSc7rc-Oe6SzYO)C(mZ_IEBSgv_hVY~p84j21Qj5dxcMxh
z$ihJq_{JOFo`6*=!&KtuHFZRz<CR#{K71@lu-l0;*<nvvX>)Zfy2H7bqGgRlu5Cak
z<<2~5llP8w-rK<>Wmjgf;-OjiEmWDxd=?ecd8}hJ+eM)pgia>O?xypDksrh<hU9|;
zw5@W`!Y6-3VJNHNvxT{cDrY_ZipoEmGc$L8uoFS9rQOlluq_T2?M^m5XzD0P@{;gT
z@!de*gQxQU9&KT;c-o?$_yL&kQjx@bOhI9#54f05`BuJ`3Fv#$3V(0+N3x`r{h(F6
zjr{W6Js-kpQP<M%jkMR#u||Y=r^%!1dE5rZ+J)5{YC-#{GUby3E2ady%4KuaTY)ok
z$OI&8sMA=wa~=JH$G=$BxwbkJ-3#cMLn>&@E9gP&%m2miXtEeUl~d8ZX7EQOdU?4x
zRm+ETcO<G|VkBla^u1n>1k54!5mOYe+-v6+8k3hMbggXUrV%#>DB#|l#;A4(>$UcQ
zoAbdYeVyq$nx2a}kK@6W5acN`kop!er%{>usU1Qe`GjjYdLnxGV{igLX$~eJpYQ7y
ze$yRiN+<}Gn%%znyC0DM1qRALe0%vuhm1|^c`g`YG0j|;Wj-xm>?x`?Br|TAw8xRR
znPotsF(2jp)yu)Y|CHe7^RyYd$Se0vh(4-XqErc~jW282QJ;P)ou42KuXx*wrG-q8
z<!^BVij|NoTV?43wPFFxJcd4Y@SFE^WxmLIJ#yl-(V30kVF7U%Gwt;COHLnf$`xbV
zSnA62wArfs_|3@{V}1lVU`}I{yY1Rz5Ne=%s9+s&z`iwi#4!9hUc<mtNjee>Exbpp
z6+Q`w21m>!bL2VPug7B2Ybyekte*Mbp`S}k5`(%S2X>44k{^07z2K@Lf<&Yu+@Q$p
zw-Q^#B@ae7Tbf*}1;hSZ`70&1)W2tZIfb{mE_1gRzFdwQi8ZQ4xbQ{9YsfnG&|2%h
zL=OB>84RB;RTA~IXYKW?dHFovXhh=uxA`71!8Wp=4xGRncFD6wdQZkxC<HamqVKJ8
z7T<I$hsKqm{Ws)he)HAPTZ{4FLDCEJYvD$!yMTYVJ&Yya(8{~nY`^qTE;{cQAxZ=N
zJozF&NT4DY)@@N^1#2oM+KMX$B~Hp2er`#TG82X3Q1QX2Rl(N62iC@NYuFVjYqgRs
zOWN&?hE;41Rq+6x=y$hY%VmAE)9o=w4BOk?Ls@*}Et{PITF#;l!DrSf7fJ0(&bpwh
zH1c-V*rQlpAfvFr5+@+ag}z&@g$2!871`jR!>2YodkqEb-9wx38)<fny-wq~QT)AX
z`-Zqj{gtFlLE?o<H`7JtIyc|yRL)=PzgG{WD!M!PPCuJYmQ5XvipLbR^>y-k@R(K|
z8m>!js-)+P(sJivI|^(iI~P5tymy3vKVu{xq$G(QaF$s-<^FqW6a5T)Zl5R;-b9a)
z%(Y59eAD?nD4zw0>%nLq2TtldB-L%3+N?^+Y%f{z$`zkZ=44#sr$Vax0Dziw|MxGZ
p;}zXC7s`7BAY6eIB}e~O5hEKr(va>eUq|Vr($zB3tOh%T{ttS0UM>It

literal 0
HcmV?d00001

diff --git a/test/service/actions/files.test.js b/test/service/actions/files.test.js
new file mode 100644
index 000000000..3c44b7ecc
--- /dev/null
+++ b/test/service/actions/files.test.js
@@ -0,0 +1,69 @@
+// Copyright (c) 2017 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import fs from 'fs';
+import assert from 'assert';
+
+const FormData = require('form-data');
+
+import * as Actions from 'service/actions/files';
+import Client from 'service/client';
+import configureStore from 'app/store';
+import {RequestStatus} from 'service/constants';
+import TestHelper from 'test/test_helper';
+
+describe('Actions.Files', () => {
+    let store;
+    before(async () => {
+        await TestHelper.initBasic(Client);
+    });
+
+    beforeEach(() => {
+        store = configureStore();
+    });
+
+    after(async () => {
+        await TestHelper.basicClient.logout();
+    });
+
+    it('getFilesForPost', async () => {
+        const {basicClient, basicTeam, basicChannel} = TestHelper;
+        const testFileName = 'test.png';
+        const testImageData = fs.createReadStream(`test/assets/images/${testFileName}`);
+        const clientId = TestHelper.generateId();
+
+        const imageFormData = new FormData();
+        imageFormData.append('files', testImageData);
+        imageFormData.append('channel_id', basicChannel.id);
+        imageFormData.append('client_ids', clientId);
+        const formBoundary = imageFormData.getBoundary();
+
+        const fileUploadResp = await basicClient.
+            uploadFile(basicTeam.id, basicChannel.id, clientId, imageFormData, formBoundary);
+        const fileId = fileUploadResp.file_infos[0].id;
+
+        const fakePostForFile = TestHelper.fakePost(basicChannel.id);
+        fakePostForFile.file_ids = [fileId];
+        const postForFile = await basicClient.createPost(basicTeam.id, fakePostForFile);
+
+        await Actions.getFilesForPost(
+            basicTeam.id, basicChannel.id, postForFile.id
+        )(store.dispatch, store.getState);
+
+        const filesRequest = store.getState().requests.files.getFilesForPost;
+        const {files: allFiles, fileIdsByPostId} = store.getState().entities.files;
+
+        if (filesRequest.status === RequestStatus.FAILURE) {
+            throw new Error(JSON.stringify(filesRequest.error));
+        }
+
+        assert.ok(allFiles);
+        assert.ok(allFiles[fileId]);
+        assert.equal(allFiles[fileId].id, fileId);
+        assert.equal(allFiles[fileId].name, testFileName);
+
+        assert.ok(fileIdsByPostId);
+        assert.ok(fileIdsByPostId[postForFile.id]);
+        assert.equal(fileIdsByPostId[postForFile.id][0], fileId);
+    });
+});