Media: Dismiss button not functional on upload errors.

Change the `onclick` attribute to a separate inlined script in the error message and improve the event attachment behavior.

Props vivekawsm, mijotj, adamsilverstein, parthvataliya, adhun, sarathar, peterwilsoncc, sayedulsayem, chaion07, sppramodh, indirabiswas27, aishwarryapande, dhrumilk, manojmaharrshi, ugyensupport, imranhasanraaz, pkbhatt, shailu25, joedolson.
Fixes #60074.

git-svn-id: https://develop.svn.wordpress.org/trunk@59986 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-admin/async-upload.php

@@ -112,10 +112,12 @@ if ( isset( $_REQUEST['post_id'] ) ) {
 
 $id = media_handle_upload( 'async-upload', $post_id );
 if ( is_wp_error( $id ) ) {
-	$message = sprintf(
+	$button_unique_id = uniqid( 'dismiss-' );
+	$message          = sprintf(
 		'%s <strong>%s</strong><br />%s',
 		sprintf(
-			'<button type="button" class="dismiss button-link" onclick="jQuery(this).parents(\'div.media-item\').slideUp(200, function(){jQuery(this).remove();});">%s</button>',
+			'<button type="button" id="%s" class="dismiss button-link">%s</button>',
+			esc_attr( $button_unique_id ),
 			__( 'Dismiss' )
 		),
 		sprintf(
@@ -132,6 +134,7 @@ if ( is_wp_error( $id ) ) {
 			'paragraph_wrap'     => false,
 		)
 	);
+	echo "<script>jQuery( 'button#{$button_unique_id}' ).on( 'click', function() {jQuery(this).parents('div.media-item').slideUp(200, function(){jQuery(this).remove();})});</script>\n";
 	exit;
 }
 

tests/e2e/assets/sample.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="450" viewBox="0 0 800 450"> <rect fill="#0F1C3F" width="800" height="450"/> <text fill="#7FDBFF" font-family="sans-serif" font-size="90" dy="31.499999999999996" font-weight="bold" x="50%" y="50%" text-anchor="middle">800×450</text> </svg>

tests/e2e/specs/media-upload.test.js

@@ -0,0 +1,35 @@
+/**
+ * WordPress dependencies
+ */
+import { test, expect } from '@wordpress/e2e-test-utils-playwright';
+
+/**
+ * External dependencies
+ */
+import path from 'path';
+
+test( 'Test dismissing failed upload works correctly', async ({ page, admin, requestUtils }) => {
+	// Log in before visiting admin page.
+	await requestUtils.login();
+	await admin.visitAdminPage( '/media-new.php' );
+
+	// It takes a moment for the multi-file uploader to become available.
+	await page.waitForLoadState('load');
+
+	const testImagePath = path.join(__dirname, '../assets/sample.svg');
+
+	// Upload a file that will fail.
+	const input = page.locator( '#plupload-upload-ui input[type="file"]' );
+	await input.setInputFiles( testImagePath );
+
+	// Ensure the error message is visible.
+	await expect(
+		page.getByText('“sample.svg” has failed to upload.')
+	).toBeVisible();
+
+	// Ensure the error message is dismissed.
+	await page.getByRole('button', { name: 'Dismiss' }).click();
+	await expect(
+		page.getByText('“sample.svg” has failed to upload.')
+	).not.toBeVisible();
+} );