Media dropzone improvements (Batch upload, Upload sorting, Folder upload, Progress notification)

src/assets/lang/da-dk.ts

@@ -353,6 +353,9 @@ export default {
 		uploadNotAllowed: 'Upload er ikke tiladt på denne lokation',
 		disallowedMediaType: "Cannot upload this file, the media type with alias '%0%' is not allowed here",
 		invalidFileName: 'Cannot upload this file, it does not have a valid file name',
+		selectMediaTypeForUpload: 'Vælg medie type for uploadet filer.',
+		selectMediaTypeForUploadHelp: 'Se påvirket filer.',
+		selectMediaTypeAutoPick: 'Automatisk',
 	},
 	member: {
 		createNewMember: 'Opret et nyt medlem',

src/assets/lang/en-us.ts

@@ -359,6 +359,9 @@ export default {
 		renameFolderFailed: 'Failed to rename the folder with id %0%',
 		dragAndDropYourFilesIntoTheArea: 'Drag and drop your file(s) into the area',
 		uploadNotAllowed: 'Upload is not allowed in this location.',
+		selectMediaTypeForUpload: 'Select media type for uploaded files.',
+		selectMediaTypeForUploadHelp: 'See files affected files.',
+		selectMediaTypeAutoPick: 'Auto pick',
 	},
 	member: {
 		createNewMember: 'Create a new member',

src/assets/lang/en.ts

@@ -368,6 +368,9 @@ export default {
 		fileSecurityValidationFailure: 'One or more file security validations have failed',
 		moveToSameFolderFailed: 'Parent and destination folders cannot be the same',
 		uploadNotAllowed: 'Upload is not allowed in this location.',
+		selectMediaTypeForUpload: 'Select media type for uploaded files.',
+		selectMediaTypeForUploadHelp: 'See files affected files.',
+		selectMediaTypeAutoPick: 'Auto pick',
 	},
 	member: {
 		createNewMember: 'Create a new member',

src/packages/core/notification/notification-handler.ts

@@ -31,10 +31,10 @@ export class UmbNotificationHandler {
 	 */
 	constructor(options: UmbNotificationOptions) {
 		this.key = UmbId.new();
-		this.color = options.color || this._defaultColor;
+		this.color = options.color ?? this._defaultColor;
 		this.duration = options.duration !== undefined ? options.duration : this._defaultDuration;
 
-		this._elementName = options.elementName || this._defaultLayout;
+		this._elementName = options.elementName ?? this._defaultLayout;
 		this._data = options.data;
 
 		this._closePromise = new Promise((res) => {
@@ -65,6 +65,27 @@ export class UmbNotificationHandler {
 		this.element = notification;
 	}
 
+	/**
+	 * Updates the notification
+	 * @param {UmbNotificationOptions} options - The new options
+	 */
+	public Update(options: UmbNotificationOptions) {
+		this.color = options.color ?? this.color;
+		this.duration = options.duration !== undefined ? options.duration : this.duration;
+
+		this._elementName = options.elementName ?? this._elementName;
+
+		this._data = options.data;
+
+		this.element.color = this.color;
+		this.element.autoClose = this.duration;
+
+		const notificationChild = this.element.children?.[0];
+		if (notificationChild?.data) {
+			notificationChild.data = { ...this.element.children[0].data, ...this._data };
+		}
+	}
+
 	/**
 	 * @param {...any} args
 	 * @memberof UmbNotificationHandler

src/packages/core/notification/notification.context.ts

@@ -92,6 +92,18 @@ export class UmbNotificationContext extends UmbContextBase<UmbNotificationContex
 	public stay(color: UmbNotificationColor, options: UmbNotificationOptions): UmbNotificationHandler {
 		return this._open({ ...options, color, duration: null });
 	}
+
+	/**
+	 * Updates the notification
+	 * @param {UmbNotificationHandler} handler The handler of the notification
+	 * @param {UmbNotificationOptions} options The new options
+	 */
+	public update(handler: UmbNotificationHandler, options: UmbNotificationOptions) {
+		const notification = this._notifications.getValue().find((notification) => notification.key === handler.key);
+		if (notification) {
+			notification.Update(options);
+		}
+	}
 }
 
 export const UMB_NOTIFICATION_CONTEXT = new UmbContextToken<UmbNotificationContext>('UmbNotificationContext');

src/packages/core/repository/detail/detail-repository-base.ts

@@ -87,8 +87,8 @@ export abstract class UmbDetailRepositoryBase<
 			this.#detailStore?.append(createdData);
 
 			// TODO: how do we handle generic notifications? Is this the correct place to do it?
-			const notification = { data: { message: `Created` } };
-			this.#notificationContext!.peek('positive', notification);
+			// const notification = { data: { message: `Created` } };
+			// this.#notificationContext!.peek('positive', notification);
 		}
 
 		return { data: createdData, error };

src/packages/core/temporary-file/temporary-file-manager.class.ts

@@ -3,8 +3,6 @@ import { UmbArrayState } from '@umbraco-cms/backoffice/observable-api';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
 
-///export type TemporaryFileStatus = 'success' | 'waiting' | 'error';
-
 export enum TemporaryFileStatus {
 	SUCCESS = 'success',
 	WAITING = 'waiting',
@@ -17,6 +15,13 @@ export interface UmbTemporaryFileModel {
 	status?: TemporaryFileStatus;
 }
 
+type QueueHandlerCallback<TItem extends UmbTemporaryFileModel> = (item: TItem) => Promise<void>;
+
+type UploadOptions<TItem extends UmbTemporaryFileModel> = {
+	chunkSize?: number;
+	callback?: QueueHandlerCallback<TItem>;
+};
+
 export class UmbTemporaryFileManager<
 	UploadableItem extends UmbTemporaryFileModel = UmbTemporaryFileModel,
 > extends UmbControllerBase {
@@ -30,7 +35,7 @@ export class UmbTemporaryFileManager<
 		this.#temporaryFileRepository = new UmbTemporaryFileRepository(host);
 	}
 
-	async uploadOne(uploadableItem: UploadableItem): Promise<UploadableItem> {
+	async uploadOne(uploadableItem: UploadableItem, options?: UploadOptions<UploadableItem>): Promise<UploadableItem> {
 		this.#queue.setValue([]);
 
 		const item: UploadableItem = {
@@ -39,15 +44,18 @@ export class UmbTemporaryFileManager<
 		};
 
 		this.#queue.appendOne(item);
-		return (await this.#handleQueue())[0];
+		return (await this.#handleQueue({ ...options, chunkSize: 1 }))[0];
 	}
 
-	async upload(queueItems: Array<UploadableItem>): Promise<Array<UploadableItem>> {
+	async upload(
+		queueItems: Array<UploadableItem>,
+		options?: UploadOptions<UploadableItem>,
+	): Promise<Array<UploadableItem>> {
 		this.#queue.setValue([]);
 
 		const items = queueItems.map((item): UploadableItem => ({ status: TemporaryFileStatus.WAITING, ...item }));
 		this.#queue.append(items);
-		return this.#handleQueue();
+		return this.#handleQueue(options);
 	}
 
 	removeOne(unique: string) {
@@ -58,30 +66,44 @@ export class UmbTemporaryFileManager<
 		this.#queue.remove(uniques);
 	}
 
-	async #handleQueue() {
+	async #handleQueue(options?: UploadOptions<UploadableItem>): Promise<Array<UploadableItem>> {
 		const filesCompleted: Array<UploadableItem> = [];
 		const queue = this.#queue.getValue();
+		const chunkSize = options?.chunkSize ?? 5;
 
 		if (!queue.length) return filesCompleted;
 
-		for (const item of queue) {
-			if (!item.temporaryUnique) throw new Error(`Unique is missing for item ${item}`);
+		const chunks = Math.ceil(queue.length / chunkSize);
 
-			const { error } = await this.#temporaryFileRepository.upload(item.temporaryUnique, item.file);
-			//await new Promise((resolve) => setTimeout(resolve, (Math.random() + 0.5) * 1000)); // simulate small delay so that the upload badge is properly shown
+		const handler: QueueHandlerCallback<UploadableItem> = async (item) => {
+			const completedUpload = await this.#handleUpload(item);
+			filesCompleted.push(completedUpload);
 
-			let status: TemporaryFileStatus;
-			if (error) {
-				status = TemporaryFileStatus.ERROR;
-				this.#queue.updateOne(item.temporaryUnique, { ...item, status });
-			} else {
-				status = TemporaryFileStatus.SUCCESS;
-				this.#queue.updateOne(item.temporaryUnique, { ...item, status });
-			}
+			if (options?.callback) await options.callback(completedUpload);
+		};
 
-			filesCompleted.push({ ...item, status });
+		for (let i = 0; i < chunks; i++) {
+			const chunk = queue.slice(i * chunkSize, i * chunkSize + chunkSize);
+			await Promise.all(chunk.map(handler));
 		}
 
 		return filesCompleted;
 	}
+
+	async #handleUpload(item: UploadableItem) {
+		if (!item.temporaryUnique) throw new Error(`Unique is missing for item ${item}`);
+
+		const { error } = await this.#temporaryFileRepository.upload(item.temporaryUnique, item.file);
+
+		let status: TemporaryFileStatus;
+		if (error) {
+			status = TemporaryFileStatus.ERROR;
+			this.#queue.updateOne(item.temporaryUnique, { ...item, status });
+		} else {
+			status = TemporaryFileStatus.SUCCESS;
+			this.#queue.updateOne(item.temporaryUnique, { ...item, status });
+		}
+
+		return { ...item, status };
+	}
 }

src/packages/documents/document-types/entity-actions/import/modal/document-type-import-modal.element.ts

@@ -45,7 +45,7 @@ export class UmbDocumentTypeImportModalLayout extends UmbModalBaseElement<
 
 	#onFileDropped() {
 		const data = this.dropzone?.getFiles()[0];
-		if (!data) return;
+		if (!data || !('temporaryUnique' in data)) return;
 
 		this.#temporaryUnique = data.temporaryUnique;
 		this.#fileReader.readAsText(data.file);

src/packages/media/media-types/entity-actions/import/modal/media-type-import-modal.element.ts

@@ -42,7 +42,7 @@ export class UmbMediaTypeImportModalLayout extends UmbModalBaseElement<
 
 	#onFileDropped() {
 		const data = this.dropzone?.getFiles()[0];
-		if (!data) return;
+		if (!data || !('temporaryUnique' in data)) return;
 
 		this.#temporaryUnique = data.temporaryUnique;
 		this.#fileReader.readAsText(data.file);

src/packages/media/media-types/repository/structure/media-type-structure.repository.ts

@@ -21,6 +21,10 @@ export class UmbMediaTypeStructureRepository extends UmbContentTypeStructureRepo
 	}) {
 		return this.#dataSource.getMediaTypesOfFileExtension({ fileExtension, skip, take });
 	}
+
+	async requestFolderMediaTypes({ skip = 0, take = 100 }: { skip?: number; take?: number }) {
+		return this.#dataSource.getMediaTypesFolders({ skip, take });
+	}
 }
 
 export default UmbMediaTypeStructureRepository;

src/packages/media/media-types/repository/structure/media-type-structure.server.data-source.ts

@@ -21,6 +21,10 @@ export class UmbMediaTypeStructureServerDataSource extends UmbContentTypeStructu
 	getMediaTypesOfFileExtension({ fileExtension, skip, take }: { fileExtension: string; skip: number; take: number }) {
 		return getAllowedMediaTypesOfExtension({ fileExtension, skip, take });
 	}
+
+	getMediaTypesFolders({ skip, take }: { skip: number; take: number }) {
+		return getItemMediaTypeFolders({ skip, take });
+	}
 }
 
 const getAllowedChildrenOf = (unique: string | null) => {
@@ -55,3 +59,9 @@ const getAllowedMediaTypesOfExtension = async ({
 	const { items } = await MediaTypeService.getItemMediaTypeAllowed({ fileExtension, skip, take });
 	return items.map((item) => mapper(item));
 };
+
+const getItemMediaTypeFolders = async ({ skip, take }: { skip: number; take: number }) => {
+	// eslint-disable-next-line local-rules/no-direct-api-import
+	const { items } = await MediaTypeService.getItemMediaTypeFolders({ skip, take });
+	return items.map((item) => mapper(item));
+};

src/packages/media/media/collection/media-collection.element.ts

@@ -13,6 +13,8 @@ import { UmbRequestReloadChildrenOfEntityEvent } from '@umbraco-cms/backoffice/e
 @customElement('umb-media-collection')
 export class UmbMediaCollectionElement extends UmbCollectionDefaultElement {
 	#mediaCollection?: UmbMediaCollectionContext;
+	#refreshInCooldown: boolean = false;
+	#shouldRefreshCollection: boolean = false;
 
 	@state()
 	private _progress = -1;
@@ -33,8 +35,7 @@ export class UmbMediaCollectionElement extends UmbCollectionDefaultElement {
 	}
 
 	async #onChange() {
-		this._progress = -1;
-		this.#mediaCollection?.requestCollection();
+		this.#refreshCollection();
 
 		const eventContext = await this.getContext(UMB_ACTION_EVENT_CONTEXT);
 		const event = new UmbRequestReloadChildrenOfEntityEvent({
@@ -48,12 +49,29 @@ export class UmbMediaCollectionElement extends UmbCollectionDefaultElement {
 		this._progress = event.progress;
 	}
 
+	#refreshCollection() {
+		if (!this.#refreshInCooldown) {
+			this.#mediaCollection?.requestCollection();
+			this.#refreshInCooldown = true;
+			setTimeout(() => {
+				this.#refreshInCooldown = false;
+				if (this.#shouldRefreshCollection) {
+					this.#refreshCollection();
+					this.#shouldRefreshCollection = false;
+				}
+			}, 350);
+		} else {
+			this.#shouldRefreshCollection = true;
+		}
+	}
+
 	protected override renderToolbar() {
 		return html`
 			<umb-media-collection-toolbar slot="header"></umb-media-collection-toolbar>
 			${when(this._progress >= 0, () => html`<uui-loader-bar progress=${this._progress}></uui-loader-bar>`)}
 			<umb-dropzone
 				.parentUnique=${this._unique}
+				multiple
 				@change=${this.#onChange}
 				@progress=${this.#onProgress}></umb-dropzone>
 		`;

src/packages/media/media/components/input-rich-media/input-rich-media.element.ts

@@ -346,7 +346,7 @@ export class UmbInputRichMediaElement extends UUIFormControlMixin(UmbLitElement,
 	#renderDropzone() {
 		if (this.readonly) return nothing;
 		if (this._cards && this._cards.length >= this.max) return;
-		return html`<umb-dropzone @change=${this.#onUploadCompleted}></umb-dropzone>`;
+		return html`<umb-dropzone multiple @change=${this.#onUploadCompleted}></umb-dropzone>`;
 	}
 
 	#renderItems() {