Switch to FileSaver lib for downloading Blob files, add Blob polyfill

assets/js/src/newsletter_editor/components/save.js

@@ -3,8 +3,10 @@ define([
     'mailpoet',
     'backbone',
     'backbone.marionette',
-    'jquery'
-  ], function(App, MailPoet, Backbone, Marionette, jQuery) {
+    'jquery',
+    'blob',
+    'filesaver'
+  ], function(App, MailPoet, Backbone, Marionette, jQuery, Blob, FileSaver) {
 
   "use strict";
 
@@ -54,31 +56,15 @@ define([
   };
 
   Module.exportTemplate = function(options) {
-    if (!window.Blob || !window.URL) {
-      // TODO: Gracefully exit on incompatible browsers
-      console.log('Template export requires a browser with Blob and URL support.');
-      return;
-    }
-
     var data = _.extend(options || {}, {
       body: App.getBody(),
     });
+    var blob = new Blob(
+      [JSON.stringify(data)],
+      { type: 'application/json;charset=utf-8' }
+    );
 
-    // Create a template file and force download it
-
-    var blob = new window.Blob([JSON.stringify(data)], { type: 'application/json' }),
-        url = window.URL.createObjectURL(blob),
-        anchor = document.createElement('a');
-
-    anchor.href = url;
-    anchor.download = 'template.json';
-    anchor.style.display = 'none';
-    document.body.appendChild(anchor);
-
-    anchor.click();
-
-    window.URL.revokeObjectURL(url);
-    document.body.removeChild(anchor);
+    FileSaver.saveAs(blob, 'template.json');
   };
 
   Module.SaveView = Marionette.LayoutView.extend({

assets/js/src/newsletters/templates.jsx

@@ -1,6 +1,7 @@
 define(
   [
     'react',
+    'underscore',
     'mailpoet',
     'react-router',
     'classnames',
@@ -8,6 +9,7 @@ define(
   ],
   function(
     React,
+    _,
     MailPoet,
     Router,
     classNames,
@@ -33,12 +35,21 @@ define(
       handleSubmit: function(e) {
         e.preventDefault();
 
-        var reader = new FileReader(),
+        if (_.size(this.refs.templateFile.files) <= 0) return false;
+
+        var file = _.first(this.refs.templateFile.files),
+            reader = new FileReader(),
             saveTemplate = this.saveTemplate;
+
         reader.onload = function(e) {
-          saveTemplate(JSON.parse(e.target.result));
+          try {
+            saveTemplate(JSON.parse(e.target.result));
+          } catch (err) {
+            MailPoet.Notice.error('This template file appears to be malformed. Please try another one.');
+          }
         }.bind(this);
-        reader.readAsText(this.refs.templateFile.files[0]);
+
+        reader.readAsText(file);
       },
       render: function() {
         return (