From e225c3190ea4cb5f68f642aab455ed0044fdecf9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E0=A4=95=E0=A4=BE=E0=A4=B0=E0=A4=A4=E0=A5=8B=E0=A4=AB?=
 =?UTF-8?q?=E0=A5=8D=E0=A4=AB=E0=A5=87=E0=A4=B2=E0=A4=B8=E0=A5=8D=E0=A4=95?=
 =?UTF-8?q?=E0=A5=8D=E0=A4=B0=E0=A4=BF=E0=A4=AA=E0=A5=8D=E0=A4=9F=E2=84=A2?=
 <netroy@users.noreply.github.com>
Date: Wed, 21 Dec 2022 13:30:51 +0100
Subject: [PATCH] fix: View option for binary-data shouldn't download the file
 on Chrome/Edge (#4995)

* delete unused code

* fix: Do not set the `Content-Disposition` header when viewing binary files

* remove the duplicate styles.

these already exist in BinaryDataDisplayEmbed.vue
---
 packages/cli/src/Server.ts                         |  4 +++-
 packages/editor-ui/src/Interface.ts                |  3 +--
 .../editor-ui/src/components/BinaryDataDisplay.vue | 14 --------------
 .../src/components/BinaryDataDisplayEmbed.vue      |  2 +-
 packages/editor-ui/src/components/RunData.vue      |  2 +-
 packages/editor-ui/src/mixins/restApi.ts           |  9 ++-------
 6 files changed, 8 insertions(+), 26 deletions(-)

diff --git a/packages/cli/src/Server.ts b/packages/cli/src/Server.ts
index fab952e0f3..65217120d3 100644
--- a/packages/cli/src/Server.ts
+++ b/packages/cli/src/Server.ts
@@ -1515,7 +1515,9 @@ class App {
 					identifier,
 				);
 				if (mimeType) res.setHeader('Content-Type', mimeType);
-				if (fileName) res.setHeader('Content-Disposition', `attachment; filename="${fileName}"`);
+				if (req.query.mode === 'download' && fileName) {
+					res.setHeader('Content-Disposition', `attachment; filename="${fileName}"`);
+				}
 				res.setHeader('Content-Length', fileSize);
 				res.sendFile(binaryPath);
 			},
diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index eb5f7fb7d8..51eb5b6cca 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -235,8 +235,7 @@ export interface IRestApi {
 	deleteExecutions(sendData: IExecutionDeleteFilter): Promise<void>;
 	retryExecution(id: string, loadWorkflow?: boolean): Promise<boolean>;
 	getTimezones(): Promise<IDataObject>;
-	getBinaryBufferString(dataPath: string): Promise<string>;
-	getBinaryUrl(dataPath: string): string;
+	getBinaryUrl(dataPath: string, mode: 'view' | 'download'): string;
 }
 
 export interface INodeTranslationHeaders {
diff --git a/packages/editor-ui/src/components/BinaryDataDisplay.vue b/packages/editor-ui/src/components/BinaryDataDisplay.vue
index f1d35b0352..c1f5b71355 100644
--- a/packages/editor-ui/src/components/BinaryDataDisplay.vue
+++ b/packages/editor-ui/src/components/BinaryDataDisplay.vue
@@ -111,19 +111,5 @@ export default mixins(nodeHelpers, restApi).extend({
 			height: 100%;
 		}
 	}
-
-	.binary-data {
-		background-color: var(--color-foreground-xlight);
-
-		&.image {
-			max-height: calc(100% - 1em);
-			max-width: calc(100% - 1em);
-		}
-
-		&.other {
-			height: calc(100% - 1em);
-			width: calc(100% - 1em);
-		}
-	}
 }
 </style>
diff --git a/packages/editor-ui/src/components/BinaryDataDisplayEmbed.vue b/packages/editor-ui/src/components/BinaryDataDisplayEmbed.vue
index 5b71d0a480..a0ce6d7de1 100644
--- a/packages/editor-ui/src/components/BinaryDataDisplayEmbed.vue
+++ b/packages/editor-ui/src/components/BinaryDataDisplayEmbed.vue
@@ -56,7 +56,7 @@ export default mixins(restApi).extend({
 			}
 		} else {
 			try {
-				const binaryUrl = this.restApi().getBinaryUrl(id);
+				const binaryUrl = this.restApi().getBinaryUrl(id, 'view');
 				if (isJSONData) {
 					this.jsonData = await (await fetch(binaryUrl)).json();
 				} else {
diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index 0671518e92..a9f310e983 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -1202,7 +1202,7 @@ export default mixins(externalHooks, genericHelpers, nodeHelpers, pinData).exten
 			const { id, data, fileName, fileExtension, mimeType } = this.binaryData[index][key];
 
 			if (id) {
-				const url = this.restApi().getBinaryUrl(id);
+				const url = this.restApi().getBinaryUrl(id, 'download');
 				saveAs(url, [fileName, fileExtension].join('.'));
 				return;
 			} else {
diff --git a/packages/editor-ui/src/mixins/restApi.ts b/packages/editor-ui/src/mixins/restApi.ts
index eeda2ccf98..b9bbbcc643 100644
--- a/packages/editor-ui/src/mixins/restApi.ts
+++ b/packages/editor-ui/src/mixins/restApi.ts
@@ -201,13 +201,8 @@ export const restApi = Vue.extend({
 				},
 
 				// Binary data
-				getBinaryBufferString: (dataPath: string): Promise<string> => {
-					return self.restApi().makeRestApiRequest('GET', `/data/${dataPath}`);
-				},
-
-				getBinaryUrl: (dataPath: string): string => {
-					return self.rootStore.getRestApiContext.baseUrl + `/data/${dataPath}`;
-				},
+				getBinaryUrl: (dataPath, mode): string =>
+					self.rootStore.getRestApiContext.baseUrl + `/data/${dataPath}?mode=${mode}`,
 			};
 		},
 	},