diff options
Diffstat (limited to 'webapp/components')
-rw-r--r-- | webapp/components/file_attachment.jsx | 12 | ||||
-rw-r--r-- | webapp/components/view_image.jsx | 41 |
2 files changed, 33 insertions, 20 deletions
diff --git a/webapp/components/file_attachment.jsx b/webapp/components/file_attachment.jsx index 3d7f936c8..5642d33c5 100644 --- a/webapp/components/file_attachment.jsx +++ b/webapp/components/file_attachment.jsx @@ -48,14 +48,16 @@ export default class FileAttachment extends React.Component { if (fileType === 'image') { const thumbnailUrl = getFileThumbnailUrl(fileInfo.id); - const img = new Image(); - img.onload = () => { - this.setState({loaded: true}); - }; - img.load(thumbnailUrl); + Utils.loadImage(thumbnailUrl, this.handleImageLoaded); } } + handleImageLoaded = () => { + this.setState({ + loaded: true + }); + } + onAttachmentClick(e) { e.preventDefault(); this.props.handleImageClick(this.props.index); diff --git a/webapp/components/view_image.jsx b/webapp/components/view_image.jsx index 7872867f3..cc0bcee9d 100644 --- a/webapp/components/view_image.jsx +++ b/webapp/components/view_image.jsx @@ -134,28 +134,39 @@ export default class ViewImageModal extends React.Component { previewUrl = getFileUrl(fileInfo.id); } - const img = new Image(); - img.load( + Utils.loadImage( previewUrl, - () => { - const progress = this.state.progress; - progress[index] = img.completedPercentage; - this.setState({progress}); - } + () => this.handleImageLoaded(index), + (completedPercentage) => this.handleImageProgress(index, completedPercentage) ); - img.onload = () => { - const loaded = this.state.loaded; - loaded[index] = true; - this.setState({loaded}); - }; } else { // there's nothing to load for non-image files - var loaded = this.state.loaded; - loaded[index] = true; - this.setState({loaded}); + this.handleImageLoaded(index); } } + handleImageLoaded = (index) => { + this.setState((prevState) => { + return { + loaded: { + ...prevState.loaded, + [index]: true + } + }; + }); + } + + handleImageProgress = (index, completedPercentage) => { + this.setState((prevState) => { + return { + progress: { + ...prevState.progress, + [index]: completedPercentage + } + }; + }); + } + handleGetPublicLink() { this.props.onModalDismissed(); |