Include the mimetype with the file info. Store the objectURL in state so that it can be used normally by the exising templates

src/ContentMessages.js

@@ -193,6 +193,9 @@ class ContentMessages {
                 // with the information needed to decrypt the attachment and
                 // add it under a file key.
                 encryptInfo.url = url;
+                if (file.type) {
+                    encryptInfo.mimetype = file.type;
+                }
                 content.file = encryptInfo;
             }
             return matrixClient.sendMessage(roomId, content);

src/components/views/messages/MImageBody.js

@@ -39,11 +39,18 @@ module.exports = React.createClass({
         mxEvent: React.PropTypes.object.isRequired,
     },
 
+    getInitialState: function() {
+        return {
+            decryptedUrl: null,
+        };
+    },
+
+
     onClick: function onClick(ev) {
         if (ev.button == 0 && !ev.metaKey) {
             ev.preventDefault();
             var content = this.props.mxEvent.getContent();
-            var httpUrl = MatrixClientPeg.get().mxcUrlToHttp(content.url);
+            var httpUrl = this._getContentUrl();
             var ImageView = sdk.getComponent("elements.ImageView");
             var params = {
                 src: httpUrl,
@@ -83,9 +90,23 @@ module.exports = React.createClass({
         imgElement.src = this._getThumbUrl();
     },
 
+    _getContentUrl: function() {
+        var content = this.props.mxEvent.getContent();
+        if (content.file !== undefined) {
+            return this.state.decryptedUrl;
+        } else {
+            return MatrixClientPeg.get().mxcUrlToHttp(content.url);
+        }
+    },
+
     _getThumbUrl: function() {
         var content = this.props.mxEvent.getContent();
+        if (content.file !== undefined) {
+            // TODO: Decrypt and use the thumbnail file if one is present.
+            return this.state.decryptedUrl;
+        } else {
             return MatrixClientPeg.get().mxcUrlToHttp(content.url, 800, 600);
+        }
     },
 
     componentDidMount: function() {
@@ -93,7 +114,7 @@ module.exports = React.createClass({
         this.fixupHeight();
         var content = this.props.mxEvent.getContent();
         var self = this;
-        if (content.file !== undefined) {
+        if (content.file !== undefined && this.state.decryptedUrl === null) {
             // TODO: hook up an error handler to the promise.
             this.decryptFile(content.file).catch(function (err) {
                 console.warn("Unable to decrypt attachment: ", err)
@@ -114,19 +135,23 @@ module.exports = React.createClass({
             // the event content.
             return encrypt.decryptAttachment(responseData, file);
         }).then(function(dataArray) {
-            // Turn the array into a Blob and use createObjectURL to make
+            // 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]);
+            var blob = new Blob([dataArray], {type: file.mimetype});
-            var blobUrl = window.URL.createObjectURL(blob);
+            if (!self._unmounted) {
-            self.refs.image.src = blobUrl;
+                self.setState({
-            self.refs.image.onload = function() {
+                    decryptedUrl: window.URL.createObjectURL(blob),
-                window.URL.revokeObjectURL(blobUrl);
+                });
-            };
+            }
         });
     },
 
     componentWillUnmount: function() {
         dis.unregister(this.dispatcherRef);
+        this._unmounted = true;
+        if (this.state.decryptedUrl) {
+            window.URL.revokeObjectURL(this.state.decryptedUrl);
+        }
     },
 
     onAction: function(payload) {
@@ -161,11 +186,27 @@ module.exports = React.createClass({
         var content = this.props.mxEvent.getContent();
         var cli = MatrixClientPeg.get();
 
+        if (content.file !== undefined && this.state.decryptedUrl === null) {
+
+            // Need to decrypt the attachment
+            // The attachment is decrypted in componentDidMount.
+            // For now add an img tag with a spinner.
+            return (
+                <span className="mx_MImageBody" ref="body">
+                <img className="mx_MImageBody_thumbnail" src="img/spinner.gif" ref="image"
+                    alt={content.body} />
+                </span>
+            );
+        }
+
+        var contentUrl = this._getContentUrl();
+        var thumbUrl = this._getThumbUrl();
+
         var download;
         if (this.props.tileShape === "file_grid") {
             download = (
                 <div className="mx_MImageBody_download">
-                    <a className="mx_MImageBody_downloadLink" href={cli.mxcUrlToHttp(content.url)} target="_blank" rel="noopener">
+                    <a className="mx_MImageBody_downloadLink" href={contentUrl} target="_blank" rel="noopener">
                         {content.body}
                     </a>
                     <div className="mx_MImageBody_size">
@@ -177,7 +218,7 @@ module.exports = React.createClass({
         else {
             download = (
                 <div className="mx_MImageBody_download">
-                    <a href={cli.mxcUrlToHttp(content.url)} target="_blank" rel="noopener">
+                    <a href={contentUrl} target="_blank" rel="noopener">
                         <TintableSvg src="img/download.svg" width="12" height="14"/>
                         Download {content.body} ({ content.info && content.info.size ? filesize(content.info.size) : "Unknown size" })
                     </a>
@@ -185,21 +226,10 @@ module.exports = React.createClass({
             );
         }
 
-        var thumbUrl = this._getThumbUrl();
+        if (thumbUrl) {
-        if (content.file !== undefined) {
-            // Need to decrypt the attachment
-            // The attachment is decrypted in componentDidMount.
-            // For now add an img tag with a spinner.
             return (
                 <span className="mx_MImageBody" ref="body">
-                <img className="mx_MImageBody_thumbnail" src="img/spinner.gif" ref="image"
+                    <a href={contentUrl} onClick={ this.onClick }>
-                    alt={content.body} />
-                </span>
-            );
-        } else if (thumbUrl) {
-            return (
-                <span className="mx_MImageBody" ref="body">
-                    <a href={cli.mxcUrlToHttp(content.url)} onClick={ this.onClick }>
                         <img className="mx_MImageBody_thumbnail" src={thumbUrl} ref="image"
                             alt={content.body}
                             onMouseEnter={this.onImageEnter}