MediaReplaceFlow: improve error customization (#22995)

* media-replace-flow: add filter

* media-replace-placeholder: add onFilesUpload prop

* media-replace-flow: doc improvement

packages/block-editor/src/components/media-replace-flow/README.md

@@ -38,6 +38,10 @@ Comma delimited list of MIME types accepted for upload.
 - Type: `string`
 - Required: Yes
 
+### onFilesUpload
+
+Callback called before to start to upload the files. It receives an array with the files to upload before to the final process. 
+
 ### onSelect
 
 Callback used when media is replaced from the Media Library or when a new media is uploaded. It is called with one argument `media` which is an object with all the media details.
@@ -71,4 +75,4 @@ Creates a media replace notice.
 Removes a media replace notice.
 
 - Type: `func`
-- Required: No
+- Required: No

packages/block-editor/src/components/media-replace-flow/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { uniqueId } from 'lodash';
+import { uniqueId, noop } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -16,6 +16,7 @@ import {
 	ToolbarGroup,
 	ToolbarButton,
 	Dropdown,
+	withFilters,
 } from '@wordpress/components';
 import { withDispatch, useSelect } from '@wordpress/data';
 import { DOWN } from '@wordpress/keycodes';
@@ -36,6 +37,7 @@ const MediaReplaceFlow = ( {
 	accept,
 	onSelect,
 	onSelectURL,
+	onFilesUpload = noop,
 	name = __( 'Replace' ),
 	createNotice,
 	removeNotice,
@@ -86,6 +88,7 @@ const MediaReplaceFlow = ( {
 
 	const uploadFiles = ( event ) => {
 		const files = event.target.files;
+		onFilesUpload( files );
 		const setMedia = ( [ media ] ) => {
 			selectMedia( media );
 		};
@@ -199,4 +202,5 @@ export default compose( [
 			removeNotice,
 		};
 	} ),
+	withFilters( 'editor.MediaReplaceFlow' ),
 ] )( MediaReplaceFlow );