Ability to export mediatag images in pad

www/common/common-util.js

@@ -207,5 +207,19 @@ define([], function () {
         return Array.prototype.slice.call(A);
     };
 
+    Util.blobURLToImage = function (url, cb) {
+        var xhr = new XMLHttpRequest();
+        xhr.onload = function() {
+            var reader = new FileReader();
+            reader.onloadend = function() {
+                cb(reader.result);
+            };
+            reader.readAsDataURL(xhr.response);
+        };
+        xhr.open('GET', url);
+        xhr.responseType = 'blob';
+        xhr.send();
+    };
+
     return Util;
 });

www/common/sframe-app-framework.js

@@ -265,7 +265,7 @@ define([
             }
         };
 
-        var setFileExporter = function (extension, fe) {
+        var setFileExporter = function (extension, fe, async) {
             var $export = common.createButton('export', true, {}, function () {
                 var ext = (typeof(extension) === 'function') ? extension() : extension;
                 var suggestion = title.suggestTitle('cryptpad-document');
@@ -273,6 +273,12 @@ define([
                     Cryptpad.fixFileName(suggestion) + '.' + ext, function (filename)
                 {
                     if (!(typeof(filename) === 'string' && filename)) { return; }
+                    if (async) {
+                        fe(function (blob) {
+                            SaveAs(blob, filename);
+                        });
+                        return;
+                    }
                     var blob = fe();
                     SaveAs(blob, filename);
                 });
@@ -280,10 +286,17 @@ define([
             toolbar.$drawer.append($export);
         };
 
-        var setFileImporter = function (options, fi) {
+        var setFileImporter = function (options, fi, async) {
             if (readOnly) { return; }
             toolbar.$drawer.append(
                 common.createButton('import', true, options, function (c, f) {
+                    if (async) {
+                        fi(c, f, function (content) {
+                            contentUpdate(content);
+                            onLocal();
+                        });
+                        return;
+                    }
                     contentUpdate(fi(c, f));
                     onLocal();
                 })

www/pad/inner.js

@@ -461,13 +461,36 @@ define([
             documentBody.innerHTML = Messages.initialState;
         });
 
-        framework.setFileImporter({ accept: 'text/html' }, function (content) {
+        var importMediaTags = function (dom, cb) {
-            return Hyperjson.fromDOM(domFromHTML(content).body);
+            var $dom = $(dom);
-        });
+            $dom.find('media-tag').each(function (i, el) {
+                $(el).empty();
+            });
+            cb($dom[0]);
+        };
+        framework.setFileImporter({ accept: 'text/html' }, function (content, f, cb) {
+            importMediaTags(domFromHTML(content).body, function (dom) {
+                cb(Hyperjson.fromDOM(dom));
+            });
+        }, true);
 
-        framework.setFileExporter('html', function () {
+        var exportMediaTags = function (inner, cb) {
-            return new Blob([ getHTML(inner) ], { type: "text/html;charset=utf-8" });
+            var $clone = $(inner).clone();
-        });
+            nThen(function (waitFor) {
+                $clone.find('media-tag > img').each(function (i, el) {
+                    Util.blobURLToImage($(el).attr('src'), waitFor(function (imgSrc) {
+                        $(el).attr('src', imgSrc);
+                    }));
+                });
+            }).nThen(function () {
+                cb($clone[0]);
+            });
+        };
+        framework.setFileExporter('html', function (cb) {
+            exportMediaTags(inner, function (toExport) {
+                cb(new Blob([ getHTML(toExport) ], { type: "text/html;charset=utf-8" }));
+            });
+        }, true);
 
         framework.setNormalizer(function (hjson) {
             return [

www/whiteboard/inner.js

@@ -6,6 +6,7 @@ define([
     'json.sortify',
     '/bower_components/chainpad-json-validator/json-ot.js',
     '/common/cryptpad-common.js',
+    '/common/common-util.js',
     '/common/cryptget.js',
     '/bower_components/nthen/index.js',
     '/common/sframe-common.js',
@@ -31,6 +32,7 @@ define([
     JSONSortify,
     JsonOT,
     Cryptpad,
+    Util,
     Cryptget,
     nThen,
     SFCommon,
@@ -361,19 +363,6 @@ define([
             APP.patchText(content);
         };
 
-        var blobURLToImage = function (url, cb) {
-            var xhr = new XMLHttpRequest();
-            xhr.onload = function() {
-                var reader = new FileReader();
-                reader.onloadend = function() {
-                    cb(reader.result);
-                };
-                reader.readAsDataURL(xhr.response);
-            };
-            xhr.open('GET', url);
-            xhr.responseType = 'blob';
-            xhr.send();
-        };
         var addImageToCanvas = function (img) {
             var w = img.width;
             var h = img.height;
@@ -470,7 +459,7 @@ define([
                         if (data.type === 'file') {
                             var mt = '<media-tag src="' + data.src + '" data-crypto-key="cryptpad:' + data.key + '"></media-tag>';
                             common.displayMediatagImage($(mt), function (err, $image) {
-                                blobURLToImage($image.attr('src'), function (imgSrc) {
+                                Util.blobURLToImage($image.attr('src'), function (imgSrc) {
                                     var img = new Image();
                                     img.onload = function () { addImageToCanvas(img); };
                                     img.src = imgSrc;