Download assets (elastic#361)

* Created download button component for assets

* Added download component to asset manager

* Added click handler for downloading assets

* Installed mime package. Added extension property to object returned by dataurl.parse. Updated click handler in download component.

* Added css to make asset-download float right like asset-copy

* removed console log in dataurl

* Updated styles for asset manager

* Added title attributes to download and clipboard buttons for tooltip

common/lib/dataurl.js

@@ -1,4 +1,5 @@
 import { fromByteArray } from 'base64-js';
+import mime from 'mime/lite';
 
 export const imageTypes = ['image/svg+xml', 'image/jpeg', 'image/png', 'image/gif'];
 
@@ -14,6 +15,7 @@ export function parse(str, withData = false) {
     charset: matches[2] && matches[2].split('=')[1],
     data: !withData ? null : str.split(',')[1],
     isImage: imageTypes.indexOf(matches[1]) >= 0,
+    extension: mime.getExtension(matches[1]),
   };
 }
 

package.json

@@ -59,6 +59,7 @@
     "lz-string": "^1.4.4",
     "markdown-it": "^8.3.2",
     "metalsmith-snippet": "^2.0.0",
+    "mime": "^2.2.0",
     "moment": "^2.18.1",
     "object-path-immutable": "^0.5.1",
     "prop-types": "^15.5.8",
@@ -134,4 +135,4 @@
     "sinon": "^2.3.2",
     "through2": "^2.0.3"
   }
-}
+}

public/components/asset_manager/asset_manager.js

@@ -4,6 +4,7 @@ import { Button } from 'react-bootstrap';
 import './asset_manager.less';
 import { RemoveIcon } from '../remove_icon';
 import { Clipboard } from '../clipboard';
+import { Download } from '../download';
 
 export const AssetManager = ({ assets, removeAsset }) => {
   return (
@@ -37,13 +38,20 @@ export const AssetManager = ({ assets, removeAsset }) => {
             onClick={() => removeAsset(asset.id)}
           />
           <div className="canvas__asset-manager--asset-identifier">
-            <div className="asset-copy">
+            <div className="asset-copy" title="Copy to Clipboard">
               <Clipboard content={asset.id}>
                 <Button bsSize="xsmall">
                   <span className="fa fa-clipboard" />
                 </Button>
               </Clipboard>
             </div>
+            <div className="asset-download">
+              <Download fileName={asset.id} content={asset.value}>
+                <Button bsSize="xsmall" title="Download">
+                  <span className="fa fa-download" />
+                </Button>
+              </Download>
+            </div>
             <div className="asset-id">{asset.id}</div>
           </div>
         </div>

public/components/asset_manager/asset_manager.less

@@ -1,4 +1,4 @@
-@import (reference) "../../style/main";
+@import (reference) '../../style/main';
 
 .canvas__asset-manager {
   .canvas__asset-manager--thumb {
@@ -14,7 +14,6 @@
     background-size: cover;
     background-position: left;
     background-repeat: no-repeat;
-
   }
 
   .canvas__asset-manager--asset-identifier {
@@ -23,9 +22,25 @@
     background-color: fade(@darkestGrey, 80%);
     border-radius: 0 0 @borderRadius @borderRadius;
     padding: @spacingXS;
+    white-space: nowrap;
+    overflow: hidden;
+    width: 100%;
 
-    .asset-copy {
+    .asset-copy,
+    .asset-download {
       float: right;
+      margin-right: @spacingXS;
+
+      &:first-child {
+        margin-right: 0px;
+      }
+    }
+
+    .asset-id {
+      font-size: @textXSmall;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
   }
 }

public/components/download/download.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import fileSaver from 'file-saver';
+import { toByteArray } from 'base64-js';
+import { parse } from '../../../common/lib/dataurl';
+
+export class Download extends React.PureComponent {
+  static propTypes = {
+    children: PropTypes.element.isRequired,
+    fileName: PropTypes.string,
+    content: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+    onCopy: PropTypes.func,
+  };
+
+  onClick = () => {
+    const { fileName, content } = this.props;
+    const asset = parse(content, true);
+    const assetBlob = new Blob([toByteArray(asset.data)], { type: asset.mimetype });
+    const ext = asset.extension ? `.${asset.extension}` : '';
+    fileSaver.saveAs(assetBlob, `canvas-${fileName}${ext}`);
+  };
+
+  render() {
+    return (
+      <div className="canvas_download" onClick={this.onClick}>
+        {this.props.children}
+      </div>
+    );
+  }
+}

public/components/download/index.js

@@ -0,0 +1,3 @@
+import { Download as Component } from './download';
+
+export const Download = Component;