Skip to content

Allow the user to select multiple images in the Media Library #35722

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
octaedro merged 5 commits into from
Nov 30, 2022
Merged

Allow the user to select multiple images in the Media Library #35722

octaedro merged 5 commits into from
Nov 30, 2022

Conversation

@octaedro
Copy link
Contributor

@octaedro octaedro commented Nov 25, 2022 •
edited
Loading

All Submissions:

Changes proposed in this Pull Request:

This PR adds the code to allow users to select multiple images in the Media Library.

Screenshot 2022-11-25 at 10 02 22

Closes #35181.

  • This PR is a very minor change/addition and does not require testing instructions (if checked you can ignore/remove the next section).

How to test the changes in this Pull Request:

  1. Checkout this branch and turn on the new-product-management-experience.
  2. Go to Products > Add New (MVP) > Images.
  3. Press Choose images and select more than one image (by pressing command and selecting them).
  4. The selected images should be added to the gallery in the image section.
  5. Repeated images won't be added.
  6. Verify that the storybook works correctly.

Other information:

  • Have you added an explanation of what your changes do and why you'd like us to include them?
  • Have you written new tests for your changes, as applicable?
  • Have you created a changelog file for each project being changed, ie pnpm --filter=<project> changelog add?

FOR PR REVIEWER ONLY:

  • I have reviewed that everything is sanitized/escaped appropriately for any SQL or XSS injection possibilities. I made sure Linting is not ignored or disabled.

@github-actions github-actions bot added focus: react admin package: @woocommerce/components issues related to @woocommerce/components plugin: woocommerce Issues related to the WooCommerce Core plugin. labels Nov 25, 2022
@github-actions
Copy link
Contributor

github-actions bot commented Nov 25, 2022 •
edited
Loading

Test Results Summary

Commit SHA: 9a29f9c

Test 🧪Passed ✅Failed 🚨Broken 🚧Skipped ⏭️Unknown ❔Total 📊Duration ⏱️
API Tests25900202611m 16s
E2E Tests186006019214m 43s
To view the full API test report, click here.
To view the full E2E test report, click here.
To view all test reports, visit the WooCommerce Test Reports Dashboard.

@octaedro octaedro changed the title Add/35181 allow select multiple images Allow the user to select multiple images in the Media Library Nov 25, 2022
@octaedro octaedro marked this pull request as ready for review November 25, 2022 13:07
@octaedro octaedro requested a review from a team November 25, 2022 13:07
@octaedro octaedro self-assigned this Nov 25, 2022
louwie17
louwie17 reviewed Nov 29, 2022
View reviewed changes
Copy link
Contributor

@louwie17 louwie17 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This overall tested well @octaedro, I did notice an issue when I tried to add several images were one of them would already be in the list. This prevented all the selected images from being added. Could we just filter out the already selected images?

plugins/woocommerce-admin/client/products/sections/images-section.tsx Outdated
images,
files,
'id'
).length === 0
Copy link
Contributor

@louwie17 louwie17 Nov 29, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This prevents any image from being added as soon as one duplicate image is part of the list.
Could we just filter out the duplicate images? and add all the newly selected images?

Copy link
Contributor Author

@octaedro octaedro Nov 30, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good idea! I fixed that in the commit 9a29f9c

@octaedro
Add multiple selection to MediaUploader
24af3d9 
# Conflicts:
#	packages/js/components/src/media-uploader/media-uploader.tsx
@octaedro
Fix README.md
7cbab10
@octaedro
Add multiple select to image section
eb3b233 
# Conflicts:
#	plugins/woocommerce-admin/client/products/sections/images-section.tsx
@octaedro
Add changelogs
1695e38
@octaedro
Fix repeated images addition
9a29f9c
@octaedro octaedro force-pushed the add/35181_allow_select_multiple_images branch from 51a84ec to 9a29f9c Compare November 30, 2022 13:05
@octaedro
Copy link
Contributor Author

octaedro commented Nov 30, 2022

Thank you @louwie17 for your review.
I just addressed the change you suggested. Could you take another look at this PR?

@octaedro octaedro requested a review from louwie17 November 30, 2022 13:06
louwie17
louwie17 approved these changes Nov 30, 2022
View reviewed changes
Copy link
Contributor

@louwie17 louwie17 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for fixing the repeated images issue, nice work!
This is still testing well, LGTM 🚀

@octaedro octaedro merged commit 1e9fff3 into trunk Nov 30, 2022
@octaedro octaedro deleted the add/35181_allow_select_multiple_images branch November 30, 2022 13:40
@github-actions github-actions bot added this to the 7.3.0 milestone Nov 30, 2022
@github-actions github-actions bot mentioned this pull request Jan 13, 2023
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@louwie17 louwie17 louwie17 approved these changes

Assignees

@octaedro octaedro

Labels

package: @woocommerce/components issues related to @woocommerce/components plugin: woocommerce Issues related to the WooCommerce Core plugin.

Projects

None yet

Milestone

7.3.0

Development

Successfully merging this pull request may close these issues.

[Enhancement]: Allow the user to select multiple images in the Media Library

3 participants

@octaedro @louwie17