Set error state when there is an upload error in during file upload

[kirilzh]

Description

Fixes #23579

The app was hanging in an infinite loading state when file upload resulted in an error because of an unsupported file type. The problem was that in here

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

Lines 171 to 176 in 0a22d69

	validFiles.push( mediaFile );
	// Set temporary URL to create placeholder media file, this is replaced
	// with final file from media gallery when upload is `done` below
	filesSet.push( { url: createBlobURL( mediaFile ) } );
	onFileChange( filesSet );

the uploaded file is not recognized but is considered to be a valid one. Next when onFileChange is called it runs

gutenberg/packages/block-library/src/file/edit.js

Lines 90 to 100 in 0a22d69

	onSelectFile( media ) {
	if ( media && media.url ) {
	this.setState( { hasError: false } );
	this.props.setAttributes( {
	href: media.url,
	fileName: media.title,
	textLinkHref: media.url,
	id: media.id,
	} );
	}
	}

which sets hasError state to false. At this point the server has not yet responded with an error, so the front-end shows a loader screen. Next the API call is made and createMediaFromFile throws.

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

Lines 181 to 212 in 0a22d69

	try {
	const savedMedia = await createMediaFromFile(
	mediaFile,
	additionalData
	);
	const mediaObject = {
	...omit( savedMedia, [ 'alt_text', 'source_url' ] ),
	alt: savedMedia.alt_text,
	caption: get( savedMedia, [ 'caption', 'raw' ], '' ),
	title: savedMedia.title.raw,
	url: savedMedia.source_url,
	};
	setAndUpdateFiles( idx, mediaObject );
	} catch ( error ) {
	// Reset to empty on failure.
	setAndUpdateFiles( idx, null );
	let message;
	if ( has( error, [ 'message' ] ) ) {
	message = get( error, [ 'message' ] );
	} else {
	message = sprintf(
	// translators: %s: file name
	__( 'Error while uploading file %s to the media library.' ),
	mediaFile.name
	);
	}
	onError( {
	code: 'GENERAL',
	message,
	file: mediaFile,
	} );
	}

onError runs but the state is never updated in

gutenberg/packages/block-library/src/file/edit.js

Lines 102 to 106 in 0a22d69

	onUploadError( message ) {
	const { noticeOperations } = this.props;
	noticeOperations.removeAllNotices();
	noticeOperations.createErrorNotice( message );
	}

How has this been tested?

Manually tested with a file with .unsupported extension.

Screenshots

Types of changes

Bug fix (non-breaking change)

Checklist:

• My code is tested.
• My code follows the WordPress code style.

[ItsJonQ]

This looks great! I'll test it out on my machine in about 30-60 mins. Will provide an update + review when I can!

[ItsJonQ]

🚀 from me! Thanks @kirilzh for helping with this. I tested it locally, and can confirm that unsupported extensions (correctly) trigger the error message.