✨ Introduce binary data management (#2059)

* introduce binary data management * merge fixes * fixes * init binary data manager for other modes * improve binary manager * improve binary manager * delete binary data on executions delete * lazy delete non-saved executions binary data * merge fixes + error handing * improve structure * leftovers and cleanups * formatting * fix config description * fixes * fix races * duplicate binary data for execute workflow node * clean up and cr * update mode name, add binary mode to diagnostics * update mode name, add prefix to filename * update filename * allow multiple modes, backward compatibility * improve file and id naming * use execution id for binary data storage * delete binary data by execution id * add meta for persisted binary data * delete marked persisted files * mark deletion by executionid * add env var for persisted binary data ttl * improvements * lint fix * fix env var description * cleanup * cleanup * ⚡ Minor improvements Co-authored-by: Jan Oberhauser <jan.oberhauser@gmail.com>
2025-12-17 01:56:46 +00:00 · 2021-12-23 22:29:04 +01:00
parent 416e15cdb6
commit 1e42effc3a
22 changed files with 743 additions and 40 deletions
--- a/packages/editor-ui/src/components/BinaryDataDisplayEmbed.vue
+++ b/packages/editor-ui/src/components/BinaryDataDisplayEmbed.vue
@@ -0,0 +1,84 @@
+<template>
+	<div>
+		<div v-if="isLoading">
+			Loading binary data...
+		</div>
+		<div v-else-if="error">
+			Error loading binary data
+		</div>
+		<div v-else>
+			<video v-if="binaryData.mimeType && binaryData.mimeType.startsWith('video/')" controls autoplay>
+				<source :src="embedSource" :type="binaryData.mimeType">
+				{{ $locale.baseText('binaryDataDisplay.yourBrowserDoesNotSupport') }}
+			</video>
+			<embed v-else :src="embedSource" class="binary-data" :class="embedClass"/>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+
+
+import mixins from 'vue-typed-mixins';
+import { restApi } from '@/components/mixins/restApi';
+
+export default mixins(
+	restApi,
+)
+	.extend({
+		name: 'BinaryDataDisplayEmbed',
+		props: [
+			'binaryData', // IBinaryDisplayData
+		],
+		data() {
+			return {
+				isLoading: true,
+				embedSource: '',
+				error: false,
+			};
+		},
+		async mounted() {
+			if(!this.binaryData.id) {
+				this.embedSource = 'data:' + this.binaryData.mimeType + ';base64,' + this.binaryData.data;
+				this.isLoading = false;
+				return;
+			}
+
+			try {
+				const bufferString = await this.restApi().getBinaryBufferString(this.binaryData!.id!);
+				this.embedSource = 'data:' + this.binaryData.mimeType + ';base64,' + bufferString;
+				this.isLoading = false;
+			} catch (e) {
+				this.isLoading = false;
+				this.error = true;
+			}
+		},
+		methods: {
+			embedClass (): string[] {
+				// @ts-ignore
+				if (this.binaryData! !== null && this.binaryData!.mimeType! !== undefined && (this.binaryData!.mimeType! as string).startsWith('image')) {
+					return ['image'];
+				}
+				return ['other'];
+			},
+		},
+	});
+</script>
+
+<style lang="scss">
+
+.binary-data {
+    background-color: #fff;
+
+    &.image {
+        max-height: calc(100% - 1em);
+        max-width: calc(100% - 1em);
+    }
+
+    &.other {
+        height: calc(100% - 1em);
+        width: calc(100% - 1em);
+    }
+}
+
+</style>