Possible to select multiple images in a media field where only 1 value is accepted

I can confirm the issue, with slightly difference from the steps above.

Follow all steps above until:

3. Create a new basic page.
- When filling in the media image field:

Then:

• Upload a new file. It should end up as selected.
• Upload a second file. It should also end up as selected.
• Insert the images
• The field will report '-1 media-items left.'

This was using Seven as backend theme.

Logs show:

Notice: Undefined index: removed_item_id in Drupal\media_library\Plugin\Field\FieldWidget\MediaLibraryWidget::updateWidget() (line 671 of /var/www/html/web/core/modules/media_library/src/Plugin/Field/FieldWidget/MediaLibraryWidget.php)

#0 /var/www/html/web/core/includes/bootstrap.inc(600): _drupal_error_handler_real(8, 'Undefined index...', '/var/www/html/w...', 671, Array)
#1 /var/www/html/web/core/modules/media_library/src/Plugin/Field/FieldWidget/MediaLibraryWidget.php(671): _drupal_error_handler(8, 'Undefined index...', '/var/www/html/w...', 671, Array)
#2 [internal function]: Drupal\media_library\Plugin\Field\FieldWidget\MediaLibraryWidget::updateWidget(Array, Object(Drupal\Core\Form\FormState), Object(Symfony\Component\HttpFoundation\Request))
#3 /var/www/html/web/core/lib/Drupal/Core/Form/FormAjaxResponseBuilder.php(69): call_user_func_array(Array, Array)
#4 /var/www/html/web/core/lib/Drupal/Core/Form/EventSubscriber/FormAjaxSubscriber.php(109): Drupal\Core\Form\FormAjaxResponseBuilder->buildResponse(Object(Symfony\Component\HttpFoundation\Request), Array, Object(Drupal\Core\Form\FormState), Array)
#5 [internal function]: Drupal\Core\Form\EventSubscriber\FormAjaxSubscriber->onException(Object(Symfony\Component\HttpKernel\Event\GetResponseForExceptionEvent), 'kernel.exceptio...', Object(Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher))
#6 /var/www/html/web/core/lib/Drupal/Component/EventDispatcher/ContainerAwareEventDispatcher.php(111): call_user_func(Array, Object(Symfony\Component\HttpKernel\Event\GetResponseForExceptionEvent), 'kernel.exceptio...', Object(Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher))
#7 /var/www/html/vendor/symfony/http-kernel/HttpKernel.php(227): Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch('kernel.exceptio...', Object(Symfony\Component\HttpKernel\Event\GetResponseForExceptionEvent))
#8 /var/www/html/vendor/symfony/http-kernel/HttpKernel.php(79): Symfony\Component\HttpKernel\HttpKernel->handleException(Object(Drupal\Core\Form\FormAjaxException), Object(Symfony\Component\HttpFoundation\Request), 1)
#9 /var/www/html/web/core/lib/Drupal/Core/StackMiddleware/Session.php(57): Symfony\Component\HttpKernel\HttpKernel->handle(Object(Symfony\Component\HttpFoundation\Request), 1, true)
#10 /var/www/html/web/core/lib/Drupal/Core/StackMiddleware/KernelPreHandle.php(47): Drupal\Core\StackMiddleware\Session->handle(Object(Symfony\Component\HttpFoundation\Request), 1, true)
#11 /var/www/html/web/core/modules/page_cache/src/StackMiddleware/PageCache.php(106): Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object(Symfony\Component\HttpFoundation\Request), 1, true)
#12 /var/www/html/web/core/modules/page_cache/src/StackMiddleware/PageCache.php(85): Drupal\page_cache\StackMiddleware\PageCache->pass(Object(Symfony\Component\HttpFoundation\Request), 1, true)
#13 /var/www/html/web/core/lib/Drupal/Core/StackMiddleware/ReverseProxyMiddleware.php(47): Drupal\page_cache\StackMiddleware\PageCache->handle(Object(Symfony\Component\HttpFoundation\Request), 1, true)
#14 /var/www/html/web/core/lib/Drupal/Core/StackMiddleware/NegotiationMiddleware.php(52): Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object(Symfony\Component\HttpFoundation\Request), 1, true)
#15 /var/www/html/vendor/stack/builder/src/Stack/StackedHttpKernel.php(23): Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object(Symfony\Component\HttpFoundation\Request), 1, true)
#16 /var/www/html/web/core/lib/Drupal/Core/DrupalKernel.php(708): Stack\StackedHttpKernel->handle(Object(Symfony\Component\HttpFoundation\Request), 1, true)
#17 /var/www/html/web/index.php(19): Drupal\Core\DrupalKernel->handle(Object(Symfony\Component\HttpFoundation\Request))
#18 {main}

I will try to reproduce this issue and find a suitable fix. Therefore assigning to myself.

Here is a patch that fixes the issue.

Uploading the patch with a fix.
Also updating the priority of the bug.

working on this issue

Sorry @hardik_patel_12, I already did some workaround from the patch in #9.

@himanshu_sindhwani , great start I have tried patch #9 , this is working fine for limited values like 1 .But it is not working in case of unlimited values. I have tried to solve that as well kindly look in to it.

Thanks

I am not sure how this is an issue for the unlimited case? You can connect me on slack - himanshu_sindhwani is my user name, for further discussion. Moreover, there are some coding standard fixes issues in the patch in #14.

Fixing the coding standard issues in patch #15 and also I found currentSelection is const in es6.js so we can not do Drupal.MediaLibrary.currentSelection = currentSelection = [];.

Tested the patch given in #18, it works on my end.

Before patch when limit set to 1, we can able to select multiple images which is not the correct behavior. After applying the patch, when limit set to 1 it restricted to select only one image as expected behaviour. Please refer to SS for ref.

