V15: Show upload progress for dropped files in the Media Library

src/Umbraco.Web.UI.Client/src/mocks/data/data-type/data-type.data.ts

@@ -722,7 +722,70 @@ export const data: Array<UmbMockDataTypeModel> = [
 		values: [
 			{
 				alias: 'fileExtensions',
-				value: ['jpg', 'jpeg', 'png', 'pdf'],
+				value: ['jpg', 'jpeg', 'png', 'svg'],
+			},
+			{
+				alias: 'multiple',
+				value: true,
+			},
+		],
+	},
+	{
+		name: 'Upload Field (Files)',
+		id: 'dt-uploadFieldFiles',
+		parent: null,
+		editorAlias: 'Umbraco.UploadField',
+		editorUiAlias: 'Umb.PropertyEditorUi.UploadField',
+		hasChildren: false,
+		isFolder: false,
+		isDeletable: true,
+		canIgnoreStartNodes: false,
+		values: [
+			{
+				alias: 'fileExtensions',
+				value: ['pdf', 'iso'],
+			},
+			{
+				alias: 'multiple',
+				value: true,
+			},
+		],
+	},
+	{
+		name: 'Upload Field (Movies)',
+		id: 'dt-uploadFieldMovies',
+		parent: null,
+		editorAlias: 'Umbraco.UploadField',
+		editorUiAlias: 'Umb.PropertyEditorUi.UploadField',
+		hasChildren: false,
+		isFolder: false,
+		isDeletable: true,
+		canIgnoreStartNodes: false,
+		values: [
+			{
+				alias: 'fileExtensions',
+				value: ['mp4', 'mov'],
+			},
+			{
+				alias: 'multiple',
+				value: true,
+			},
+		],
+	},
+	{
+		name: 'Upload Field (Vector)',
+		id: 'dt-uploadFieldVector',
+		parent: null,
+		editorAlias: 'Umbraco.UploadField',
+		editorUiAlias: 'Umb.PropertyEditorUi.UploadField',
+		hasChildren: false,
+		isFolder: false,
+		isDeletable: true,
+		canIgnoreStartNodes: false,
+		values: [
+			{
+				alias: 'fileExtensions',
+				value: ['svg'],
 			},
 			{
 				alias: 'multiple',
@@ -912,8 +975,16 @@ export const data: Array<UmbMockDataTypeModel> = [
 			{
 				alias: 'layouts',
 				value: [
-					{ icon: 'icon-grid', isSystem: true, name: 'Grid', path: '', selected: true },
-					{ icon: 'icon-list', isSystem: true, name: 'Table', path: '', selected: true },
+					{
+						icon: 'icon-grid',
+						name: 'Media Grid Collection View',
+						collectionView: 'Umb.CollectionView.Media.Grid',
+					},
+					{
+						icon: 'icon-list',
+						name: 'Media Table Collection View',
+						collectionView: 'Umb.CollectionView.Media.Table',
+					},
 				],
 			},
 			{ alias: 'icon', value: 'icon-layers' },

src/Umbraco.Web.UI.Client/src/mocks/data/media-type/media-type.data.ts

@@ -15,7 +15,7 @@ export type UmbMockMediaTypeUnionModel =
 
 export const data: Array<UmbMockMediaTypeModel> = [
 	{
-		name: 'Media Type 1',
+		name: 'Image',
 		id: 'media-type-1-id',
 		parent: null,
 		description: 'Media type 1 description',
@@ -105,7 +105,7 @@ export const data: Array<UmbMockMediaTypeModel> = [
 		aliasCanBeChanged: false,
 	},
 	{
-		name: 'Media Type 2',
+		name: 'Audio',
 		id: 'media-type-2-id',
 		parent: null,
 		description: 'Media type 2 description',
@@ -118,7 +118,7 @@ export const data: Array<UmbMockMediaTypeModel> = [
 				alias: 'umbracoFile',
 				name: 'File',
 				description: '',
-				dataType: { id: 'dt-uploadField' },
+				dataType: { id: 'dt-uploadFieldFiles' },
 				variesByCulture: false,
 				variesBySegment: false,
 				sortOrder: 0,
@@ -155,7 +155,7 @@ export const data: Array<UmbMockMediaTypeModel> = [
 		aliasCanBeChanged: false,
 	},
 	{
-		name: 'Media Type 3',
+		name: 'Vector Graphics',
 		id: 'media-type-3-id',
 		parent: null,
 		description: 'Media type 3 description',
@@ -168,7 +168,7 @@ export const data: Array<UmbMockMediaTypeModel> = [
 				alias: 'umbracoFile',
 				name: 'File',
 				description: '',
-				dataType: { id: 'dt-uploadField' },
+				dataType: { id: 'dt-uploadFieldVector' },
 				variesByCulture: false,
 				variesBySegment: false,
 				sortOrder: 0,
@@ -205,7 +205,7 @@ export const data: Array<UmbMockMediaTypeModel> = [
 		aliasCanBeChanged: false,
 	},
 	{
-		name: 'Media Type 4',
+		name: 'Movie',
 		id: 'media-type-4-id',
 		parent: null,
 		description: 'Media type 4 description',
@@ -218,7 +218,7 @@ export const data: Array<UmbMockMediaTypeModel> = [
 				alias: 'umbracoFile',
 				name: 'File',
 				description: '',
-				dataType: { id: 'dt-uploadField' },
+				dataType: { id: 'dt-uploadFieldMovies' },
 				variesByCulture: false,
 				variesBySegment: false,
 				sortOrder: 0,
@@ -268,7 +268,7 @@ export const data: Array<UmbMockMediaTypeModel> = [
 				alias: 'umbracoFile',
 				name: 'File',
 				description: '',
-				dataType: { id: 'dt-uploadField' },
+				dataType: { id: 'dt-uploadFieldFiles' },
 				variesByCulture: false,
 				variesBySegment: false,
 				sortOrder: 0,

src/Umbraco.Web.UI.Client/src/mocks/data/media-type/media-type.db.ts

@@ -52,7 +52,7 @@ class UmbMediaTypeMockDB extends UmbEntityMockDbBase<UmbMockMediaTypeModel> {
 		const allowedTypes = this.data.filter((field) => {
 			const allProperties = field.properties.flat();
 
-			const fileUploadType = allProperties.find((prop) => prop.alias === 'umbracoFile');
+			const fileUploadType = allProperties.find((prop) => prop.alias === 'umbracoFile' || prop.alias === 'mediaPicker');
 			if (!fileUploadType) return false;
 
 			const dataType = umbDataTypeMockDb.read(fileUploadType.dataType.id);

src/Umbraco.Web.UI.Client/src/mocks/data/media/media.data.ts

@@ -16,26 +16,38 @@ export const data: Array<UmbMockMediaModel> = [
 		isTrashed: false,
 		mediaType: {
 			id: 'media-type-1-id',
-			icon: 'icon-bug',
+			icon: 'icon-picture',
 		},
 		values: [
+			{
+				editorAlias: 'Umbraco.UploadField',
+				alias: 'mediaPicker',
+				value: {
+					src: '/umbraco/backoffice/assets/installer-illustration.svg',
+				},
+			},
 			{
 				editorAlias: 'Umbraco.TextBox',
-				alias: 'myMediaHeadline',
+				alias: 'mediaType1Property1',
 				value: 'The daily life at Umbraco HQ',
 			},
 		],
 		variants: [
 			{
 				publishDate: '2023-02-06T15:31:51.354764',
-				culture: 'en-us',
+				culture: null,
 				segment: null,
 				name: 'Flipped Car',
 				createDate: '2023-02-06T15:31:46.876902',
 				updateDate: '2023-02-06T15:31:51.354764',
 			},
 		],
-		urls: [],
+		urls: [
+			{
+				culture: null,
+				url: '/umbraco/backoffice/assets/installer-illustration.svg',
+			},
+		],
 	},
 	{
 		hasChildren: false,
@@ -51,14 +63,14 @@ export const data: Array<UmbMockMediaModel> = [
 		values: [
 			{
 				editorAlias: 'Umbraco.TextBox',
-				alias: 'myMediaDescription',
+				alias: 'mediaType1Property1',
 				value: 'Every day, a rabbit in a military costume greets me at the front door',
 			},
 		],
 		variants: [
 			{
 				publishDate: '2023-02-06T15:31:51.354764',
-				culture: 'en-us',
+				culture: null,
 				segment: null,
 				name: 'Umbracoffee',
 				createDate: '2023-02-06T15:31:46.876902',
@@ -83,7 +95,7 @@ export const data: Array<UmbMockMediaModel> = [
 		variants: [
 			{
 				publishDate: '2023-02-06T15:31:51.354764',
-				culture: 'en-us',
+				culture: null,
 				segment: null,
 				name: 'People',
 				createDate: '2023-02-06T15:31:46.876902',
@@ -108,7 +120,7 @@ export const data: Array<UmbMockMediaModel> = [
 		variants: [
 			{
 				publishDate: '2023-02-06T15:31:51.354764',
-				culture: 'en-us',
+				culture: null,
 				segment: null,
 				name: 'John Smith',
 				createDate: '2023-02-06T15:31:46.876902',
@@ -131,14 +143,14 @@ export const data: Array<UmbMockMediaModel> = [
 		values: [
 			{
 				editorAlias: 'Umbraco.TextBox',
-				alias: 'myMediaDescription',
+				alias: 'mediaType1Property1',
 				value: 'Every day, a rabbit in a military costume greets me at the front door',
 			},
 		],
 		variants: [
 			{
 				publishDate: '2023-02-06T15:31:51.354764',
-				culture: 'en-us',
+				culture: null,
 				segment: null,
 				name: 'Jane Doe',
 				createDate: '2023-02-06T15:31:46.876902',
@@ -161,14 +173,14 @@ export const data: Array<UmbMockMediaModel> = [
 		values: [
 			{
 				editorAlias: 'Umbraco.TextBox',
-				alias: 'myMediaDescription',
+				alias: 'mediaType1Property1',
 				value: 'Every day, a rabbit in a military costume greets me at the front door',
 			},
 		],
 		variants: [
 			{
 				publishDate: '2023-02-06T15:31:51.354764',
-				culture: 'en-us',
+				culture: null,
 				segment: null,
 				name: 'John Doe',
 				createDate: '2023-02-06T15:31:46.876902',
@@ -191,14 +203,14 @@ export const data: Array<UmbMockMediaModel> = [
 		values: [
 			{
 				editorAlias: 'Umbraco.TextBox',
-				alias: 'myMediaDescription',
+				alias: 'mediaType1Property1',
 				value: 'Every day, a rabbit in a military costume greets me at the front door',
 			},
 		],
 		variants: [
 			{
 				publishDate: '2023-02-06T15:31:51.354764',
-				culture: 'en-us',
+				culture: null,
 				segment: null,
 				name: 'A very nice hat',
 				createDate: '2023-02-06T15:31:46.876902',
@@ -221,14 +233,14 @@ export const data: Array<UmbMockMediaModel> = [
 		values: [
 			{
 				editorAlias: 'Umbraco.TextBox',
-				alias: 'myMediaDescription',
+				alias: 'mediaType1Property1',
 				value: 'Every day, a rabbit in a military costume greets me at the front door',
 			},
 		],
 		variants: [
 			{
 				publishDate: '2023-02-06T15:31:51.354764',
-				culture: 'en-us',
+				culture: null,
 				segment: null,
 				name: 'Fancy old chair',
 				createDate: '2023-02-06T15:31:46.876902',

src/Umbraco.Web.UI.Client/src/mocks/handlers/media/detail.handlers.ts

@@ -8,6 +8,7 @@ import type {
 	UpdateMediaRequestModel,
 } from '@umbraco-cms/backoffice/external/backend-api';
 import { umbracoPath } from '@umbraco-cms/backoffice/utils';
+import type { UmbMediaDetailModel } from '@umbraco-cms/backoffice/media';
 
 export const detailHandlers = [
 	rest.post(umbracoPath(`${UMB_SLUG}`), async (req, res, ctx) => {
@@ -44,6 +45,23 @@ export const detailHandlers = [
 		return res(ctx.status(200), ctx.json(response));
 	}),
 
+	rest.put<UmbMediaDetailModel>(umbracoPath(`${UMB_SLUG}/:id/validate`), async (req, res, ctx) => {
+		const id = req.params.id as string;
+		if (!id) return res(ctx.status(400));
+		const model = await req.json<UmbMediaDetailModel>();
+		if (!model) return res(ctx.status(400));
+
+		const hasMediaPickerOrFileUploadValue = model.values.some((v) => {
+			return v.editorAlias === 'Umbraco.UploadField' && v.value;
+		});
+
+		if (!hasMediaPickerOrFileUploadValue) {
+			return res(ctx.status(400, 'No media picker or file upload value found'));
+		}
+
+		return res(ctx.status(200));
+	}),
+
 	rest.put(umbracoPath(`${UMB_SLUG}/:id`), async (req, res, ctx) => {
 		const id = req.params.id as string;
 		if (!id) return res(ctx.status(400));

src/Umbraco.Web.UI.Client/src/mocks/handlers/media/imaging.handlers.ts

@@ -0,0 +1,24 @@
+const { rest } = window.MockServiceWorker;
+import { umbMediaMockDb } from '../../data/media/media.db.js';
+import type { GetImagingResizeUrlsResponse } from '@umbraco-cms/backoffice/external/backend-api';
+import { umbracoPath } from '@umbraco-cms/backoffice/utils';
+
+export const imagingHandlers = [
+	rest.get(umbracoPath('/imaging/resize/urls'), (req, res, ctx) => {
+		const ids = req.url.searchParams.getAll('id');
+		if (!ids) return res(ctx.status(404));
+
+		const media = umbMediaMockDb.getAll().filter((item) => ids.includes(item.id));
+
+		const response: GetImagingResizeUrlsResponse = media.map((item) => ({
+			id: item.id,
+			urlInfos: item.urls,
+		}));
+
+		return res(
+			// Respond with a 200 status code
+			ctx.status(200),
+			ctx.json(response),
+		);
+	}),
+];

src/Umbraco.Web.UI.Client/src/mocks/handlers/media/index.ts

@@ -3,11 +3,13 @@ import { treeHandlers } from './tree.handlers.js';
 import { itemHandlers } from './item.handlers.js';
 import { detailHandlers } from './detail.handlers.js';
 import { collectionHandlers } from './collection.handlers.js';
+import { imagingHandlers } from './imaging.handlers.js';
 
 export const handlers = [
 	...recycleBinHandlers,
 	...treeHandlers,
 	...itemHandlers,
 	...detailHandlers,
 	...collectionHandlers,
+	...imagingHandlers,
 ];