diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js index 0e4be9a83f..54fea699d2 100644 --- a/src/components/views/messages/MImageBody.js +++ b/src/components/views/messages/MImageBody.js @@ -18,12 +18,12 @@ limitations under the License. var React = require('react'); var filesize = require('filesize'); - var MatrixClientPeg = require('../../../MatrixClientPeg'); var ImageUtils = require('../../../ImageUtils'); var Modal = require('../../../Modal'); var sdk = require('../../../index'); var dis = require("../../../dispatcher"); +var DecryptFile = require('../../../utils/DecryptFile'); module.exports = React.createClass({ displayName: 'MImageBody', @@ -110,7 +110,13 @@ module.exports = React.createClass({ var self = this; if (content.file !== undefined && this.state.decryptedUrl === null) { // TODO: hook up an error handler to the promise. - this.decryptFile(content.file).catch(function (err) { + DecryptFile.decryptFile(content.file).then(function(blob) { + if (!self._unmounted) { + self.setState({ + decryptedUrl: window.URL.createObjectURL(blob), + }); + } + }).catch(function (err) { console.warn("Unable to decrypt attachment: ", err) // Set a placeholder image when we can't decrypt the image. self.refs.image.src = "img/warning.svg"; @@ -118,28 +124,6 @@ module.exports = React.createClass({ } }, - decryptFile: function(file) { - var url = MatrixClientPeg.get().mxcUrlToHttp(file.url); - var self = this; - // Download the encrypted file as an array buffer. - return fetch(url).then(function (response) { - return response.arrayBuffer(); - }).then(function (responseData) { - // Decrypt the array buffer using the information taken from - // the event content. - return encrypt.decryptAttachment(responseData, file); - }).then(function(dataArray) { - // Turn the array into a Blob and use createObjectUrl to make - // a url that we can use as an img src. - var blob = new Blob([dataArray], {type: file.mimetype}); - if (!self._unmounted) { - self.setState({ - decryptedUrl: window.URL.createObjectURL(blob), - }); - } - }); - }, - componentWillUnmount: function() { dis.unregister(this.dispatcherRef); this._unmounted = true; diff --git a/src/utils/DecryptFile.js b/src/utils/DecryptFile.js new file mode 100644 index 0000000000..254c807158 --- /dev/null +++ b/src/utils/DecryptFile.js @@ -0,0 +1,42 @@ +/* +Copyright 2016 OpenMarket Ltd + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +'use struct'; + +// Pull in the encryption lib so that we can decrypt attachments. +var encrypt = require("browser-encrypt-attachment"); +// Pull in a fetch polyfill so we can download encrypted attachments. +require("isomorphic-fetch"); +// Grab the client so that we can turn mxc:// URLs into https:// URLS. +var MatrixClientPeg = require('../MatrixClientPeg'); + + +export function decryptFile(file) { + var url = MatrixClientPeg.get().mxcUrlToHttp(file.url); + var self = this; + // Download the encrypted file as an array buffer. + return fetch(url).then(function (response) { + return response.arrayBuffer(); + }).then(function (responseData) { + // Decrypt the array buffer using the information taken from + // the event content. + return encrypt.decryptAttachment(responseData, file); + }).then(function(dataArray) { + // Turn the array into a Blob and give it the correct MIME-type. + var blob = new Blob([dataArray], {type: file.mimetype}); + return blob; + }); +}