feat: Export collection as direct download instead of emailing (#1001)

* feat: Export collection as zip instead of emailing

* Flow typing download.js

app/models/Collection.js

@@ -128,6 +128,10 @@ export default class Collection extends BaseModel {
   };
 
   export = () => {
-    return client.post('/collections.export', { id: this.id });
+    return client.get(
+      '/collections.export',
+      { id: this.id },
+      { download: true }
+    );
   };
 }

app/scenes/CollectionExport.js

@@ -26,8 +26,6 @@ class CollectionExport extends React.Component<Props> {
     this.isLoading = true;
     await this.props.collection.export();
     this.isLoading = false;
-
-    this.props.ui.showToast('Export in progress…');
     this.props.onSubmit();
   };
 
@@ -40,11 +38,11 @@ class CollectionExport extends React.Component<Props> {
         <form onSubmit={this.handleSubmit}>
           <HelpText>
             Exporting the collection <strong>{collection.name}</strong> may take
-            a few minutes. We’ll put together a zip file of your documents in
-            Markdown format and email it to <strong>{auth.user.email}</strong>.
+            a few seconds. Your documents will be downloaded as a zip of folders
+            with files in Markdown format.
           </HelpText>
           <Button type="submit" disabled={this.isLoading} primary>
-            {this.isLoading ? 'Requesting Export…' : 'Export Collection'}
+            {this.isLoading ? 'Exporting…' : 'Export Collection'}
           </Button>
         </form>
       </Flex>

app/utils/ApiClient.js

@@ -1,7 +1,8 @@
 // @flow
-import { map } from 'lodash';
+import { map, trim } from 'lodash';
 import invariant from 'invariant';
 import stores from 'stores';
+import download from './download';
 
 type Options = {
   baseUrl?: string,
@@ -65,7 +66,17 @@ class ApiClient {
       }
     }
 
-    if (response.status >= 200 && response.status < 300) {
+    const success = response.status >= 200 && response.status < 300;
+
+    if (options.download && success) {
+      const blob = await response.blob();
+      const fileName = (
+        response.headers.get('content-disposition') || ''
+      ).split('filename=')[1];
+
+      download(blob, trim(fileName, '"'));
+      return;
+    } else if (success) {
       return response.json();
     }
 

app/utils/download.js

@@ -0,0 +1,146 @@
+// @flow
+/* global navigator */
+
+// download.js v3.0, by dandavis; 2008-2014. [CCBY2] see http://danml.com/download.html for tests/usage
+// v1 landed a FF+Chrome compat way of downloading strings to local un-named files, upgraded to use a hidden frame and optional mime
+// v2 added named files via a[download], msSaveBlob, IE (10+) support, and window.URL support for larger+faster saves than dataURLs
+// v3 added dataURL and Blob Input, bind-toggle arity, and legacy dataURL fallback was improved with force-download mime and base64 support
+
+// data can be a string, Blob, File, or dataURL
+
+export default function download(
+  data: Blob | string | File,
+  strFileName: string,
+  strMimeType?: string
+) {
+  var self = window, // this script is only for browsers anyway...
+    u = 'application/octet-stream', // this default mime also triggers iframe downloads
+    m = strMimeType || u,
+    x = data,
+    D = document,
+    a = D.createElement('a'),
+    z = function(a, o) {
+      return String(a);
+    },
+    B = self.Blob || self.MozBlob || self.WebKitBlob || z,
+    BB = self.MSBlobBuilder || self.WebKitBlobBuilder || self.BlobBuilder,
+    fn = strFileName || 'download',
+    blob,
+    b,
+    fr;
+
+  if (String(this) === 'true') {
+    //reverse arguments, allowing download.bind(true, "text/xml", "export.xml") to act as a callback
+    x = [x, m];
+    m = x[0];
+    x = x[1];
+  }
+
+  //go ahead and download dataURLs right away
+  if (String(x).match(/^data\:[\w+\-]+\/[\w+\-]+[,;]/)) {
+    // $FlowIssue
+    return navigator.msSaveBlob // IE10 can't do a[download], only Blobs:
+      ? // $FlowIssue
+        navigator.msSaveBlob(d2b(x), fn)
+      : saver(x); // everyone else can save dataURLs un-processed
+  } //end if dataURL passed?
+
+  try {
+    blob = x instanceof B ? x : new B([x], { type: m });
+  } catch (y) {
+    if (BB) {
+      b = new BB();
+      b.append([x]);
+      blob = b.getBlob(m); // the blob
+    }
+  }
+
+  function d2b(u) {
+    if (typeof u !== 'string') {
+      throw Error('Attempted to pass non-string to d2b');
+    }
+    var p = u.split(/[:;,]/),
+      t = p[1],
+      dec = p[2] === 'base64' ? atob : decodeURIComponent,
+      bin = dec(p.pop()),
+      mx = bin.length,
+      i = 0,
+      uia = new Uint8Array(mx);
+
+    for (i; i < mx; ++i) uia[i] = bin.charCodeAt(i);
+
+    return new B([uia], { type: t });
+  }
+
+  function saver(url, winMode) {
+    if (typeof url !== 'string') {
+      throw Error('Attempted to pass non-string url to saver');
+    }
+
+    if ('download' in a) {
+      a.href = url;
+      a.setAttribute('download', fn);
+      a.innerHTML = 'downloading…';
+      D.body && D.body.appendChild(a);
+      setTimeout(function() {
+        a.click();
+        D.body && D.body.removeChild(a);
+        if (winMode === true) {
+          setTimeout(function() {
+            self.URL.revokeObjectURL(a.href);
+          }, 250);
+        }
+      }, 66);
+      return true;
+    }
+
+    //do iframe dataURL download (old ch+FF):
+    var f = D.createElement('iframe');
+    D.body && D.body.appendChild(f);
+    if (!winMode) {
+      // force a mime that will download:
+      url = 'data:' + url.replace(/^data:([\w\/\-\+]+)/, u);
+    }
+
+    f.src = url;
+    setTimeout(function() {
+      D.body && D.body.removeChild(f);
+    }, 333);
+  }
+
+  // $FlowIssue
+  if (navigator.msSaveBlob) {
+    // IE10+ : (has Blob, but not a[download] or URL)
+    return navigator.msSaveBlob(blob, fn);
+  }
+
+  if (self.URL) {
+    // simple fast and modern way using Blob and URL:
+    saver(self.URL.createObjectURL(blob), true);
+  } else {
+    // handle non-Blob()+non-URL browsers:
+    if (
+      blob &&
+      (typeof blob === 'string' || blob.constructor === z) &&
+      typeof m === 'string'
+    ) {
+      try {
+        return saver('data:' + m + ';base64,' + self.btoa(blob));
+      } catch (y) {
+        // $FlowIssue
+        return saver('data:' + m + ',' + encodeURIComponent(blob));
+      }
+    }
+
+    // Blob but not URL:
+    fr = new FileReader();
+    fr.onload = function(e) {
+      saver(this.result);
+    };
+
+    if (blob instanceof Blob) {
+      fr.readAsDataURL(blob);
+    }
+  }
+  return true;
+}

server/api/collections.js

@@ -1,11 +1,13 @@
 // @flow
+import fs from 'fs';
 import Router from 'koa-router';
 import auth from '../middlewares/authentication';
 import pagination from './middlewares/pagination';
 import { presentCollection, presentUser } from '../presenters';
 import { Collection, CollectionUser, Team, User } from '../models';
 import { ValidationError, InvalidRequestError } from '../errors';
-import { exportCollection, exportCollections } from '../logistics';
+import { exportCollections } from '../logistics';
+import { archiveCollection } from '../utils/zip';
 import policy from '../policies';
 import events from '../events';
 
@@ -144,12 +146,11 @@ router.post('collections.export', auth(), async ctx => {
   const collection = await Collection.findByPk(id);
   authorize(user, 'export', collection);
 
-  // async operation to create zip archive and email user
-  exportCollection(id, user.email);
+  const filePath = await archiveCollection(collection);
 
-  ctx.body = {
-    success: true,
-  };
+  ctx.attachment(`${collection.name}.zip`);
+  ctx.set('Content-Type', 'application/force-download');
+  ctx.body = fs.createReadStream(filePath);
 });
 
 router.post('collections.exportAll', auth(), async ctx => {

server/api/index.js

@@ -45,7 +45,7 @@ router.use('/', shares.routes());
 router.use('/', team.routes());
 router.use('/', integrations.routes());
 router.use('/', notificationSettings.routes());
-router.post('*', async (ctx, next) => {
+router.post('*', ctx => {
   ctx.throw(new NotFoundError('Endpoint not found'));
 });
 

server/api/middlewares/apiWrapper.js

@@ -1,4 +1,5 @@
 // @flow
+import stream from 'stream';
 import { type Context } from 'koa';
 
 export default function apiWrapper() {
@@ -10,7 +11,10 @@ export default function apiWrapper() {
 
     const ok = ctx.status < 400;
 
-    if (typeof ctx.body !== 'string') {
+    if (
+      typeof ctx.body !== 'string' &&
+      !(ctx.body instanceof stream.Readable)
+    ) {
       // $FlowFixMe
       ctx.body = {
         ...ctx.body,

server/pages/developers/Api.js

@@ -125,7 +125,7 @@ export default function Api() {
             <Arguments pagination />
           </Method>
 
-          <Method method="collections.info" label="Get a document collection">
+          <Method method="collections.info" label="Get a collection">
             <Description>
               Returns detailed information on a document collection.
             </Description>
@@ -148,6 +148,17 @@ export default function Api() {
             </Arguments>
           </Method>
 
+          <Method method="collections.export" label="Export a collection">
+            <Description>
+              Returns a zip file of all the collections documents in markdown
+              format. If documents are nested then they will be nested in
+              folders inside the zip file.
+            </Description>
+            <Arguments>
+              <Argument id="id" description="Collection id" required />
+            </Arguments>
+          </Method>
+
           <Method method="collections.update" label="Update a collection">
             <Description>
               This method allows you to modify an already created collection.