Add new private upload-media package

bin/check-licenses.mjs

@@ -10,7 +10,7 @@ import { spawnSync } from 'node:child_process';
  */
 import { checkDepsInTree } from '../packages/scripts/utils/license.js';
 
-const ignored = [ '@ampproject/remapping' ];
+const ignored = [ '@ampproject/remapping', 'webpack' ];
 
 /*
  * `wp-scripts check-licenses` uses prod and dev dependencies of the package to scan for dependencies. With npm workspaces, workspace packages (the @wordpress/* packages) are not listed in the main package json and this approach does not work.

packages/block-editor/src/components/provider/index.js

@@ -2,8 +2,13 @@
  * WordPress dependencies
  */
 import { useDispatch } from '@wordpress/data';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useMemo } from '@wordpress/element';
 import { SlotFillProvider } from '@wordpress/components';
+//eslint-disable-next-line import/no-extraneous-dependencies -- Experimental package, not published.
+import {
+	MediaUploadProvider,
+	store as uploadStore,
+} from '@wordpress/upload-media';
 
 /**
  * Internal dependencies
@@ -14,12 +19,109 @@ import { store as blockEditorStore } from '../../store';
 import { BlockRefsProvider } from './block-refs-provider';
 import { unlock } from '../../lock-unlock';
 import KeyboardShortcuts from '../keyboard-shortcuts';
+import useMediaUploadSettings from './use-media-upload-settings';
 
 /** @typedef {import('@wordpress/data').WPDataRegistry} WPDataRegistry */
 
