Paste: Give each pasted data-URI image unique filename to avoid upload collisions.

[mecskyverse]

What?

Closes #73092

Pasted images (e.g. copying content from Google Docs) could end up in the wrong order or get duplicated, with some images overwriting others. This PR fixes that by giving each pasted image a unique filename before upload.

Why?

When you paste HTML containing images, each embedded image arrives as a data: URI. In imageCorrector (packages/blocks/src/api/raw-handling/image-corrector.ts), every such image was turned into a File whose name was derived from its MIME type alone:

const name = type.replace( '/', '.' ); // "image/png" → "image.png"

So every pasted image was named image.png (or image.jpeg, etc.). Each pasted image mounts as its own block and immediately fires its own mediaUpload(), so pasting N images fires N concurrent uploads — all with the same filename.

On the server, wp_unique_filename() derives the next available filename by scanning the uploads directory at request time. Under concurrency, multiple requests scan at the same moment, all compute the same "next available" name, and sometimes overwrite each other. The result is the intermittent reordering/duplication reported in the issue (e.g. 1,2,3,4,3,6,7,8,8,10). This matches the findings in the issue — the source HTML from Google Docs is in the correct order, so the problem is on our end, and it only shows up under load/timing (which is why it's intermittent and hard to reproduce).

How?

Generate a unique filename per pasted image so concurrent uploads no longer collide:

const subtype = type.slice( type.indexOf( '/' ) + 1 );
const name = `image-${ ++uniqueImageId }.${ subtype }`;

Because each file now has a distinct base name, wp_unique_filename() gives each its own independent sequence and they can no longer overwrite one another — even when uploaded fully in parallel.

Naming impact

This only affects data: URI images embedded in pasted content (Google Docs, screenshots pasted as data URIs, other rich editors, etc.).

Note on filenames: pasted data-URI images never had a real filename — image.png was a placeholder created from the MIME type. Previously they used to become image-1.png, image-2.png, etc. After this change and WordPress's normal de-duplication across sessions/reloads, they may appear as image-1-1.png, image-1-2.png, image-1-3.png, image-2-1, image-3-1, image-3-2 and so on.

Testing Instructions

1. Create a Google Doc with several images mixed with text (higher-resolution images and more of them make the issue easier to hit). Few source doc: From the issue Png Images with Text JPG Images
   (At most ~50 images in 1 copy/paste upload is supported)
2. On trunk, paste the full content into a new post and observe the intermittent reordering/duplication (repeat a few times; it's timing-dependent).
3. With this PR applied, repeat the same pastes and confirm images always appear in the correct order with no duplication or overwrites.

Automated Test:

npm run test:unit -- packages/blocks/src/api/raw-handling/test/image-corrector.js

A new unit test asserts that two pasted data-URI images receive distinct image-N.png filenames.

Testing performed

• Real-world copy/paste testing with multiple images mixed with text.
• Tested copy/paste with ~50 images at once.
• Copy/paste of images in different formats (PNG, JPG, WebP).
• Verified order is preserved and no images are duplicated or overwritten across repeated pastes.

Screenshots or screencast

Before

Before.Image.Collision.mp4

After

After.Image.Collision-2.mov

Use of AI Tools

AI assistance: Yes
Tool(s): Claude Opus 4.8 (via Claude Code)
Used for: Initial code search, test case addition, PR Description, Creation of test images for testing is done by AI.
Testing cases, code addition, review and confirmation of fix working is done by me.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @traed.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Unlinked contributors: traed.

Co-authored-by: mecskyverse <aakashverma1@git.wordpress.org>
Co-authored-by: khushdoms <khushdoms@git.wordpress.org>
Co-authored-by: SirLouen <sirlouen@git.wordpress.org>
Co-authored-by: FakhriAz <fakhriaz@git.wordpress.org>
Co-authored-by: ellatrix <ellatrix@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.