diff --git a/packages/editor/src/utils/media-upload/media-upload.js b/packages/editor/src/utils/media-upload/media-upload.js index 89a54d8b3cedc..5fe0099e6f069 100644 --- a/packages/editor/src/utils/media-upload/media-upload.js +++ b/packages/editor/src/utils/media-upload/media-upload.js @@ -77,14 +77,21 @@ 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 = [ + { error.file.name }, + ': ', + 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, @@ -92,15 +99,31 @@ export function mediaUpload( { 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; diff --git a/packages/editor/src/utils/media-upload/test/media-upload.js b/packages/editor/src/utils/media-upload/test/media-upload.js index a6d0757dc9cf9..0b6bc991bd19d 100644 --- a/packages/editor/src/utils/media-upload/test/media-upload.js +++ b/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' ); } ); } );