1 files changed, 27 insertions, 28 deletions

diff --git a/webapp/components/file_attachment_list.jsx b/webapp/components/file_attachment_list.jsx
index e4b841769..3df4684be 100644
--- a/webapp/components/file_attachment_list.jsx
+++ b/webapp/components/file_attachment_list.jsx
@@ -13,25 +13,34 @@ export default class FileAttachmentList extends React.Component {
 
         this.handleImageClick = this.handleImageClick.bind(this);
 
-        this.state = {showPreviewModal: false, startImgId: 0};
+        this.state = {showPreviewModal: false, startImgIndex: 0};
     }
+
     handleImageClick(indexClicked) {
-        this.setState({showPreviewModal: true, startImgId: indexClicked});
+        this.setState({showPreviewModal: true, startImgIndex: indexClicked});
     }
+
     render() {
-        var filenames = this.props.filenames;
+        const postFiles = [];
+        if (this.props.fileInfos && this.props.fileInfos.length > 0) {
+            for (let i = 0; i < Math.min(this.props.fileInfos.length, Constants.MAX_DISPLAY_FILES); i++) {
+                const fileInfo = this.props.fileInfos[i];
 
-        var postFiles = [];
-        for (var i = 0; i < filenames.length && i < Constants.MAX_DISPLAY_FILES; i++) {
-            postFiles.push(
-                <FileAttachment
-                    key={'file_attachment_' + i}
-                    filename={filenames[i]}
-                    index={i}
-                    handleImageClick={this.handleImageClick}
-                    compactDisplay={this.props.compactDisplay}
-                />
-            );
+                postFiles.push(
+                    <FileAttachment
+                        key={fileInfo.id}
+                        fileInfo={this.props.fileInfos[i]}
+                        index={i}
+                        handleImageClick={this.handleImageClick}
+                        compactDisplay={this.props.compactDisplay}
+                    />
+                );
+            }
+        } else if (this.props.fileCount > 0) {
+            for (let i = 0; i < Math.min(this.props.fileCount, Constants.MAX_DISPLAY_FILES); i++) {
+                // Add a placeholder to avoid pop-in once we get the file infos for this post
+                postFiles.push(<div className='post-image__column post-image__column--placeholder'/>);
+            }
         }
 
         return (
@@ -42,10 +51,8 @@ export default class FileAttachmentList extends React.Component {
                 <ViewImageModal
                     show={this.state.showPreviewModal}
                     onModalDismissed={() => this.setState({showPreviewModal: false})}
-                    channelId={this.props.channelId}
-                    userId={this.props.userId}
-                    startId={this.state.startImgId}
-                    filenames={filenames}
+                    startId={this.state.startImgIndex}
+                    fileInfos={this.props.fileInfos}
                 />
             </div>
         );
@@ -53,15 +60,7 @@ export default class FileAttachmentList extends React.Component {
 }
 
 FileAttachmentList.propTypes = {
-
-    // a list of file pathes displayed by this
-    filenames: React.PropTypes.arrayOf(React.PropTypes.string).isRequired,
-
-    // the channel that this is part of
-    channelId: React.PropTypes.string,
-
-    // the user that owns the post that this is attached to
-    userId: React.PropTypes.string,
-
+    fileCount: React.PropTypes.number.isRequired,
+    fileInfos: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
     compactDisplay: React.PropTypes.bool
 };