+const noop = () => {};
+
+/**
+ * Upload a media file when the file upload button is activated
+ * or when adding a file to the editor via drag & drop.
+ *
+ * This function is intended to eventually live
+ * in the `@wordpress/block-editor` package, allowing
+ * to perform the client-side file processing before eventually
+ * uploading the media to WordPress.
+ *
+ * @param {WPDataRegistry} registry
+ * @param {Function}       validateMimeType
+ * @param {Function}       validateFileSize
+ * @param {Object}         $3                Parameters object passed to the function.
+ * @param {Array}          $3.allowedTypes   Array with the types of media that can be uploaded, if unset all types are allowed.
+ * @param {Object}         $3.additionalData Additional data to include in the request.
+ * @param {Array<File>}    $3.filesList      List of files.
+ * @param {Function}       $3.onError        Function called when an error happens.
+ * @param {Function}       $3.onFileChange   Function called each time a file or a temporary representation of the file is available.
+ * @param {Function}       $3.onSuccess      Function called once a file has completely finished uploading, including thumbnails.
+ * @param {Function}       $3.onBatchSuccess Function called once all files in a group have completely finished uploading, including thumbnails.
+ */
+function mediaUpload(
+	registry,
+	validateMimeType,
+	validateFileSize,
+	{
+		allowedTypes,
+		additionalData = {},
+		filesList,
+		onError = noop,
+		onFileChange,
+		onSuccess,
+		onBatchSuccess,
+	}
+) {
+	const validFiles = [];
+
+	for ( const mediaFile of filesList ) {
+		/*
+		 Check if the caller (e.g. a block) supports this mime type.
+		 Special case for file types such as HEIC which will be converted before upload anyway.
+		 Another check will be done before upload.
+		*/
+		try {
+			validateMimeType( mediaFile, allowedTypes );
+		} catch ( error ) {
+			onError( error );
+			continue;
+		}
+
+		try {
+			validateFileSize( mediaFile );
+		} catch ( error ) {
+			onError( error );
+			continue;
+		}
+
+		validFiles.push( mediaFile );
+	}
+
+	void registry.dispatch( uploadStore ).addItems( {
+		files: validFiles,
+		onChange: onFileChange,
+		onSuccess,
+		onBatchSuccess,
+		onError: ( { message } ) => onError( message ),
+		additionalData,
+	} );
+}
+
 export const ExperimentalBlockEditorProvider = withRegistryProvider(
 	( props ) => {
-		const { children, settings, stripExperimentalSettings = false } = props;
+		const {
+			settings: _settings,
+			registry,
+			stripExperimentalSettings = false,
+		} = props;
+
+		const mediaUploadSettings = useMediaUploadSettings( _settings );
+
+		let settings = _settings;
+
+		if ( window.__experimentalMediaProcessing && _settings.mediaUpload ) {
+			// Create a new variable so that the original props.settings.mediaUpload is not modified.
+			settings = useMemo(
+				() => ( {
+					..._settings,
+					mediaUpload: mediaUpload.bind(
+						null,
+						registry,
+						_settings.validateMimeType || noop,
+						_settings.validateFileSize || noop
+					),
+				} ),
+				[ _settings, registry ]
+			);
+		}
 
 		const { __experimentalUpdateSettings } = unlock(
 			useDispatch( blockEditorStore )
@@ -44,12 +146,25 @@ export const ExperimentalBlockEditorProvider = withRegistryProvider(
 		// Syncs the entity provider with changes in the block-editor store.
 		useBlockSync( props );
 
-		return (
+		const children = (
 			<SlotFillProvider passthrough>
 				{ ! settings?.isPreviewMode && <KeyboardShortcuts.Register /> }
-				<BlockRefsProvider>{ children }</BlockRefsProvider>
+				<BlockRefsProvider>{ props.children }</BlockRefsProvider>
 			</SlotFillProvider>
 		);
+
+		if ( window.__experimentalMediaProcessing ) {
+			return (
+				<MediaUploadProvider
+					settings={ mediaUploadSettings }
+					useSubRegistry={ false }
+				>
+					{ children }
+				</MediaUploadProvider>
+			);
+		}
+
+		return children;
 	}
 );
 

packages/block-editor/src/components/provider/use-media-upload-settings.js

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+
+/**
+ * React hook used to compute the media upload settings to use in the post editor.
+ *
+ * @param {Object} settings Media upload settings prop.
+ *
+ * @return {Object} Media upload settings.
+ */
+function useMediaUploadSettings( settings ) {
+	return useMemo(
+		() => ( {
+			mediaUpload: settings.mediaUpload,
+			mediaSideload: settings.__experimentalMediaSideload,
+		} ),
+		[ settings ]
+	);
+}
+
+export default useMediaUploadSettings;

packages/block-editor/src/store/private-actions.js

@@ -26,6 +26,9 @@ const castArray = ( maybeArray ) =>
 const privateSettings = [
 	'inserterMediaCategories',
 	'blockInspectorAnimation',
+	'mediaSideload',
+	'validateFileSize',
+	'validateMimeType',
 ];
 
 /**

packages/editor/README.md

@@ -499,6 +499,7 @@ _Parameters_
 -   _$0.maxUploadFileSize_ `?number`: Maximum upload size in bytes allowed for the site.
 -   _$0.onError_ `Function`: Function called when an error happens.
 -   _$0.onFileChange_ `Function`: Function called each time a file or a temporary representation of the file is available.
+-   _$0.onSuccess_ `Function`: Function called after the final representation of the file is available.
 
 ### MediaUploadCheck
 

packages/editor/src/components/provider/use-block-editor-settings.js

@@ -23,6 +23,9 @@ import {
  */
 import inserterMediaCategories from '../media-categories';
 import { mediaUpload } from '../../utils';
+import { default as mediaSideload } from '../../utils/media-sideload';
+import { validateFileSize } from '../../utils/validate-file-size';
+import { validateMimeType } from '../../utils/validate-mime-type';
 import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 import { useGlobalStylesContext } from '../global-styles-provider';
@@ -290,6 +293,9 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 			isDistractionFree,
 			keepCaretInsideBlock,
 			mediaUpload: hasUploadPermissions ? mediaUpload : undefined,
+			mediaSideload: hasUploadPermissions ? mediaSideload : undefined,
+			validateFileSize,
+			validateMimeType,
 			__experimentalBlockPatterns: blockPatterns,
 			[ selectBlockPatternsKey ]: ( select ) => {
 				const { hasFinishedResolution, getBlockPatternsForPostType } =

packages/editor/src/utils/media-sideload/index.js

@@ -0,0 +1,13 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis } from '@wordpress/media-utils';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { sideloadMedia: mediaSideload } = unlock( privateApis );
+
+export default mediaSideload;

packages/editor/src/utils/media-sideload/index.native.js

@@ -0,0 +1 @@
+export default function mediaSideload() {}

packages/editor/src/utils/media-upload/index.js

@@ -27,6 +27,7 @@ const noop = () => {};
  * @param {?number}  $0.maxUploadFileSize Maximum upload size in bytes allowed for the site.
  * @param {Function} $0.onError           Function called when an error happens.
  * @param {Function} $0.onFileChange      Function called each time a file or a temporary representation of the file is available.
+ * @param {Function} $0.onSuccess         Function called after the final representation of the file is available.
  */
 export default function mediaUpload( {
 	additionalData = {},
@@ -35,6 +36,7 @@ export default function mediaUpload( {
 	maxUploadFileSize,
 	onError = noop,
 	onFileChange,
+	onSuccess,
 } ) {
 	const { getCurrentPost, getEditorSettings } = select( editorStore );
 	const {
@@ -77,8 +79,9 @@ export default function mediaUpload( {
 			} else {
 				clearSaveLock();
 			}
-			onFileChange( file );
+			onFileChange?.( file );
 		},
+		onSuccess,
 		additionalData: {
 			...postData,
 			...additionalData,

packages/editor/src/utils/validate-file-size/index.js

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { select } from '@wordpress/data';
+import { validateFileSize as originalValidateFileSize } from '@wordpress/media-utils';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+
+/**
+ * Verifies whether the file is within the file upload size limits for the site.
+ *
+ * @param {File} file File object.
+ */
+export function validateFileSize( file ) {
+	const { getEditorSettings } = select( editorStore );
+	return originalValidateFileSize(
+		file,
+		getEditorSettings().maxUploadFileSize
+	);
+}

packages/editor/src/utils/validate-file-size/index.native.js

@@ -0,0 +1 @@
+export function validateFileSize() {}