observe temp uploads...

src/Umbraco.Web.UI.Client/src/packages/core/temporary-file/temporary-file-manager.class.ts

@@ -22,15 +22,13 @@ export class UmbTemporaryFileManager extends UmbControllerBase {
 	#queue = new UmbArrayState<UmbTemporaryFileModel>([], (item) => item.unique);
 	public readonly queue = this.#queue.asObservable();
 
-	#completed = new UmbArrayState<UmbTemporaryFileModel>([], (item) => item.unique);
-	public readonly completed = this.#completed.asObservable();
-
 	constructor(host: UmbControllerHost) {
 		super(host);
 		this.#temporaryFileRepository = new UmbTemporaryFileRepository(host);
 	}
 
 	async uploadOne(queueItem: UmbTemporaryFileQueueModel): Promise<Array<UmbTemporaryFileModel>> {
+		this.#queue.setValue([]);
 		const item: UmbTemporaryFileModel = {
 			file: queueItem.file,
 			unique: queueItem.unique ?? UmbId.new(),
@@ -41,6 +39,7 @@ export class UmbTemporaryFileManager extends UmbControllerBase {
 	}
 
 	async upload(queueItems: Array<UmbTemporaryFileQueueModel>): Promise<Array<UmbTemporaryFileModel>> {
+		this.#queue.setValue([]);
 		const items = queueItems.map(
 			(item): UmbTemporaryFileModel => ({
 				file: item.file,
@@ -72,15 +71,16 @@ export class UmbTemporaryFileManager extends UmbControllerBase {
 			const { error } = await this.#temporaryFileRepository.upload(item.unique, item.file);
 			await new Promise((resolve) => setTimeout(resolve, (Math.random() + 0.5) * 1000)); // simulate small delay so that the upload badge is properly shown
 
+			let status: TemporaryFileStatus;
 			if (error) {
-				this.#queue.updateOne(item.unique, { ...item, status: 'error' });
+				status = 'error';
+				this.#queue.updateOne(item.unique, { ...item, status });
 			} else {
-				this.#queue.updateOne(item.unique, { ...item, status: 'success' });
+				status = 'success';
+				this.#queue.updateOne(item.unique, { ...item, status });
 			}
-			filesCompleted.push(item);
 
-			this.#completed.appendOne(item);
-			this.#queue.removeOne(item.unique);
+			filesCompleted.push({ ...item, status });
 		}
 
 		return filesCompleted;

src/Umbraco.Web.UI.Client/src/packages/media/media/components/dropzone-media/dropzone-media.element.ts

@@ -1,16 +1,18 @@
 import { UmbMediaDetailRepository } from '../../repository/index.js';
-import { UMB_MEDIA_ENTITY_TYPE } from '../../entity.js';
 import type { UmbMediaDetailModel } from '../../types.js';
-import { css, html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
+import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
 import type { UUIFileDropzoneEvent } from '@umbraco-cms/backoffice/external/uui';
-import { UmbId } from '@umbraco-cms/backoffice/id';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import {
 	type UmbAllowedMediaTypeModel,
 	UmbMediaTypeStructureRepository,
 	getMediaTypeByFileMimeType,
 } from '@umbraco-cms/backoffice/media-type';
-import { UmbTemporaryFileManager } from '@umbraco-cms/backoffice/temporary-file';
+import {
+	UmbTemporaryFileManager,
+	type UmbTemporaryFileQueueModel,
+	type UmbTemporaryFileModel,
+} from '@umbraco-cms/backoffice/temporary-file';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 
 @customElement('umb-dropzone-media')
@@ -20,14 +22,18 @@ export class UmbDropzoneMediaElement extends UmbLitElement {
 	#allowedMediaTypes: Array<UmbAllowedMediaTypeModel> = [];
 	#mediaDetailRepository = new UmbMediaDetailRepository(this);
 
-	@property()
-	collectionUnique: string | null = null;
-
-	@property()
-	parentUnique: string | null = null;
+	@state()
+	private queue: Array<UmbTemporaryFileModel> = [];
 
 	constructor() {
 		super();
+
+		this.observe(this.#fileManager.queue, (queue) => {
+			this.queue = queue;
+			/** TODO: Show uploading badge while waiting... */
+			console.log(queue);
+		});
+
 		this.#getAllowedMediaTypes();
 		document.addEventListener('dragenter', this.#handleDragEnter.bind(this));
 		document.addEventListener('dragleave', this.#handleDragLeave.bind(this));
@@ -65,35 +71,30 @@ export class UmbDropzoneMediaElement extends UmbLitElement {
 		return this.#allowedMediaTypes.find((type) => type.name === mediaTypeName)!;
 	}
 
-	async #uploadHandler(file: File) {
-		const unique = UmbId.new();
-		const uploaded = await this.#fileManager.uploadOne({ file, unique });
-		if (uploaded[0].status === 'error') {
-			throw new Error('Error uploading file');
-		}
-		return uploaded[0];
+	async #uploadHandler(files: Array<File>) {
+		const queue = files.map((file): UmbTemporaryFileQueueModel => ({ file }));
+		const uploaded = await this.#fileManager.upload(queue);
+		return uploaded;
 	}
 
 	async #onFileUpload(event: UUIFileDropzoneEvent) {
 		const files: Array<File> = event.detail.files;
 		if (!files.length) return;
+		const uploads = await this.#uploadHandler(files);
 
-		for (const file of files) {
-			const mediaType = this.#getMediaTypeFromMime(file.type);
-
-			const uploaded = await this.#uploadHandler(file);
-			/** TODO: Show uploading badge while waiting... */
+		for (const upload of uploads) {
+			const mediaType = this.#getMediaTypeFromMime(upload.file.type);
 
 			const preset: Partial<UmbMediaDetailModel> = {
 				mediaType: {
 					unique: mediaType.unique,
-					collection: this.collectionUnique ? { unique: this.collectionUnique } : null,
+					collection: null,
 				},
 				variants: [
 					{
 						culture: null,
 						segment: null,
-						name: file.name,
+						name: upload.file.name,
 						createDate: null,
 						updateDate: null,
 					},
@@ -101,7 +102,7 @@ export class UmbDropzoneMediaElement extends UmbLitElement {
 				values: [
 					{
 						alias: 'umbracoFile',
-						value: { src: uploaded.unique },
+						value: { src: upload.unique },
 						culture: null,
 						segment: null,
 					},