Show a warning when a disallowed filetype is dropped on a MediaUpload

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

@@ -77,30 +77,53 @@ export function mediaUpload( {
 		return includes( allowedMimeTypesForUser, fileType );
 	};
 
-	files.forEach( ( mediaFile, idx ) => {
-		if ( ! isAllowedType( mediaFile.type ) ) {
-			return;
-		}
+	// Build the error message including the filename
+	const triggerError = ( error ) => {
+		error.message = [
+			<strong key="filename">{ error.file.name }</strong>,
+			': ',
+			error.message,
+		];
 
+		onError( error );
+	};
+
+	files.forEach( ( mediaFile, idx ) => {
 		// verify if user is allowed to upload this mime type
 		if ( allowedMimeTypesForUser && ! isAllowedMimeTypeForUser( mediaFile.type ) ) {
-			onError( {
+			triggerError( {
 				code: 'MIME_TYPE_NOT_ALLOWED_FOR_USER',
 				message: __( 'Sorry, this file type is not permitted for security reasons.' ),
 				file: mediaFile,
 			} );
 			return;
 		}
 
+		// Check if the block supports this mime type
+		if ( ! isAllowedType( mediaFile.type ) ) {
+			triggerError( {
+				code: 'MIME_TYPE_NOT_SUPPORTED',
+				message: __( 'Sorry, this file type is not supported here.' ),
+				file: mediaFile,
+			} );
+			return;
+		}
+
 		// verify if file is greater than the maximum file upload size allowed for the site.
 		if ( maxUploadFileSize && mediaFile.size > maxUploadFileSize ) {
-			onError( {
+			triggerError( {
 				code: 'SIZE_ABOVE_LIMIT',
-				message: sprintf(
-					// translators: %s: file name
-					__( '%s exceeds the maximum upload size for this site.' ),
-					mediaFile.name
-				),
+				message: __( 'This file exceeds the maximum upload size for this site.' ),
+				file: mediaFile,
+			} );
+			return;
+		}
+
+		// Don't allow empty files to be uploaded.
+		if ( mediaFile.size <= 0 ) {
+			triggerError( {
+				code: 'EMPTY_FILE',
+				message: __( 'This file is empty.' ),
 				file: mediaFile,
 			} );
 			return;

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

@@ -6,6 +6,7 @@ import { mediaUpload, getMimeTypesArray } from '../media-upload';
 const invalidMediaObj = {
 	url: 'https://cldup.com/uuUqE_dXzy.jpg',
 	type: 'text/xml',
+	name: 'test.xml',
 };
 
 const validMediaObj = {
@@ -24,8 +25,16 @@ describe( 'mediaUpload', () => {
 	} );
 
 	it( 'should do nothing on invalid image type', () => {
-		mediaUpload( { filesList: [ invalidMediaObj ], onFileChange: onFileChangeSpy, allowedType: 'image' } );
+		const onError = jest.fn();
+		mediaUpload( {
+			filesList: [ invalidMediaObj ],
+			onFileChange: onFileChangeSpy,
+			allowedType: 'image',
+			onError,
+		} );
 		expect( onFileChangeSpy ).not.toHaveBeenCalled();
+		expect( onError ).toHaveBeenCalled();
+		expect( onError.mock.calls[ 0 ][ 0 ].code ).toBe( 'MIME_TYPE_NOT_SUPPORTED' );
 	} );
 
 	it( 'should call error handler with the correct error object if file size is greater than the maximum', () => {
@@ -38,11 +47,8 @@ describe( 'mediaUpload', () => {
 			maxUploadFileSize: 512,
 			onError,
 		} );
-		expect( onError ).toBeCalledWith( {
-			code: 'SIZE_ABOVE_LIMIT',
-			file: validMediaObj,
-			message: `${ validMediaObj.name } exceeds the maximum upload size for this site.`,
-		} );
+		expect( onError ).toHaveBeenCalled();
+		expect( onError.mock.calls[ 0 ][ 0 ].code ).toBe( 'SIZE_ABOVE_LIMIT' );
 	} );
 
 	it( 'should call error handler with the correct error object if file type is not allowed for user', () => {
@@ -56,11 +62,8 @@ describe( 'mediaUpload', () => {
 			onError,
 			allowedMimeTypes,
 		} );
-		expect( onError ).toBeCalledWith( {
-			code: 'MIME_TYPE_NOT_ALLOWED_FOR_USER',
-			file: validMediaObj,
-			message: 'Sorry, this file type is not permitted for security reasons.',
-		} );
+		expect( onError ).toHaveBeenCalled();
+		expect( onError.mock.calls[ 0 ][ 0 ].code ).toBe( 'MIME_TYPE_NOT_ALLOWED_FOR_USER' );
 	} );
 } );