From 6a6d13b075a8cc911deaba97c32f164d8f332730 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Mon, 5 Nov 2018 22:31:42 +0000
Subject: [PATCH] Allow import/export from file in editor

---
 .../editor-client/locales/en-US/editor.json   |  6 ++-
 .../editor-client/src/js/ui/clipboard.js      | 44 ++++++++++++++++---
 2 files changed, 43 insertions(+), 7 deletions(-)

diff --git a/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json b/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json
index 8c7e79b3e..f51c7b604 100644
--- a/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json
+++ b/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json
@@ -160,9 +160,11 @@
         "subflow": "__count__ subflow",
         "subflow_plural": "__count__ subflows",
         "selectNodes": "Select the text above and copy to the clipboard.",
-        "pasteNodes": "Paste nodes here",
+        "pasteNodes": "Paste flow json or",
+        "selectFile": "select a file to import",
         "importNodes": "Import nodes",
-        "exportNodes": "Export nodes to clipboard",
+        "exportNodes": "Export nodes",
+        "download": "Download",
         "importUnrecognised": "Imported unrecognised type:",
         "importUnrecognised_plural": "Imported unrecognised types:",
         "nodesExported": "Nodes exported to clipboard",
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/clipboard.js b/packages/node_modules/@node-red/editor-client/src/js/ui/clipboard.js
index 7092b4eba..82118436a 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/clipboard.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/clipboard.js
@@ -49,6 +49,21 @@ RED.clipboard = (function() {
                             $( this ).dialog( "close" );
                         }
                     },
+                    {
+                        id: "clipboard-dialog-download",
+                        class: "primary",
+                        text: RED._("clipboard.download"),
+                        click: function() {
+                            var element = document.createElement('a');
+                            element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent($("#clipboard-export").val()));
+                            element.setAttribute('download', "flows.json");
+                            element.style.display = 'none';
+                            document.body.appendChild(element);
+                            element.click();
+                            document.body.removeChild(element);
+                            $( this ).dialog( "close" );
+                        }
+                    },
                     {
                         id: "clipboard-dialog-copy",
                         class: "primary",
@@ -92,7 +107,7 @@ RED.clipboard = (function() {
                     '<a id="export-range-flow" class="editor-button toggle" href="#" data-i18n="clipboard.export.current"></a>'+
                     '<a id="export-range-full" class="editor-button toggle" href="#" data-i18n="clipboard.export.all"></a>'+
                 '</span>'+
-                '</div>'+
+            '</div>'+
             '<div class="form-row">'+
                 '<textarea readonly style="resize: none; width: 100%; border-radius: 4px;font-family: monospace; font-size: 12px; background:#f3f3f3; padding-left: 0.5em; box-sizing:border-box;" id="clipboard-export" rows="5"></textarea>'+
             '</div>'+
@@ -103,10 +118,13 @@ RED.clipboard = (function() {
                 '</span>'+
             '</div>';
 
-        importNodesDialog = '<div class="form-row">'+
-            '<textarea style="resize: none; width: 100%; border-radius: 0px;font-family: monospace; font-size: 12px; background:#eee; padding-left: 0.5em; box-sizing:border-box;" id="clipboard-import" rows="5" placeholder="'+
-            RED._("clipboard.pasteNodes")+
-            '"></textarea>'+
+        importNodesDialog =
+            '<div class="form-row"><span data-i18n="clipboard.pasteNodes"></span>'+
+                ' <a class="editor-button" id="import-file-upload-btn"><i class="fa fa-upload"></i> <span data-i18n="clipboard.selectFile"></span></a>'+
+                '<input type="file" id="import-file-upload" accept=".json" style="display:none">'+
+            '</div>'+
+            '<div class="form-row">'+
+                '<textarea style="resize: none; width: 100%; border-radius: 0px;font-family: monospace; font-size: 12px; background:#eee; padding-left: 0.5em; box-sizing:border-box;" id="clipboard-import" rows="5"></textarea>'+
             '</div>'+
             '<div class="form-row">'+
             '<label style="width:auto;margin-right: 10px;" data-i18n="clipboard.import.import"></label>'+
@@ -223,6 +241,7 @@ RED.clipboard = (function() {
         $("#clipboard-dialog-cancel").show();
         $("#clipboard-dialog-close").hide();
         $("#clipboard-dialog-copy").hide();
+        $("#clipboard-dialog-download").hide();
         $("#clipboard-dialog-ok").button("disable");
         $("#clipboard-import").keyup(validateImport);
         $("#clipboard-import").on('paste',function() { setTimeout(validateImport,10)});
@@ -236,6 +255,19 @@ RED.clipboard = (function() {
             $(this).addClass('selected');
         });
 
+        $("#import-file-upload").change(function() {
+            var fileReader = new FileReader();
+            fileReader.onload = function () {
+                $("#clipboard-import").val(fileReader.result);
+                validateImport();
+            };
+            fileReader.readAsText($(this).prop('files')[0]);
+        })
+        $("#import-file-upload-btn").click(function(evt) {
+            evt.preventDefault();
+            $("#import-file-upload").click();
+        })
+
         dialog.dialog("option","title",RED._("clipboard.importNodes")).dialog("open");
         popover = RED.popover.create({
             target: $("#clipboard-import"),
@@ -368,6 +400,8 @@ RED.clipboard = (function() {
             $("#clipboard-dialog-cancel").show();
             $("#clipboard-dialog-copy").show();
         }
+        $("#clipboard-dialog-download").show();
+
     }
 
     function hideDropTarget() {