fix(editor): Restrict what binary-data types can be viewed in the UI (#14685)

packages/frontend/editor-ui/src/components/RunData.test.ts

@@ -117,8 +117,8 @@ describe('RunData', () => {
 		expect(getByText('Json data 1')).toBeInTheDocument();
 	});
 
-	it('should render view and download buttons for PDFs', async () => {
-		const { getByTestId } = render({
+	it('should render only download buttons for PDFs', async () => {
+		const { getByTestId, queryByTestId } = render({
 			defaultRunItems: [
 				{
 					json: {},
@@ -135,6 +135,31 @@ describe('RunData', () => {
 			displayMode: 'binary',
 		});
 
+		await waitFor(() => {
+			expect(queryByTestId('ndv-view-binary-data')).not.toBeInTheDocument();
+			expect(getByTestId('ndv-download-binary-data')).toBeInTheDocument();
+			expect(getByTestId('ndv-binary-data_0')).toBeInTheDocument();
+		});
+	});
+
+	it('should render view and download buttons for JPEGs', async () => {
+		const { getByTestId } = render({
+			defaultRunItems: [
+				{
+					json: {},
+					binary: {
+						data: {
+							fileName: 'test.jpg',
+							fileType: 'image',
+							mimeType: 'image/jpeg',
+							data: '',
+						},
+					},
+				},
+			],
+			displayMode: 'binary',
+		});
+
 		await waitFor(() => {
 			expect(getByTestId('ndv-view-binary-data')).toBeInTheDocument();
 			expect(getByTestId('ndv-download-binary-data')).toBeInTheDocument();

packages/frontend/editor-ui/src/components/RunData.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { ViewableMimeTypes } from '@n8n/api-types';
 import { useStorage } from '@/composables/useStorage';
 import { saveAs } from 'file-saver';
 import type {
@@ -1182,10 +1183,8 @@ function closeBinaryDataDisplay() {
 }
 
 function isViewable(index: number, key: string | number): boolean {
-	const { fileType } = binaryData.value[index][key];
-	return (
-		!!fileType && ['image', 'audio', 'video', 'text', 'json', 'pdf', 'html'].includes(fileType)
-	);
+	const { mimeType } = binaryData.value[index][key];
+	return ViewableMimeTypes.includes(mimeType);
 }
 
 function isDownloadable(index: number, key: string | number): boolean {