search

Automattic / wp-calypso

The JavaScript and API powered WordPress.com
https://developer.wordpress.com
GNU General Public License v2.0
12.43k stars 1.99k forks source link

Media: When uploading multiple images, selection order is shuffled during upload resolution #43840

Open sarayourfriend opened 4 years ago

sarayourfriend commented 4 years ago

Steps to reproduce

  1. Open up the media library for a website
  2. Upload multiple images or select multiple to copy from a different source (the more the merrier as it is easier to tell what is happening)
  3. Notice the selection order numbers in the lower right hand corner of each image.

What I expected

These numbers should stay consistent during the full upload process

What happened instead

These numbers shift (though the final order matches the original)

Browser / OS version

Firefox 78.0b9 (64-bit) macOS Catalina

Screenshot / Video

https://d.pr/v/uGvATa

Context / Source

This needs to be fixed in the selected items media reducer: https://github.com/Automattic/wp-calypso/blob/01847a1144c6be186654e417291e04c5c2c62511/client/state/media/reducer.js#L239:L283

We should use the same transientId property from the action that the transientItems reducer uses in MEDIA_RECEIVE to swap the transient ID for the server ID in place thus preserving the order. Right now the server ID is being put at the end of the array and the transient ID is being removed, so each newly successful upload gets made last, while the previous are moved forward.

This does not have a material effect on user experience, it's just a UI inconsistency we could address if we have time.

designsimply commented 4 years ago

This appears to be a regression.

See https://github.com/Automattic/wp-calypso/issues/333, https://github.com/Automattic/wp-calypso/issues/11169, https://github.com/Automattic/wp-calypso/issues/20967 which are issues with good screenshots and additional background.

github-actions[bot] commented 3 years ago

This issue is stale because it has been 180 days with no activity. You can keep the issue open by adding a comment. If you do, please provide additional context and explain why you’d like it to remain open. You can also close the issue yourself — if you do, please add a brief explanation and apply one of relevant issue close labels.