Check allowed mime types before uploading media

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

@@ -8,7 +8,6 @@ import { noop } from 'lodash';
  */
 import { select } from '@wordpress/data';
 import { mediaUpload } from '@wordpress/utils';
-import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Upload a media file when the file upload button is activated.
@@ -31,22 +30,6 @@ export default function editorMediaUpload( {
 } ) {
 	const postId = select( 'core/editor' ).getCurrentPostId();
 
-	const errorHandler = ( { file, sizeAboveLimit, generalError } ) => {
-		let errorMsg;
-		if ( sizeAboveLimit ) {
-			errorMsg = sprintf(
-				__( '%s exceeds the maximum upload size for this site.' ),
-				file.name
-			);
-		} else if ( generalError ) {
-			errorMsg = sprintf(
-				__( 'Error while uploading file %s to the media library.' ),
-				file.name
-			);
-		}
-		onError( errorMsg );
-	};
-
 	mediaUpload( {
 		allowedType,
 		filesList,
@@ -55,6 +38,6 @@ export default function editorMediaUpload( {
 			post: postId,
 		},
 		maxUploadFileSize,
-		onError: errorHandler,
+		onError: ( { message } ) => onError( message ),
 	} );
 }

lib/client-assets.php

@@ -980,7 +980,8 @@ function gutenberg_editor_scripts_and_styles( $hook ) {
 	}
 	// Initialize media settings.
 	wp_add_inline_script( 'wp-editor', 'window._wpMediaSettings = ' . wp_json_encode( array(
-		'maxUploadSize' => $max_upload_size,
+		'maxUploadSize'    => $max_upload_size,
+		'allowedMimeTypes' => get_allowed_mime_types(),
 	) ), 'before' );
 
 	// Prepare Jed locale data.

utils/mediaupload.js

@@ -1,7 +1,12 @@
 /**
  * External Dependencies
  */
-import { compact, forEach, get, noop, startsWith } from 'lodash';
+import { compact, forEach, get, includes, noop, startsWith } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '../node_modules/@wordpress/i18n';
 
 /**
  *	Media Upload is used by audio, image, gallery and video blocks to handle uploading a media file
@@ -33,15 +38,41 @@ export function mediaUpload( {
 		filesSet[ idx ] = value;
 		onFileChange( compact( filesSet ) );
 	};
+
+	// Allowed type specified by consumer
 	const isAllowedType = ( fileType ) => startsWith( fileType, `${ allowedType }/` );
+
+	// Allowed types for the current WP_User
+	const allowedMimeTypesForUser = get( window, [ '_wpMediaSettings', 'allowedMimeTypes' ] );
+	const isAllowedMimeTypeForUser = ( fileType ) => {
+		return includes( allowedMimeTypesForUser, fileType );
+	};
+
 	files.forEach( ( mediaFile, idx ) => {
 		if ( ! isAllowedType( mediaFile.type ) ) {
 			return;
 		}
 
+		// verify if user is allowed to upload this mime type
+		if ( allowedMimeTypesForUser && ! isAllowedMimeTypeForUser( mediaFile.type ) ) {
+			onError( {
+				code: 'MIME_TYPE_NOT_ALLOWED_FOR_USER',
+				message: __( 'Sorry, this file type is not permitted for security reasons.' ),
+				file: mediaFile,
+			} );
+			return;
+		}
+
 		// verify if file is greater than the maximum file upload size allowed for the site.
 		if ( maxUploadFileSize && mediaFile.size > maxUploadFileSize ) {
-			onError( { sizeAboveLimit: true, file: mediaFile } );
+			onError( {
+				code: 'SIZE_ABOVE_LIMIT',
+				message: sprintf(
+					__( '%s exceeds the maximum upload size for this site.' ),
+					mediaFile.name
+				),
+				file: mediaFile,
+			} );
 			return;
 		}
 
@@ -66,7 +97,14 @@ export function mediaUpload( {
 			() => {
 				// Reset to empty on failure.
 				setAndUpdateFiles( idx, null );
-				onError( { generalError: true, file: mediaFile } );
+				onError( {
+					code: 'GENERAL',
+					message: sprintf(
+						__( 'Error while uploading file %s to the media library.' ),
+						mediaFile.name
+					),
+					file: mediaFile,
+				} );
 			}
 		);
 	} );

utils/test/mediaupload.js

@@ -45,7 +45,7 @@ describe( 'mediaUpload', () => {
 		expect( console.error ).not.toHaveBeenCalled();
 	} );
 
-	it( 'should call error handler with the correct message if file size is greater than the maximum', () => {
+	it( 'should call error handler with the correct error object if file size is greater than the maximum', () => {
 		const onError = jest.fn();
 		mediaUpload( {
 			allowedType: 'image',
@@ -54,6 +54,28 @@ describe( 'mediaUpload', () => {
 			maxUploadFileSize: 512,
 			onError,
 		} );
-		expect( onError.mock.calls ).toEqual( [ [ { sizeAboveLimit: true, file: validMediaObj } ] ] );
+		expect( onError ).toBeCalledWith( {
+			code: 'SIZE_ABOVE_LIMIT',
+			file: validMediaObj,
+			message: `${ validMediaObj.name } exceeds the maximum upload size for this site.`,
+		} );
+	} );
+
+	it( 'should call error handler with the correct error object if file type is not allowed for user', () => {
+		const onError = jest.fn();
+		global._wpMediaSettings = {
+			allowedMimeTypes: { aac: 'audio/aac' },
+		};
+		mediaUpload( {
+			allowedType: 'image',
+			filesList: [ validMediaObj ],
+			onFileChange,
+			onError,
+		} );
+		expect( onError ).toBeCalledWith( {
+			code: 'MIME_TYPE_NOT_ALLOWED_FOR_USER',
+			file: validMediaObj,
+			message: 'Sorry, this file type is not permitted for security reasons.',
+		} );
 	} );
 } );