summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--web/react/components/file_attachment.jsx2
-rw-r--r--web/react/components/view_image.jsx136
-rw-r--r--web/react/utils/utils.jsx6
-rw-r--r--web/sass-files/sass/partials/_files.scss32
4 files changed, 119 insertions, 57 deletions
diff --git a/web/react/components/file_attachment.jsx b/web/react/components/file_attachment.jsx
index 385ff0e8d..57a064ff4 100644
--- a/web/react/components/file_attachment.jsx
+++ b/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>
diff --git a/web/react/components/view_image.jsx b/web/react/components/view_image.jsx
index bd61bd9c9..c7fb1b785 100644
--- a/web/react/components/view_image.jsx
+++ b/web/react/components/view_image.jsx
@@ -36,29 +36,36 @@ module.exports = React.createClass({
var fileInfo = utils.splitFileLocation(filename);
var fileType = utils.getFileType(fileInfo.ext);
- var self = this;
- var img = new Image();
- img.load(this.getPreviewImagePath(filename),
- function(){
- var progress = self.state.progress;
- progress[id] = img.completedPercentage;
- self.setState({ progress: progress });
- });
- img.onload = function(imgid) {
- return function() {
- var loaded = self.state.loaded;
- loaded[imgid] = true;
- self.setState({ loaded: loaded });
- $(self.refs.image.getDOMNode()).css("max-height",imgHeight);
- };
- }(id);
- var images = this.state.images;
- images[id] = img;
- this.setState({ images: images });
+ if (fileType === "image") {
+ var self = this;
+ var img = new Image();
+ img.load(this.getPreviewImagePath(filename),
+ function(){
+ var progress = self.state.progress;
+ progress[id] = img.completedPercentage;
+ self.setState({ progress: progress });
+ });
+ img.onload = function(imgid) {
+ return function() {
+ var loaded = self.state.loaded;
+ loaded[imgid] = true;
+ self.setState({ loaded: loaded });
+ $(self.refs.image.getDOMNode()).css("max-height",imgHeight);
+ };
+ }(id);
+ 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.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 = (
- <div key={name+"_loading"}>
- <img ref="placeholder" className="loader-image" src="/static/images/load.gif" />
+ content = (
+ <div>
+ <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}>
diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx
index d1513dea9..09240bf06 100644
--- a/web/react/utils/utils.jsx
+++ b/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];
+};
diff --git a/web/sass-files/sass/partials/_files.scss b/web/sass-files/sass/partials/_files.scss
index e8ea8817d..58b36f483 100644
--- a/web/sass-files/sass/partials/_files.scss
+++ b/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;
+ }
+ }
+}
generated by cgit v1.2.3-1-g7c22 (git 2.25.1) at 2024-07-03 03:17:54 +0000