Product Editor: Show error notice when error occurs uploading an image via drop on Images (#48396)

* Export MediaUploaderErrorCallback

* Show notice when error uploading image

* Changelog

* Changelog

* Wrap error message in __ for translation

* Fix sprintf/__ usage to avoid lint errors

packages/js/components/changelog/fix-product-editor-images-drop-error

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Export MediaUploaderErrorCallback type.

packages/js/components/src/index.ts

@@ -23,7 +23,7 @@ export { ImageGallery, ImageGalleryItem } from './image-gallery';
 export { default as ImageUpload } from './image-upload';
 export { Link } from './link';
 export { default as List } from './list';
-export { MediaUploader } from './media-uploader';
+export { MediaUploader, MediaUploaderErrorCallback } from './media-uploader';
 export { default as MenuItem } from './ellipsis-menu/menu-item';
 export { default as MenuTitle } from './ellipsis-menu/menu-title';
 export { default as OrderStatus } from './order-status';

packages/js/components/src/media-uploader/media-uploader.tsx

@@ -9,11 +9,17 @@ import {
 	MediaUpload,
 	uploadMedia as wpUploadMedia,
 	UploadMediaOptions,
-	UploadMediaErrorCode,
 } from '@wordpress/media-utils';
 
+/**
+ * Internal dependencies
+ */
+import { ErrorType } from './types';
+
 const DEFAULT_ALLOWED_MEDIA_TYPES = [ 'image' ];
 
+export type MediaUploaderErrorCallback = ( error: ErrorType ) => void;
+
 type MediaUploaderProps = {
 	allowedMediaTypes?: string[];
 	buttonText?: string;
@@ -30,11 +36,7 @@ type MediaUploaderProps = {
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		value: ( { id: number } & { [ k: string ]: any } ) | MediaItem[]
 	) => void;
-	onError?: ( error: {
-		code: UploadMediaErrorCode;
-		message: string;
-		file: File;
-	} ) => void;
+	onError?: MediaUploaderErrorCallback;
 	onMediaGalleryOpen?: () => void;
 	onUpload?: ( files: MediaItem | MediaItem[] ) => void;
 	onFileUploadChange?: ( files: MediaItem | MediaItem[] ) => void;

packages/js/components/src/media-uploader/types.ts

@@ -10,4 +10,4 @@ export type ErrorType = {
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type File = { id: number } & { [ k: string ]: any };
+export type File = { id?: number } & { [ k: string ]: any };

packages/js/product-editor/changelog/fix-product-editor-images-drop-error

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Show error notice when unable to upload an image.

packages/js/product-editor/src/blocks/product-fields/images/edit.tsx

@@ -2,9 +2,10 @@
  * External dependencies
  */
 import { DragEvent } from 'react';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { BlockAttributes } from '@wordpress/blocks';
 import { DropZone } from '@wordpress/components';
+import { useDispatch } from '@wordpress/data';
 import classnames from 'classnames';
 import { createElement, useState } from '@wordpress/element';
 import { Icon, trash } from '@wordpress/icons';
@@ -12,6 +13,7 @@ import { MediaItem } from '@wordpress/media-utils';
 import { useWooBlockProps } from '@woocommerce/block-templates';
 import {
 	MediaUploader,
+	MediaUploaderErrorCallback,
 	ImageGallery,
 	ImageGalleryItem,
 } from '@woocommerce/components';
@@ -63,6 +65,8 @@ export function ImageBlockEdit( {
 		} ),
 	} );
 
+	const { createErrorNotice } = useDispatch( 'core/notices' );
+
 	function orderImages( newOrder: JSX.Element[] ) {
 		if ( Array.isArray( propertyValue ) ) {
 			const memoIds = propertyValue.reduce< Record< string, Image > >(
@@ -186,6 +190,19 @@ export function ImageBlockEdit( {
 		}
 	}
 
+	const handleMediaUploaderError: MediaUploaderErrorCallback = function (
+		error
+	) {
+		createErrorNotice(
+			sprintf(
+				/* translators: %1$s is a line break, %2$s is the detailed error message */
+				__( 'Error uploading image:%1$s%2$s', 'woocommerce' ),
+				'\n',
+				error.message
+			)
+		);
+	};
+
 	const isImageGalleryVisible =
 		propertyValue !== null &&
 		( ! Array.isArray( propertyValue ) || propertyValue.length > 0 );
@@ -219,7 +236,7 @@ export function ImageBlockEdit( {
 										: propertyValue?.id ?? undefined
 								}
 								multipleSelect={ multiple ? 'add' : false }
-								onError={ () => null }
+								onError={ handleMediaUploaderError }
 								onFileUploadChange={ uploadHandler(
 									'product_images_add_via_file_upload_area'
 								) }