upload to correct folder when dropping file

Author: loivsen

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

@@ -1,3 +1,4 @@
+import { UMB_MEDIA_WORKSPACE_CONTEXT } from '../workspace/media-workspace.context-token.js';
 import type { UmbMediaCollectionContext } from './media-collection.context.js';
 import { UMB_MEDIA_COLLECTION_CONTEXT } from './media-collection.context-token.js';
 import { customElement, html, state, when } from '@umbraco-cms/backoffice/external/lit';
@@ -13,11 +14,19 @@ export class UmbMediaCollectionElement extends UmbCollectionDefaultElement {
 	@state()
 	private _progress = -1;
 
+	@state()
+	private _unique: string | null = null;
+
 	constructor() {
 		super();
 		this.consumeContext(UMB_MEDIA_COLLECTION_CONTEXT, (instance) => {
 			this.#mediaCollection = instance;
 		});
+		this.consumeContext(UMB_MEDIA_WORKSPACE_CONTEXT, (instance) => {
+			this.observe(instance.unique, (unique) => {
+				this._unique = unique ?? null;
+			});
+		});
 	}
 
 	#onChange() {
@@ -33,7 +42,10 @@ export class UmbMediaCollectionElement extends UmbCollectionDefaultElement {
 		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 @change=${this.#onChange} @progress=${this.#onProgress}></umb-dropzone>
+			<umb-dropzone
+				.parentUnique=${this._unique}
+				@change=${this.#onChange}
+				@progress=${this.#onProgress}></umb-dropzone>
 		`;
 	}
 }

src/packages/media/media/dropzone/dropzone-manager.class.ts

@@ -187,8 +187,15 @@ export class UmbDropzoneManager extends UmbControllerBase {
 		fileExtensions: Array<string>,
 		parentUnique: string | null,
 	): Promise<Array<UmbUploadableExtensionModel>> {
-		// Getting all media types allowed in our current position based on parent unique.
-		const { data: allAllowedMediaTypes } = await this.#mediaTypeStructure.requestAllowedChildrenOf(parentUnique);
+		let parentMediaType: string | null = null;
+		if (parentUnique) {
+			const { data } = await this.#mediaDetailRepository.requestByUnique(parentUnique);
+			parentMediaType = data?.mediaType.unique ?? null;
+		}
+
+		// Getting all media types allowed in our current position based on parent's media type.
+
+		const { data: allAllowedMediaTypes } = await this.#mediaTypeStructure.requestAllowedChildrenOf(parentMediaType);
 		if (!allAllowedMediaTypes?.items.length) return [];
 
 		const allowedByParent = allAllowedMediaTypes.items;