Wrong buttons displayed if Media Library's advanced UI is enabled

Created on 25 November 2021, almost 3 years ago
Updated 17 September 2024, 2 months ago

Problem/Motivation

After selecting multiple JPG files to upload, all works as expected: the “Multiple media upload” page shows the selected files, with a single “Save” button at the bottom.

But if I go to /admin/config/media/media-library and enable the advanced UI, then the next time I upload multiple JPG files the “Multiple media upload” page shows the selected files, with two buttons at the bottom: “Save and select” and “Save and insert”.

These two buttons make sense when the Media Library is used to insert media items into text, but when Media Library is used with Media Library Bulk Upload we just want the “Multiple media upload” page to have the single “Save” button, regardless of whether the advanced UI is enabled or not.

Steps to reproduce

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

🐛 Bug report
Status

Active

Version

1.0

Component

Code

Created by

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • 🇺🇸United States maxstarkenburg Washington, DC

    Following. I also found myself confused by this (and am making a video walk-through for a client, so honestly wasn't sure which button recommend (after testing, I'm going to recommend "Save and select", since "Save and insert" is ambiguous about whether it actually did anything (though it does indeed upload them too, just doesn't redirect anywhere))).

  • 🇺🇸United States nessthehero

    I also encountered this issue but decided to mitigate it by removing the "Save and insert" button action and renaming the "Save and select" action to "Save Media".

    I used a custom module with a form alter hook.

    function HOOK_form_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state, $form_id) {
    
      if ($form_id === 'media_library_add_form_upload') {
    
        if (isset($_GET['media_library_opener_id']) && $_GET['media_library_opener_id'] === 'media_library.opener.bulk_upload') {
          if (isset($form['actions'])) {
            $form['actions']['save_select']['#value'] = new TranslatableMarkup('Save Media');
            unset($form['actions']['save_insert']);
          }
        }
    
      }
    
    }
    

    This only affects the bulk upload form from the media overview screen, and not any individual upload field found on a node edit form. Hopefully this helps someone.

  • 🇺🇸United States tobby

    Here is an updated version of that hook that follows some Drupal best practices (not using $_GET, etc):

    function HOOK_form_FORM_ID_alter(array &$form, FormStateInterface $form_state): void {
      // Use the request stack service to access the query parameters.
      $current_request = \Drupal::request();
      $media_library_opener_id = $current_request->query->get('media_library_opener_id');
    
      if ($media_library_opener_id === 'media_library.opener.bulk_upload') {
        if (isset($form['actions']['save_insert'])) {
          // Remove the 'save_insert' action button from the form.
          unset($form['actions']['save_insert']);
        }
      }
    }
    

    In this case, FORM_ID is `media_library_add_form_upload` but my need was `media_library_add_form_dropzonejs` (but this is the post that gave me the solution I needed), so your FORM_ID may vary.

Production build 0.71.5 2024