Updated ViewImage modal dialog to include details about non-image files

web/react/components/file_attachment.jsx

@@ -110,7 +110,7 @@ module.exports = React.createClass({
                     {thumbnail}
                 </a>
                 <div className="post-image__details">
-                    <div className="post-image__name">{fileInfo.name}</div>
+                    <div className="post-image__name">{decodeURIComponent(utils.getFileName(filename))}</div>
                     <div>
                         <span className="post-image__type">{fileInfo.ext.toUpperCase()}</span>
                         <span className="post-image__size">{fileSizeString}</span>

web/react/components/view_image.jsx

@@ -36,6 +36,7 @@ module.exports = React.createClass({
         var fileInfo = utils.splitFileLocation(filename);
         var fileType = utils.getFileType(fileInfo.ext);
 
+        if (fileType === "image") {
             var self = this;
             var img = new Image();
             img.load(this.getPreviewImagePath(filename),
@@ -55,10 +56,16 @@ module.exports = React.createClass({
             var images = this.state.images;
             images[id] = img;
             this.setState({ images: images });
+        } else {
+            // there's nothing to load for non-image files
+            var loaded = this.state.loaded;
+            loaded[id] = true;
+            this.setState({ loaded: loaded });
+        }
     },
     componentDidUpdate: function() {
-        if (this.refs.image) {
         if (this.state.loaded[this.state.imgId]) {
+            if (this.refs.imageWrap) {
                 $(this.refs.imageWrap.getDOMNode()).removeClass("default");
             }
         }
@@ -104,55 +111,73 @@ module.exports = React.createClass({
             loaded.push(false);
             progress.push(0);
         }
-        return { imgId: this.props.startId, viewed: false, loaded: loaded, progress: progress, images: {} };
+        return { imgId: this.props.startId, viewed: false, loaded: loaded, progress: progress, images: {}, fileSizes: {} };
     },
     render: function() {
         if (this.props.filenames.length < 1 || this.props.filenames.length-1 < this.state.imgId) {
             return <div/>;
         }
 
-        var fileInfo = utils.splitFileLocation(this.props.filenames[this.state.imgId]);
+        var filename = this.props.filenames[this.state.imgId];
+        var fileUrl = utils.getFileUrl(filename);
 
-        var name = fileInfo['name'] + '.' + fileInfo['ext'];
+        var name = decodeURIComponent(utils.getFileName(filename));
 
-        var loading = "";
+        var content;
         var bgClass = "";
-        var img = {};
+        if (this.state.loaded[this.state.imgId]) {
-        if (!this.state.loaded[this.state.imgId]) {
+            var fileInfo = utils.splitFileLocation(filename);
+            var fileType = utils.getFileType(fileInfo.ext);
+
+            if (fileType === "image") {
+                content = (
+                    <a href={fileUrl} target="_blank">
+                        <img ref="image" src={this.getPreviewImagePath(filename)}/>
+                    </a>
+                );
+            } else {
+                // non-image files include a section providing details about the file
+                var infoString = "File type " + fileInfo.ext.toUpperCase();
+                if (this.state.fileSizes[filename] && this.state.fileSizes[filename] >= 0) {
+                    infoString += ", Size " + utils.fileSizeToString(this.state.fileSizes[filename]);
+                }
+
+                content = (
+                    <div className="file-details__container">
+                        <a className={"file-details__preview"} href={fileUrl} target="_blank">
+                            <span className="file-details__preview-helper" />
+                            <img ref="image" src={this.getPreviewImagePath(filename)} />
+                        </a>
+                        <div className="file-details">
+                            <div className="file-details__name">{name}</div>
+                            <div className="file-details__info">{infoString}</div>
+                        </div>
+                    </div>
+                );
+
+                // asynchronously request the actual size of this file
+                if (!(filename in this.state.fileSizes)) {
+                    var self = this;
+
+                    utils.getFileSize(utils.getFileUrl(filename), function(fileSize) {
+                        var fileSizes = self.state.fileSizes;
+                        fileSizes[filename] = fileSize;
+                        self.setState(fileSizes);
+                    });
+                }
+            }
+        } else {
             var percentage = Math.floor(this.state.progress[this.state.imgId]);
-            loading = (
+            content = (
-                <div key={name+"_loading"}>
+                <div>
-                    <img ref="placeholder" className="loader-image" src="/static/images/load.gif" />
+                    <img className="loader-image" src="/static/images/load.gif" />
                     { percentage > 0 ?
                     <span className="loader-percent" >{"Previewing " + percentage + "%"}</span>
                     : ""}
                 </div>
             );
             bgClass = "black-bg";
-        } else if (this.state.viewed) {
-            for (var id in this.state.images) {
-                var filename = this.props.filenames[id];
-                var fileInfo = utils.splitFileLocation(filename);
-
-                var imgClass = "hidden";
-                if (this.state.loaded[id] && this.state.imgId == id) imgClass = "";
-
-                img[fileInfo.path] = (
-                    <a key={fileInfo.path} className={imgClass} href={fileInfo.path+"."+fileInfo.ext} target="_blank">
-                        <img ref="image" src={this.getPreviewImagePath(filename)}/>
-                    </a>
-                );
         }
-        }
-
-        var imgFragment = React.addons.createFragment(img);
-
-        // This is a temporary patch to fix issue with old files using absolute paths
-        var download_link = this.props.filenames[this.state.imgId];
-        if (download_link.indexOf("/api/v1/files/get") !== -1) {
-            download_link = download_link.split("/api/v1/files/get")[1];
-        }
-        download_link = utils.getWindowLocationOrigin() + "/api/v1/files/get" + download_link;
 
         return (
             <div className="modal fade image_modal" ref="modal" id={this.props.modalId} tabIndex="-1" role="dialog" aria-hidden="true">
@@ -161,7 +186,7 @@ module.exports = React.createClass({
                         <div ref="imageBody" className="modal-body image-body">
                             <div ref="imageWrap" className={"image-wrapper default " + bgClass}>
                                 <div className="modal-close" data-dismiss="modal"></div>
-                                {imgFragment}
+                                {content}
                                 <div ref="imageFooter" className="modal-button-bar">
                                     <span className="pull-left text">{"Image "+(this.state.imgId+1)+" of "+this.props.filenames.length}</span>
                                     <div className="image-links">
@@ -171,10 +196,9 @@ module.exports = React.createClass({
                                                 <span className="text"> | </span>
                                             </div>
                                         : "" }
-                                        <a href={download_link} download={decodeURIComponent(name)} className="text">Download</a>
+                                        <a href={fileUrl} download={name} className="text">Download</a>
                                     </div>
                                 </div>
-                                {loading}
                             </div>
                             { this.props.filenames.length > 1 ?
                             <a className="modal-prev-bar" href="#" onClick={this.handlePrev}>

web/react/utils/utils.jsx

@@ -907,3 +907,9 @@ module.exports.getFileUrl = function(filename) {
 
     return url;
 };
+
+// Gets the name of a file (including extension) from a given url or file path.
+module.exports.getFileName = function(path) {
+    var split = path.split('/');
+    return split[split.length - 1];
+};

web/sass-files/sass/partials/_files.scss

@@ -157,3 +157,35 @@
     color: grey;
   }
 }
+
+.file-details__container {
+    display: flex;
+
+    .file-details {
+        width: 320px;
+        height: 270px;
+        padding: 14px;
+        text-align: left;
+        vertical-align: top;
+
+        .file-details__name {
+            font-size: 16px;
+        }
+        .file-details__info {
+            color: grey;
+        }
+    }
+    .file-details__preview {
+        width: 320px;
+        height: 270px;
+        border-right: 1px solid #ddd;
+        vertical-align: center;
+
+        // helper to center the image icon in the preview window
+        .file-details__preview-helper {
+            height: 100%;
+            display: inline-block;
+            vertical-align: middle;
+        }
+    }
+}