fix: Audio block media selection handling to validate allowed file types

dhananjaykuber · Jan 22, 2025 · 1d8b322 · 1d8b322
1 parent 5b7f7ec
commit 1d8b322
Showing 1 changed file with 34 additions and 1 deletion.
diff --git a/packages/block-editor/src/components/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js
@@ -160,6 +160,39 @@ export function MediaPlaceholder( {
 		setSrc( value?.src ?? '' );
 	}, [ value?.src ] );
 
+	const handleMediaSelection = ( selectedMedia ) => {
+		if ( Array.isArray( selectedMedia ) ) {
+			const validMedia = selectedMedia.filter( ( media ) => {
+				const mediaType = media.type?.split( '/' )[ 0 ];
+				return (
+					allowedTypes?.includes( mediaType ) ||
+					allowedTypes?.includes( media.type )
+				);
+			} );
+
+			if ( validMedia.length !== selectedMedia.length ) {
+				onError( __( 'Some files are not allowed.' ) );
+
+				if ( validMedia.length === 0 ) {
+					return;
+				}
+			}
+
+			onSelect( validMedia );
+		} else {
+			const mediaType = selectedMedia.type?.split( '/' )[ 0 ];
+			if (
+				! allowedTypes?.includes( mediaType ) ||
+				! allowedTypes?.includes( selectedMedia.type )
+			) {
+				onError( __( 'File type not allowed.' ) );
+				return;
+			}
+
+			onSelect( selectedMedia );
+		}
+	};
+
 	const onlyAllowsImages = () => {
 		if ( ! allowedTypes || allowedTypes.length === 0 ) {
 			return false;
@@ -451,7 +484,7 @@ export function MediaPlaceholder( {
 				addToGallery={ addToGallery }
 				gallery={ multiple && onlyAllowsImages() }
 				multiple={ multiple }
-				onSelect={ onSelect }
+				onSelect={ handleMediaSelection }
 				allowedTypes={ allowedTypes }
 				mode="browse"
 				value={