From 6e7574328b5774ec0fcbff69df9a33cbcf2133a3 Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Wed, 27 Mar 2024 16:43:02 +0100 Subject: [PATCH] observe temp uploads... --- .../temporary-file-manager.class.ts | 16 +++--- .../dropzone-media/dropzone-media.element.ts | 49 ++++++++++--------- 2 files changed, 33 insertions(+), 32 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/temporary-file/temporary-file-manager.class.ts b/src/Umbraco.Web.UI.Client/src/packages/core/temporary-file/temporary-file-manager.class.ts index 5127c55990..2f349c4bbf 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/temporary-file/temporary-file-manager.class.ts +++ b/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([], (item) => item.unique); public readonly queue = this.#queue.asObservable(); - #completed = new UmbArrayState([], (item) => item.unique); - public readonly completed = this.#completed.asObservable(); - constructor(host: UmbControllerHost) { super(host); this.#temporaryFileRepository = new UmbTemporaryFileRepository(host); } async uploadOne(queueItem: UmbTemporaryFileQueueModel): Promise> { + 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): Promise> { + 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; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/dropzone-media/dropzone-media.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/dropzone-media/dropzone-media.element.ts index c0b2990cbc..f05ee14351 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/dropzone-media/dropzone-media.element.ts +++ b/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 = []; #mediaDetailRepository = new UmbMediaDetailRepository(this); - @property() - collectionUnique: string | null = null; - - @property() - parentUnique: string | null = null; + @state() + private queue: Array = []; 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) { + const queue = files.map((file): UmbTemporaryFileQueueModel => ({ file })); + const uploaded = await this.#fileManager.upload(queue); + return uploaded; } async #onFileUpload(event: UUIFileDropzoneEvent) { const files: Array = 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 = { 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, },