mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-25 04:34:06 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse source 
* ✨ Make it possible to download binary data

* ⚡ Fix lint issues and add support for filesystem mode

* ⚡ Design adjustment
This commit is contained in:
Jan Oberhauser 2022-03-28 12:59:53 +02:00 committed by GitHub
parent 2ba8afa522
commit 13a9db7745
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
packages/editor-ui/src/components/RunData.vue
View file

@ -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 {

3
packages/editor-ui/src/plugins/i18n/locales/en.json
View file

@ -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."