From 1f37d359f0f36add25a50a65419d8e0244a20d69 Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Thu, 11 May 2023 15:34:25 +0200
Subject: [PATCH] use new component to render file previews

---
 .../input-upload-field.element.ts             | 45 ++++++++-----------
 1 file changed, 19 insertions(+), 26 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/core/components/input-upload-field/input-upload-field.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/core/components/input-upload-field/input-upload-field.element.ts
index 1b4ac07b93..b472afeed8 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/core/components/input-upload-field/input-upload-field.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/core/components/input-upload-field/input-upload-field.element.ts
@@ -3,14 +3,14 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { map } from 'lit/directives/map.js';
 import { UUIFileDropzoneElement } from '@umbraco-ui/uui';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
-import { UmbNotificationContext, UMB_NOTIFICATION_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/notification';
+
+import './input-upload-field-file.element';
 
 @customElement('umb-input-upload-field')
 export class UmbInputUploadFieldElement extends FormControlMixin(UmbLitElement) {
-	
-
 	private _keys: Array<string> = [];
 	/**
 	 * @description Keys to the files that belong to this upload field.
@@ -46,28 +46,16 @@ export class UmbInputUploadFieldElement extends FormControlMixin(UmbLitElement)
 	@state()
 	_currentFiles: File[] = [];
 
-	@state()
-	_currentFilesTemp?: File[];
-
 	@state()
 	extensions?: string[];
 
 	@query('#dropzone')
 	private _dropzone?: UUIFileDropzoneElement;
 
-	private _notificationContext?: UmbNotificationContext;
-
 	protected getFormElement() {
 		return undefined;
 	}
 
-	constructor() {
-		super();
-		this.consumeContext(UMB_NOTIFICATION_CONTEXT_TOKEN, (instance) => {
-			this._notificationContext = instance;
-		});
-	}
-
 	connectedCallback(): void {
 		super.connectedCallback();
 		this.#setExtensions();
@@ -124,23 +112,23 @@ export class UmbInputUploadFieldElement extends FormControlMixin(UmbLitElement)
 	}
 
 	#renderFiles() {
-		if (!this._currentFiles?.length) return nothing;
 		return html` <div id="wrapper">
-				${this._currentFiles.map((file) => {
-					return html` <uui-symbol-file-thumbnail src="${ifDefined(file.name)}" alt="${ifDefined(file.name)}">
-					</uui-symbol-file-thumbnail>`;
+				${map(this._currentFiles, (file) => {
+					return html`<umb-input-upload-field-file .file=${file}></umb-input-upload-field-file>`;
 				})}
 			</div>
-			<uui-button compact @click="${this.#handleRemove}" label="Remove files">
-				<uui-icon name="umb:trash"></uui-icon> Remove file(s)
-			</uui-button>`;
+			${this._currentFiles.length
+				? html` <uui-button compact @click=${this.#handleRemove} label="Remove files">
+						<uui-icon name="umb:trash"></uui-icon> Remove file(s)
+				  </uui-button>`
+				: nothing}`;
 	}
 
 	#handleRemove() {
 		// Remove via endpoint?
 		this._currentFiles = [];
 	}
-	
+
 	static styles = [
 		UUITextStyles,
 		css`
@@ -149,16 +137,21 @@ export class UmbInputUploadFieldElement extends FormControlMixin(UmbLitElement)
 				margin-right: var(--uui-size-space-4);
 			}
 
-			uui-symbol-file-thumbnail {
+			umb-input-upload-field-file {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				width: 200px;
+				height: 200px;
 				box-sizing: border-box;
-				min-height: 150px;
 				padding: var(--uui-size-space-4);
 				border: 1px solid var(--uui-color-border);
 			}
 
 			#wrapper {
 				display: grid;
-				grid-template-columns: repeat(auto-fit, minmax(300px, auto));
+				grid-template-columns: repeat(auto-fit, 200px);
+				gap: var(--uui-size-space-4);
 			}
 		`,
 	];