Merge pull request #231 from mattermost/file-fixes

More patches for files

web/react/components/file_preview.jsx

@@ -16,6 +16,7 @@ module.exports = React.createClass({
         var previews = [];
         this.props.files.forEach(function(filename) {
 
+            var originalFilename = filename;
             var filenameSplit = filename.split('.');
             var ext = filenameSplit[filenameSplit.length-1];
             var type = utils.getFileType(ext);
@@ -27,14 +28,14 @@ module.exports = React.createClass({
 
             if (type === "image") {
                 previews.push(
-                    <div key={filename} className="preview-div" data-filename={filename}>
+                    <div key={filename} className="preview-div" data-filename={originalFilename}>
                         <img className="preview-img" src={filename}/>
                         <a className="remove-preview" onClick={this.handleRemove}><i className="glyphicon glyphicon-remove"/></a>
                     </div>
                 );
             } else {
                 previews.push(
-                    <div key={filename} className="preview-div custom-file" data-filename={filename}>
+                    <div key={filename} className="preview-div custom-file" data-filename={originalFilename}>
                         <div className={"file-icon "+utils.getIconClassName(type)}/>
                         <a className="remove-preview" onClick={this.handleRemove}><i className="glyphicon glyphicon-remove"/></a>
                     </div>

web/react/components/post_right.jsx

@@ -91,28 +91,27 @@ RootPost = React.createClass({
             var re2 = new RegExp('\\(', 'g');
             var re3 = new RegExp('\\)', 'g');
             for (var i = 0; i < filenames.length && i < Constants.MAX_DISPLAY_FILES; i++) {
-                var fileSplit = filenames[i].split('.');
+                var fileInfo = utils.splitFileLocation(filenames[i]);
-                if (fileSplit.length < 2) continue;
+                var ftype = utils.getFileType(fileInfo.ext);
 
-                var ext = fileSplit[fileSplit.length-1];
+                // This is a temporary patch to fix issue with old files using absolute paths
-                fileSplit.splice(fileSplit.length-1,1);
+                if (fileInfo.path.indexOf("/api/v1/files/get") != -1) {
-                var filePath = fileSplit.join('.');
+                    fileInfo.path = fileInfo.path.split("/api/v1/files/get")[1];
-                var filename = filePath.split('/')[filePath.split('/').length-1];
+                }
-
+                fileInfo.path = window.location.origin + "/api/v1/files/get" + fileInfo.path;
-                var ftype = utils.getFileType(ext);
 
                 if (ftype === "image") {
-                    var url = filePath.replace(re1, '%20').replace(re2, '%28').replace(re3, '%29');
+                    var url = fileInfo.path.replace(re1, '%20').replace(re2, '%28').replace(re3, '%29');
                     postFiles.push(
-                        <div className="post-image__column" key={filePath}>
+                        <div className="post-image__column" key={fileInfo.path}>
-                            <a href="#" onClick={this.handleImageClick} data-img-id={images.length.toString()} data-toggle="modal" data-target={"#" + postImageModalId }><div ref={filePath} className="post__image" style={{backgroundImage: 'url(' + url + '_thumb.jpg)'}}></div></a>
+                            <a href="#" onClick={this.handleImageClick} data-img-id={images.length.toString()} data-toggle="modal" data-target={"#" + postImageModalId }><div ref={fileInfo.path} className="post__image" style={{backgroundImage: 'url(' + url + '_thumb.jpg)'}}></div></a>
                         </div>
                     );
                     images.push(filenames[i]);
                 } else {
                     postFiles.push(
-                        <div className="post-image__column custom-file" key={filePath}>
+                        <div className="post-image__column custom-file" key={fileInfo.path}>
-                            <a href={filePath+"."+ext} download={filename+"."+ext}>
+                            <a href={fileInfo.path+"."+ext} download={fileInfo.name+"."+ext}>
                                 <div className={"file-icon "+utils.getIconClassName(ftype)}/>
                             </a>
                         </div>
@@ -201,28 +200,28 @@ CommentPost = React.createClass({
             var re2 = new RegExp('\\(', 'g');
             var re3 = new RegExp('\\)', 'g');
             for (var i = 0; i < filenames.length && i < Constants.MAX_DISPLAY_FILES; i++) {
-                var fileSplit = filenames[i].split('.');
-                if (fileSplit.length < 2) continue;
 
-                var ext = fileSplit[fileSplit.length-1];
+                var fileInfo = utils.splitFileLocation(filenames[i]);
-                fileSplit.splice(fileSplit.length-1,1)
+                var type = utils.getFileType(fileInfo.ext);
-                var filePath = fileSplit.join('.');
-                var filename = filePath.split('/')[filePath.split('/').length-1];
 
-                var type = utils.getFileType(ext);
+                // This is a temporary patch to fix issue with old files using absolute paths
+                if (fileInfo.path.indexOf("/api/v1/files/get") != -1) {
+                    fileInfo.path = fileInfo.path.split("/api/v1/files/get")[1];
+                }
+                fileInfo.path = window.location.origin + "/api/v1/files/get" + fileInfo.path;
 
                 if (type === "image") {
-                    var url = filePath.replace(re1, '%20').replace(re2, '%28').replace(re3, '%29');
+                    var url = fileInfo.path.replace(re1, '%20').replace(re2, '%28').replace(re3, '%29');
                     postFiles.push(
-                        <div className="post-image__column" key={filename}>
+                        <div className="post-image__column" key={fileInfo.path}>
-                            <a href="#" onClick={this.handleImageClick} data-img-id={images.length.toString()} data-toggle="modal" data-target={"#" + postImageModalId }><div ref={filename} className="post__image" style={{backgroundImage: 'url(' + url + '_thumb.jpg)'}}></div></a>
+                            <a href="#" onClick={this.handleImageClick} data-img-id={images.length.toString()} data-toggle="modal" data-target={"#" + postImageModalId }><div ref={fileInfo.path} className="post__image" style={{backgroundImage: 'url(' + url + '_thumb.jpg)'}}></div></a>
                         </div>
                     );
                     images.push(filenames[i]);
                 } else {
                     postFiles.push(
-                        <div className="post-image__column custom-file" key={filename}>
+                        <div className="post-image__column custom-file" key={fileInfo.path}>
-                            <a href={filePath+"."+ext} download={filename+"."+ext}>
+                            <a href={fileInfo.path+"."+fileInfo.ext} download={fileInfo.name+"."+fileInfo.ext}>
                                 <div className={"file-icon "+utils.getIconClassName(type)}/>
                             </a>
                         </div>