ensure asatt=1 is aded to image download URL to set Content-Disposition: attachment

src/lib/utils.js

@@ -172,6 +172,36 @@ export function sanitizeUrlForMime(url, mimeMajor) {
   return null;
 }
 
+// Append query parameter 'asatt=1' to the URL.
+// It will cause Tinode server to add 'Content-Disposition: attachment' header when serving it.
+// The URL here is always absolute.
+export function urlAsAttachment(url) {
+  // TODO: check if URL is local or remote, i.e. compare to window.location.origin.
+  /*
+  if (typeof window.location == 'object') {
+    if (!url.startsWith(window.location.origin)) {
+      return url;
+    }
+  }
+  */
+  // Split URL into host+path, query, fragment.
+  let query = '', fragment = '';
+  const idxF = url.indexOf('#');
+  if (idxF > 0) {
+    fragment = url.substring(idxF+1);
+    url = url.substring(0, idxF);
+  }
+  const idxQ = url.indexOf('?');
+  if (idxQ > 0) {
+    query = url.substring(idxQ+1);
+    url = url.substring(0, idxQ);
+  }
+  // Add parameter and reassemble.
+  const params = new URLSearchParams(query);
+  params.append('asatt', '1');
+  return `${url}?${params.toString()}` + (fragment ? `#${fragment}` : '');
+}
+
 // Given message's received status, return name and color of a delivery indicator icon.
 export function deliveryMarker(received) {
   switch (received) {

src/widgets/image-preview.jsx

@@ -5,6 +5,7 @@ import SendMessage from './send-message.jsx';
 import { REM_SIZE } from '../config.js';
 import { fitImageSize } from '../lib/blob-helpers.js';
 import { bytesToHumanSize, shortenFileName } from '../lib/strformat.js';
+import { urlAsAttachment } from '../lib/utils.js';
 
 export default class ImagePreview extends React.PureComponent {
   constructor(props) {
@@ -71,13 +72,16 @@ export default class ImagePreview extends React.PureComponent {
 
     const width = this.props.content.width || '-';
     const height = this.props.content.height || '-';
+
+    const download_url = urlAsAttachment(this.props.content.url);
+
     return (
       <div id="image-preview">
         <div id="image-preview-caption-panel">
           {this.props.onSendMessage ?
             <span>{fname}</span>
             :
-            <a href={this.props.content.url} download={this.props.content.filename}>
+            <a href={download_url} download={this.props.content.filename}>
               <i className="material-icons">file_download</i> <FormattedMessage
                 id="download_action" defaultMessage="download" description="Call to action [download]" />
             </a>