feat(editor): Add download button for binary data (#2992)

* ✨ Make it possible to download binary data * ⚡ Fix lint issues and add support for filesystem mode * ⚡ Design adjustment
n8n-io · Mar 28, 2022 · 13a9db7 · 13a9db7
1 parent 2ba8afa
commit 13a9db7
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 2 deletions.
diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
@@ -184,6 +184,7 @@
 
 											<div class="binary-data-show-data-button-wrapper">
 												<n8n-button size="small" :label="$locale.baseText('runData.showBinaryData')" class="binary-data-show-data-button" @click="displayBinaryData(index, key)" />
+												<n8n-button v-if="isDownloadable(index, key)" size="small" type="outline" :label="$locale.baseText('runData.downloadBinaryData')" class="binary-data-show-data-button" @click="downloadBinaryData(index, key)" />
 											</div>
 
 										</div>
@@ -210,6 +211,7 @@
 import VueJsonPretty from 'vue-json-pretty';
 import {
 	GenericValue,
+	IBinaryData,
 	IBinaryKeyData,
 	IDataObject,
 	INodeExecutionData,
@@ -242,6 +244,8 @@ import { workflowRun } from '@/components/mixins/workflowRun';
 
 import mixins from 'vue-typed-mixins';
 
+import { saveAs } from 'file-saver';
+
 // A path that does not exist so that nothing is selected by default
 const deselectedPlaceholder = '_!^&*';
 
@@ -524,6 +528,24 @@ export default mixins(
 			dataItemClicked (path: string, data: object | number | string) {
 				this.state.value = data;
 			},
+			isDownloadable (index: number, key: string): boolean {
+				const binaryDataItem: IBinaryData = this.binaryData[index][key];
+				return !!(binaryDataItem.mimeType && binaryDataItem.fileName);
+			},
+			async downloadBinaryData (index: number, key: string) {
+				const binaryDataItem: IBinaryData = this.binaryData[index][key];
+
+				let bufferString = 'data:' + binaryDataItem.mimeType + ';base64,';
+				if(binaryDataItem.id) {
+					bufferString += await this.restApi().getBinaryBufferString(binaryDataItem.id);
+				} else {
+					bufferString += binaryDataItem.data;
+				}
+
+				const data = await fetch(bufferString);
+				const blob = await data.blob();
+				saveAs(blob, binaryDataItem.fileName);
+			},
 			displayBinaryData (index: number, key: string) {
 				this.binaryDataDisplayVisible = true;
 
@@ -701,7 +723,10 @@ export default mixins(
 
 					.binary-data-show-data-button-wrapper {
 						margin-top: 1.5em;
-						text-align: center;
+
+						button {
+							margin: 0 0.5em 0 0;
+						}
 					}
 
 					.label {

diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -753,7 +753,8 @@
 		"noTextDataFound": "No text data found",
 		"nodeReturnedALargeAmountOfData": "Node returned a large amount of data",
 		"output": "Output",
-		"showBinaryData": "Show Binary Data",
+		"downloadBinaryData": "Download",
+		"showBinaryData": "View",
 		"startTime": "Start Time",
 		"table": "Table",
 		"theNodeContains": "The node contains {numberOfKb} KB of data.<br />Displaying it could cause problems.<br /><br />If you do decide to display it, consider avoiding the JSON view."