Verified on the local, patch in #18 is working correctly. Used media field with 1 limit and tried steps given in summary. Previously multiple images were getting added but after applying a patch, only one image can be added. Attaching screenshots.

Re-rolling patch for 9.1.x.

Re-rolled patch for Drupal 9.1.x

Verified and tested by applying the patch #26.It looks good to me.Can be moved to RTBC.

Steps to test -
1. Go to the admin site.
2. Go to admin/modules
3. Enable media module (with media library).
4. Go to /admin/structure/types/manage/page/fields
5. Add a media field to the basic page content type.
- Set the limit to 1.
- Set the media type to "Image"
6. Go to admin/content.
7. Create a new basic page.
- When filling in the media image field:
- first upload an image and insert it.
- remove this image (so you have an image in the library.)
- click 'add media' and select the uploaded image from the library
- when it is selected, upload a new image
- insert both images (when using the new Claro theme, you won't able to add more than 1 image.

Before Patch -

After Patch -

Testing Steps:
1. Enable Media module (with media library).
4. Go to "/admin/structure/types/manage/page/fields"
5. Add a media field to the basic page content type.
- Set the limit to 1.
- Set the media type to "Image"
6. Go to "/admin/content/media" and upload 2-3 images
7. Go to "/node/add/page"
8. Click on Add Media button. And upload the images existing/new.

Testing Results:
1. When we try to select images from existing images. Then we are not able to upload more than one image because selection for all images is disabled after we select the one image. Fixed
2. After selecting one image from the existing image, we are able to upload the new image using the file upload button. Need Fix

@ambuj30oct We can upload the image even we have selected the image from existing but after uploading only one file will be selected. The upload button is not disabled and should not be disabled. Please read the thred before working on issue. Moreover clear browser cache after applying the patch.

@himanshu_sindhwani
After uploading the image, both files are selected (previously added and recently added). This was the issue. In this case, the user is able to insert both images. Please check and let me know if I am wrong.

I suggest we should add some validation message on the click of Insert selected button, to fix this.

@ambuj30oct , I have tested on local with d9.1.x setup it is working properly , can you please try patch at #26 with d9 setup then it would be great .

Thankyou

@Hardik_Patel_12 Re-Tested after applying the patch #26 on fresh install Drupal 9. And it's working as expected.

Results:
1. After the image is uploaded, the previously selected image is deselected and the recently uploaded image is selected.
2. When we try to select images from existing images. Then we are not able to upload more than one image because after selecting one image the selection is disabled for all images.

Thanks

It is strange the test cases were passed earlier but got failed in retesting. I again tested it for 9.1, It is passing the test cases but still, there are two coding standard issues shown in drupal ci if anyone can look for.

Correcting the coding standard issues here.

Tested and verified by applying patch #42. The patch is not working as expected.
After selecting an image, when we browse and upload a new image, all the images are de-selected.
In this case, the currently uploaded image must be selected.

Tested with the above mentioned test steps and latest patch. Using Claro theme, only one image can be uploaded at a time. Rest all images are getting de-selected

The patch at #26 is working and the latest patch at #42 tried to solve coding standard error but it is still present there. So we just have to remove coding standard errors from the patch at #26 and which are as follows.

/var/lib/drupalci/workspace/jenkins-drupal_patches-52684/source/core/modules/media_library/js/media_library.ui.es6.js
line 0 File ignored because of a matching ignore pattern. Use "--no-ignore" to override.
/var/lib/drupalci/workspace/jenkins-drupal_patches-52684/source/core/modules/media_library/js/media_library.ui.js
0 File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

Kindly review a new patch , solving coding standards error as well.

Review a new patch.

After adding #50, code changes are clearly visible.
This can be moved to RTBC

I think that #3092536: Possible to select multiple images in a media field where only 1 value is accepted is a duplicate of this one (or vice-versa).

@phenaproxima, you have tagged this same issue here in #52

D'oh! You're right; fixed now.

Looks good to me . Followed the above testing steps.
Moving this to RTBC.

This needs automated test coverage before it can be committed.

Transferring credit from #3160240: User can select multiple media entities but only one is allowed, which I have closed as a duplicate of this one.

It turns out this is a duplicate of #3059955: It is possible to overflow the number of items allowed in Media Library, which has more activity and seems to be further along. With that being the case, I'm going to close this issue in favor of that one. I will also transfer credit.

Cleaned up the #50 patch to work with Drupal 9.2

Applied patch #50, it is working, but when selecting an item then adding a new file and clicking on "Save and Insert", it will add both items. I'm not sure how it can be fixed, should it be from the backend or the frontend? Maybe adding a simple file upload event to clear up the selections would work.

The patch in the comment #62 works perfect in Drupal 9.2.8. Thanks.

Cleaned up the #62 patch to work with Drupal 9.3.3

Cleaned up the #65 patch to work with Drupal 9.3.x

The patch in the comment #62 not works in Drupal 9.3.x. But the patch in the comment #66 now works perfect in Drupal 9.3.9. Thanks for the support.

Cleaned up the patch to work with Drupal 9.4.0

#68 still doesn't work for me correctly (on Drupal 9.4.1). When I click an image, go to the next page, I can still click an image. In the bottom of the overlay it says that 2 images are selected, however you only see 1. When I click the image again, it only selects that image. I've made a screen recording of it. I'll see if I can update the patch for Drupal 9.4

This issue has been closed as a duplicate. Comments on it aren't helpful. #3059955: It is possible to overflow the number of items allowed in Media Library is the issue where we are currently fixing this. We also don't need a bunch of unecessary rerolls and repeated manual testing of the same patch on that issue, either.) Thanks! I am locking this issue to further comments.