From 983825dafaceb6d02a01976083d5ab2bb8431136 Mon Sep 17 00:00:00 2001
From: Nico Hoffmann <me@nhoffmann.com>
Date: Sun, 11 Aug 2024 22:11:19 +0200
Subject: [PATCH 1/2] File upload: use preview options

Fixes #5729
---
 config/fields/mixins/upload.php                 |  6 +++++-
 config/sections/files.php                       |  1 +
 panel/src/components/Forms/Field/FilesField.vue |  1 +
 panel/src/components/Uploads/UploadItem.vue     |  1 +
 .../components/Uploads/UploadItemPreview.vue    | 17 +++++++++++++++--
 panel/src/panel/upload.js                       |  8 ++++++--
 6 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/config/fields/mixins/upload.php b/config/fields/mixins/upload.php
index aad39338e4..a5b9962675 100644
--- a/config/fields/mixins/upload.php
+++ b/config/fields/mixins/upload.php
@@ -23,7 +23,11 @@
 				$uploads = [];
 			}
 
-			$uploads['accept'] = '*';
+			$uploads['accept']  = '*';
+
+			if ($preview = $this->image) {
+				$uploads['preview'] = $preview;
+			}
 
 			if ($template = $uploads['template'] ?? null) {
 				// get parent object for upload target
diff --git a/config/sections/files.php b/config/sections/files.php
index bb8532fb5d..35ff9e3eb9 100644
--- a/config/sections/files.php
+++ b/config/sections/files.php
@@ -194,6 +194,7 @@
 				'multiple'   => $multiple,
 				'max'        => $max,
 				'api'        => $this->parent->apiUrl(true) . '/files',
+				'preview'    => $this->image,
 				'attributes' => [
 					// TODO: an edge issue that needs to be solved:
 					//		 if multiple users load the same section
diff --git a/panel/src/components/Forms/Field/FilesField.vue b/panel/src/components/Forms/Field/FilesField.vue
index fb03c6d3fb..76859ca22a 100644
--- a/panel/src/components/Forms/Field/FilesField.vue
+++ b/panel/src/components/Forms/Field/FilesField.vue
@@ -41,6 +41,7 @@ export default {
 				accept: this.uploads.accept,
 				max: this.max,
 				multiple: this.multiple,
+				preview: this.uploads.preview,
 				url: this.$panel.urls.api + "/" + this.endpoints.field + "/upload",
 				on: {
 					done: (files) => {
diff --git a/panel/src/components/Uploads/UploadItem.vue b/panel/src/components/Uploads/UploadItem.vue
index f2e66451c7..33dc827bc7 100644
--- a/panel/src/components/Uploads/UploadItem.vue
+++ b/panel/src/components/Uploads/UploadItem.vue
@@ -1,6 +1,7 @@
 <template>
 	<li :data-completed="completed" class="k-upload-item">
 		<k-upload-item-preview
+			v-bind="$panel.upload.preview"
 			:color="color"
 			:icon="icon"
 			:type="type"
diff --git a/panel/src/components/Uploads/UploadItemPreview.vue b/panel/src/components/Uploads/UploadItemPreview.vue
index 205364849f..e29c055164 100644
--- a/panel/src/components/Uploads/UploadItemPreview.vue
+++ b/panel/src/components/Uploads/UploadItemPreview.vue
@@ -1,11 +1,16 @@
 <template>
 	<a :href="url" class="k-upload-item-preview" target="_blank">
-		<k-image v-if="isPreviewable" :cover="true" :src="url" back="pattern" />
+		<k-image
+			v-if="isPreviewable"
+			:cover="cover"
+			:src="url"
+			:back="back ?? 'pattern'"
+		/>
 		<k-icon-frame
 			v-else
 			:color="color ?? fallbackColor"
 			:icon="icon ?? fallbackIcon"
-			back="black"
+			:back="back ?? 'black'"
 			ratio="1/1"
 		/>
 	</a>
@@ -14,10 +19,18 @@
 <script>
 export const props = {
 	props: {
+		/**
+		 * Preview back color
+		 */
+		back: String,
 		/**
 		 * Preview icon color
 		 */
 		color: String,
+		cover: {
+			type: Boolean,
+			default: true
+		},
 		/**
 		 * Preview icon type
 		 */
diff --git a/panel/src/panel/upload.js b/panel/src/panel/upload.js
index c55b016b25..e7b69cb40f 100644
--- a/panel/src/panel/upload.js
+++ b/panel/src/panel/upload.js
@@ -12,6 +12,7 @@ export const defaults = () => {
 		files: [],
 		max: null,
 		multiple: true,
+		preview: {},
 		replacing: null,
 		url: null
 	};
@@ -137,6 +138,9 @@ export default (panel) => {
 
 			const dialog = {
 				component: "k-upload-dialog",
+				props: {
+					preview: this.preview
+				},
 				on: {
 					cancel: () => this.cancel(),
 					submit: async () => {
@@ -147,10 +151,10 @@ export default (panel) => {
 				}
 			};
 
-			// when replacing a file, use decdicated dialog component
+			// when replacing a file, use dedicated dialog component
 			if (this.replacing) {
 				dialog.component = "k-upload-replace-dialog";
-				dialog.props = { original: this.replacing };
+				dialog.props.original = this.replacing;
 			}
 
 			panel.dialog.open(dialog);

From ee7a11cc7ad2622b9aa25e236dc43417da0a30ee Mon Sep 17 00:00:00 2001
From: Bastian Allgeier <mail@bastianallgeier.com>
Date: Mon, 12 Aug 2024 11:13:36 +0200
Subject: [PATCH 2/2] Keep the UploadItem component independent from the
 panel.upload module

---
 .../lab/components/dialogs/5_upload/index.vue | 49 ++++++++++++++++---
 .../uploads/2_upload-item/index.vue           | 13 +++++
 .../uploads/3_upload-item-preview/index.vue   | 19 ++++++-
 panel/src/components/Uploads/UploadItem.vue   |  3 +-
 panel/src/panel/upload.js                     |  1 +
 5 files changed, 76 insertions(+), 9 deletions(-)

diff --git a/panel/lab/components/dialogs/5_upload/index.vue b/panel/lab/components/dialogs/5_upload/index.vue
index cae1635206..6ea5444d89 100644
--- a/panel/lab/components/dialogs/5_upload/index.vue
+++ b/panel/lab/components/dialogs/5_upload/index.vue
@@ -5,6 +5,11 @@
 				Open
 			</k-button>
 		</k-lab-example>
+		<k-lab-example :flex="true" label="Custom Preview">
+			<k-button icon="open" variant="filled" @click="openCustomPreview">
+				Open
+			</k-button>
+		</k-lab-example>
 		<k-lab-example :flex="true" label="Upload error">
 			<k-button icon="open" variant="filled" @click="openUploadError">
 				Open
@@ -16,6 +21,38 @@
 <script>
 export default {
 	methods: {
+		openCustomPreview() {
+			this.$panel.upload.open();
+			this.$panel.upload.files = [
+				{
+					back: "red",
+					cover: false,
+					name: "test-0",
+					extension: "jpg",
+					url: "https://picsum.photos/600/850",
+					type: "image/jpeg",
+					niceSize: "80kb"
+				},
+				{
+					back: "orange",
+					cover: false,
+					name: "test-1",
+					extension: "jpg",
+					niceSize: "80kb",
+					url: "https://picsum.photos/850/600",
+					type: "image/jpeg"
+				},
+				{
+					back: "green",
+					cover: false,
+					name: "test-2",
+					extension: "jpg",
+					niceSize: "80kb",
+					url: "https://picsum.photos/400/850",
+					type: "image/jpeg"
+				}
+			];
+		},
 		openEmpty() {
 			this.$panel.upload.reset();
 			this.$panel.upload.open();
@@ -28,7 +65,7 @@ export default {
 					extension: "jpg",
 					url: "https://picsum.photos/600/850",
 					type: "image/jpeg",
-					niceSize: "80kb",
+					niceSize: "80kb"
 				},
 				{
 					name: "test-1",
@@ -37,7 +74,7 @@ export default {
 					url: "https://picsum.photos/600/850",
 					type: "image/jpeg",
 					error:
-						"Thisisaverylongerrormessagethatcouldbreakthelayoutoftheuploaderandmaybeevenshouldbecauseotherwisewedon'tseeit.",
+						"Thisisaverylongerrormessagethatcouldbreakthelayoutoftheuploaderandmaybeevenshouldbecauseotherwisewedon'tseeit."
 				},
 				{
 					name: "test-2",
@@ -46,10 +83,10 @@ export default {
 					url: "https://picsum.photos/600/850",
 					type: "image/jpeg",
 					error:
-						"This one should wrap proplery because it has some spaces and isn't completely bonkers",
-				},
+						"This one should wrap proplery because it has some spaces and isn't completely bonkers"
+				}
 			];
-		},
-	},
+		}
+	}
 };
 </script>
diff --git a/panel/lab/components/uploads/2_upload-item/index.vue b/panel/lab/components/uploads/2_upload-item/index.vue
index 9ffaf8bb42..89e9adf711 100644
--- a/panel/lab/components/uploads/2_upload-item/index.vue
+++ b/panel/lab/components/uploads/2_upload-item/index.vue
@@ -11,6 +11,19 @@
 				@rename="rename"
 			/>
 		</k-lab-example>
+		<k-lab-example label="Upload Item with custom preview settings">
+			<k-upload-item
+				:cover="false"
+				back="gray-400"
+				extension="jpeg"
+				type="image/jpeg"
+				name="test"
+				niceSize="128 kB"
+				url="https://picsum.photos/100/300"
+				@remove="remove"
+				@rename="rename"
+			/>
+		</k-lab-example>
 		<k-lab-example label="Progress">
 			<k-upload-item
 				:progress="80"
diff --git a/panel/lab/components/uploads/3_upload-item-preview/index.vue b/panel/lab/components/uploads/3_upload-item-preview/index.vue
index fd9da28e8c..a90742947f 100644
--- a/panel/lab/components/uploads/3_upload-item-preview/index.vue
+++ b/panel/lab/components/uploads/3_upload-item-preview/index.vue
@@ -1,9 +1,24 @@
 <template>
 	<k-lab-examples>
-		<k-lab-example label="Image with preview">
+		<k-lab-example label="Image">
 			<k-upload-item-preview
 				type="image/jpeg"
-				url="https://picsum.photos/200/200"
+				url="https://picsum.photos/100/200"
+			/>
+		</k-lab-example>
+		<k-lab-example label="Image & cover: false">
+			<k-upload-item-preview
+				:cover="false"
+				type="image/jpeg"
+				url="https://picsum.photos/100/200"
+			/>
+		</k-lab-example>
+		<k-lab-example label="Image & cover: false & back: white">
+			<k-upload-item-preview
+				back="white"
+				:cover="false"
+				type="image/jpeg"
+				url="https://picsum.photos/100/200"
 			/>
 		</k-lab-example>
 		<k-lab-example label="Image without preview">
diff --git a/panel/src/components/Uploads/UploadItem.vue b/panel/src/components/Uploads/UploadItem.vue
index 33dc827bc7..cf73f2bfd5 100644
--- a/panel/src/components/Uploads/UploadItem.vue
+++ b/panel/src/components/Uploads/UploadItem.vue
@@ -1,8 +1,9 @@
 <template>
 	<li :data-completed="completed" class="k-upload-item">
 		<k-upload-item-preview
-			v-bind="$panel.upload.preview"
+			:back="back"
 			:color="color"
+			:cover="cover"
 			:icon="icon"
 			:type="type"
 			:url="url"
diff --git a/panel/src/panel/upload.js b/panel/src/panel/upload.js
index e7b69cb40f..4c19761746 100644
--- a/panel/src/panel/upload.js
+++ b/panel/src/panel/upload.js
@@ -106,6 +106,7 @@ export default (panel) => {
 			const url = URL.createObjectURL(file);
 
 			return {
+				...this.preview,
 				completed: false,
 				error: null,
 				extension: extension(file.name),