Provide a way to add alt text when doing bulk upload

I've applied both patches from #40 to Media Bulk Upload 3.0 (with Dropzone JS module 2.7, Dropzone library version 5.9 and latest D9).

I'm definitely seeing additional options in the module's config. However, when I attempt to bulk upload svg files I'm never prompted to enter alt text. I do see a title field appearing without issues.

This would be a great feature to get added. I've been added as a co-maintainer and would be keen to get this merged.

Anyone able to update the patch based on the feedback form #41?

Rerolled patch against 3.0.1
Also updated it to support all mime types that start with "image/", including svg files.

Thanks @matysek145! Moving to "needs review" for both code review and manual testing which can be done by different people.

I'll test right now.

I ended up testing and merging a bunch of other stuff so unassigning for now.

Rerolled patch against 3.0.2

Fixed patch

#48 works for me :)

#48 works to add the settings on the Media Bulk settings forms at /admin/config/media/media-bulk-config.
But adding that patch alone does not actually add the title field inside a bulk media upload form.
For that, you still need to add the dropzone patch.

This is what works for me on media_bulk_upload version 3.0.2 (I assume it will apply to the dev version just as well).
Add both patches in your composer.json file in the patches section:

            "drupal/media_bulk_upload": {
                "#3023825": "https://www.drupal.org/files/issues/2023-04-13/media_bulk_upload-3023825-48.patch"
            },
            "drupal/dropzonejs": {
                "#3023825: Add image ALT field while bulk uploading": "https://www.drupal.org/files/issues/2023-04-05/dropzonejs-3023825-43.patch"
            }

The form could do with a little css improvement but thats something I fix via custom css for now.

Another problem I just noticed:
I use bulk upload for uploading all different kinds of Media types, so not only images.
In the settings, I enabled the Title field not because it adds a title attribute to your images, but because it also sets the Name of the Media item to the content of the title field if its set.
This provides a way for users to set the a Media Name for each item they upload, instead of always using the filename as Media name.
But the title field is only rendered if the uploaded item is an image.
Adjustments should be made so you can set Media title for each uploaded item, not just images.
This screenshot has some custom styling applied to dropzone preview, but you can see that you cannot set title for non-image items.

I adjusted the patch for dropzone so it adds the title field if its enabled in settings no matter if its an image or not.
And it works, the Media entity name is set to the value of the Title field.

Fixed an error during the batch process for the PHP 7.4
Undefined index: title in Drupal\media_bulk_upload\Form\MediaBulkUploadForm->getNewMediaValues() (line 643 of /var/core/www/modules/contrib/media_bulk_upload/src/Form/MediaBulkUploadForm.php).

I still feel that an important (ux) TODO is removing the 'Save metadata' button and adjust the code to save adjusted alt/title values without having to use that 'Save metadata' button.

I agree with the most recent comment that the "Save metadata" button should be removed in favor of having any changes to the fields be saved when the "Submit" button is pressed. It is a more convenient method for a standard content editor who may not understand they need to click each button to save the data any time they make a change.

The alt text being required should also prevent the images from being saved but not remove the images from the upload tray. Hitting submit should trigger inline validation on those fields. The label for "Alt" should also have some kind of indicator that the field is required, like an asterisk or color treatment.

The look of the added Alt and Title fields is very ugly and the markup that constitutes that form is very plain and hard to style. It needs some CSS attention to make it look more presentable. I recommend wrapping those fields in an additional container (fieldset?).

I have noticed as well if you are typing in an Alt field, and you hit enter, it tries to submit all the images, and if the alt text wasn't saved then it would throw an error, which clears out the images completely. I feel like this is a critical bug.

Perhaps the functionality should:
1. Auto save when a user types and either pauses or blurs the field
2. Hitting enter saves the metadata if the focus is on the alt or title fields, and does not submit the total form
3. Submitting the form saves each metadata if it has values, and does not submit if any required fields do not have data

I tried to solve the issues mentioned in #54, #55, #56 based on the dropzonejs patch in #52.

Basically I did the following:

- Removed the "Save metadata" button
- Execute "processMetadata" on change
- Prevent pressing Enter on alt + title
- Add class "form-required" if alt is set to required

Can patch #57 be combined with patch #53 ? I can install media_bulk_upload with patch #57 just fine, but it doesnt work if I try to use both patch #57 and #53 like this in the composer patches section:

        "drupal/dropzonejs": {
            "#3023825: Add image ALT field while bulk uploading": "https://www.drupal.org/files/issues/2023-04-05/dropzonejs-3023825-43.patch"
        },
        "drupal/media_bulk_upload": {
            "#3023825: Add image ALT field while bulk uploading": "https://www.drupal.org/files/issues/2023-06-27/media_bulk_upload-3023825-53.patch",
            "#3023825: UX improvements": "https://www.drupal.org/files/issues/2023-08-16/dropzonejs-3023825-57.patch"
        },

That results in:

  - Installing drupal/dropzonejs (2.6.0): Extracting archive
  - Installing drupal/media_bulk_upload (3.0.2): Extracting archive
  - Applying patches for drupal/dropzonejs
    https://www.drupal.org/files/issues/2023-04-05/dropzonejs-3023825-43.patch (#3023825: Add image ALT field while bulk uploading)

  - Applying patches for drupal/media_bulk_upload
    https://www.drupal.org/files/issues/2023-06-27/media_bulk_upload-3023825-53.patch (#3023825: Add image ALT field while bulk uploading)
    https://www.drupal.org/files/issues/2023-08-16/dropzonejs-3023825-57.patch (#3023825: UX improvements)
   Could not apply patch! Skipping. The error was: Cannot apply patch https://www.drupal.org/files/issues/2023-08-16/dropzonejs-3023825-57.patch

I do:

1. download media_bulk_upload (3.0.2)
2. comoser require drupal/dropzonejs enyo/dropzone
3. composer require 'drupal/media_bulk_upload:^3.0'
4. fixed composer.json for extra.merge-plugin
5. composer config allow-plugins.wikimedia/composer-merge-plugin true
6. compser require drupal/dropzonejs enyo/dropzone:^5.7.2
7. composer require wikimedia/composer-merge-plugin
8. enable media_bulk_upload (3.0.2)
9. enable media_bulk_upload_dropzonejs (3.0.2), dropzonejs (8.x-2.8)

After that, I used patches:

• https://www.drupal.org/files/issues/2023-06-27/media_bulk_upload-3023825... →
• https://www.drupal.org/files/issues/2023-04-05/dropzonejs-3023825-43.patch →

Result are:

1. Upload Media on Submit-Form (with empty alt&title fields) will sendet (requirements are failed but go through)
2. Empty Alt-& Title fields in the new media

What I would need
Fallback of filename (without ending) for the alt field (if required), also title (if required).
Overwriting alt & title (with save metadata) is ok, but normally this is no need in a massive upload of images.

Only an idea or quick fix for alt field.

I added 3 lines (src/Form/MediaBulkUploadForm.php) to get a nice alt text for the alt field from given by the filename

$pathinfo = pathinfo($file->getFilename());
$alt = ucfirst(str_replace("_"," ",$pathinfo['filename']));
'alt' => $alt,

code in patchfile: media_bulk_upload-3023825-60.patch →

@flyke Patch #57 replaces patch #43 for dropzone, it is not a patch for the media_bulk_upload.

"drupal/media_bulk_upload": {
  "3023825-53: Allow alt text to be modified on upload": "https://www.drupal.org/files/issues/2023-06-27/media_bulk_upload-3023825-53.patch"
},
"drupal/dropzonejs": {
  "3023825-57: Better UX for bulk upload": "https://www.drupal.org/files/issues/2023-08-16/dropzonejs-3023825-57.patch"
}

This is a great improvement.

Something else I would like to see is the ability to choose if I am sent back to the media overview listing rather than back to the bulk upload form, but it's a lower priority thing.

Added an alt text description and an asterisk for required inputs. I also made sure the label was associated with the input and added an aria label for the asterisk.

I'm using:
- media_bulk_upload version 3.0.2
- dropzonejs 2.8.0
- unrelated media_bulk_upload patch: https://www.drupal.org/files/issues/2023-05-08/media_bulk_upload-can-not... → (Can not upload using core file upload element (no dropzonejs) because of false validation errors)

After looking at the patch files, it doesn't look like there would be a conflict between the above mentioned unrelated patch and the patches in this issue.

I've tried all of the patches here from #48 to #60 for media_bulk_upload, and from #43 to #62 for dropzonejs.

I'm getting "Could not apply patch! Skipping. The error was: Cannot apply patch https://www.drupal.org/files/issues/2023-04-13/media_bulk_upload-3023825... → " for all of the media_bulk_upload patches.

Not sure what my next move is, but, we need these patches to work for 508 compliance.

Patches #53 combined with #57 still work well.

The accessibility work in #62 is nice. However, I see a duplicate asterisk when the configuration check box is checked in the media bulk config and the description is way too long so the uploaded thumbnail box is very wide.

The issue fork is a patch for this module which creates the extra config settings at config/media/media-bulk-config, based on #53.
If no custom alt or title is given for an uploaded item on the dropzone multi upload form, then 'my_uploaded_image.jpg' will be converted into 'My uploaded image' as fallback for the media title, and the image alt and title.

The issue fork should be used together with a patch for dropzonejs module, so also add that to your composer.json:

            "drupal/dropzonejs": {
                "#3023825 - dropzone patch": "https://www.drupal.org/files/issues/2023-11-13/dropzonejs-3023825-62.patch"
            },

Added some screenshots of how this works showing the original filenames, the use of dropzonejs with the patch to enter alt and title in the upload form (patch #62), result of uploading image with custom alt and title, result of uploading image without custom alt and title, and screenshot of the new settings for this module (from the issue fork)

Heads up: It seemed impossible to keep issue #3011436 separate from this issue. Our projects need both the bulk alt title options as well as the option to edit each individual created media item after the bulk upload. But when using this MR, it was not quite possible to create a patch only for issue #3011436 because they both need to modify the same files in the same way.
So the MR here now also has the option to edit each Media item after the bulk upload.

After following the steps in #66, I checked the option to "Edit each Media item after upload." I then added 3 images and supplied 2 out of 3 with alt text during the upload process. The process completed and it brought me to the Edit screen for the first newly uploaded item with this Error text:

Notice: Only variables should be passed by reference in Drupal\media_bulk_upload\Form\MediaBulkUploadForm->batchFinished() (line 517 of modules/contrib/media_bulk_upload/src/Form/MediaBulkUploadForm.php).
Drupal\media_bulk_upload\Form\MediaBulkUploadForm->batchFinished(1, Array, Array, '1 sec') (Line: 457)
_batch_finished() (Line: 99)
_batch_page(Object) (Line: 52)
Drupal\system\Controller\BatchController->batchPage(Object)
call_user_func_array(Array, Array) (Line: 123)
Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->Drupal\Core\EventSubscriber\{closure}() (Line: 627)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 124)
Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->wrapControllerExecutionInRenderContext(Array, Array) (Line: 97)
Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->Drupal\Core\EventSubscriber\{closure}() (Line: 181)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 76)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 28)
Drupal\Core\StackMiddleware\ContentLength->handle(Object, 1, 1) (Line: 106)
Drupal\page_cache\StackMiddleware\PageCache->pass(Object, 1, 1) (Line: 85)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 36)
Drupal\Core\StackMiddleware\AjaxPageState->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\StackedHttpKernel->handle(Object, 1, 1) (Line: 704)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)

and when I clicked "Close and stop editing items," I got this error:

Symfony\Component\Routing\Exception\MissingMandatoryParametersException: Some mandatory parameters are missing ("node") to generate a URL for route "entity.node.canonical". in Drupal\Core\Routing\UrlGenerator->doGenerate() (line 187 of core/lib/Drupal/Core/Routing/UrlGenerator.php).
Drupal\Core\Routing\UrlGenerator->getInternalPathFromRoute('entity.node.canonical', Object, Array, Array) (Line: 300)
Drupal\Core\Routing\UrlGenerator->generateFromRoute('entity.node.canonical', Array, Array, 1) (Line: 108)
Drupal\Core\Render\MetadataBubblingUrlGenerator->generateFromRoute('entity.node.canonical', Array, Array, ) (Line: 765)
Drupal\Core\Url->toString() (Line: 150)
Drupal\Core\Form\FormSubmitter->redirectForm(Object) (Line: 95)
Drupal\Core\Form\FormSubmitter->doSubmitForm(Array, Object) (Line: 597)
Drupal\Core\Form\FormBuilder->processForm('media_image_edit_form', Array, Object) (Line: 325)
Drupal\Core\Form\FormBuilder->buildForm(Object, Object) (Line: 73)
Drupal\Core\Controller\FormController->getContentResult(Object, Object)
call_user_func_array(Array, Array) (Line: 123)
Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->Drupal\Core\EventSubscriber\{closure}() (Line: 627)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 124)
Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->wrapControllerExecutionInRenderContext(Array, Array) (Line: 97)
Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->Drupal\Core\EventSubscriber\{closure}() (Line: 181)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 76)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 58)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 28)
Drupal\Core\StackMiddleware\ContentLength->handle(Object, 1, 1) (Line: 106)
Drupal\page_cache\StackMiddleware\PageCache->pass(Object, 1, 1) (Line: 85)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 36)
Drupal\Core\StackMiddleware\AjaxPageState->handle(Object, 1, 1) (Line: 51)
Drupal\Core\StackMiddleware\StackedHttpKernel->handle(Object, 1, 1) (Line: 704)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)

But the items were successfully uploaded with the alt text that I provided.

@bhogue: I made some adjustments, please test again

I tried the solution in #66, and it works when I utilize it on a form page, but when I try to add photos within a media library modal it complains in the console about a missing file:

An error occurred during the execution of the Ajax response: The following files could not be loaded: /modules/contrib/dropzonejs/css/dropzone.element.css?ska97319

After clicking "Add media" I get an unstyled dropzone area at the top and the media library below, but no images save after trying to upload or select previously uploaded photos and click "Insert selected."

I have confirmed that removing the dropzone patch from #66 resolves the issue in the modal, but it also removes the capability of adding alt text when uploading in bulk, which is the reason for the patches in the first place.

Dropzone library version: 5.9.3
Drupal version: 10.3.5
Dropzonejs module version: 8.x-2.11 (^2.11)
Media Bulk Upload: DropzoneJS version: 3.0.2 (3.0.x-dev@dev)

The problem there seems to be that the patch adds a library dependency on css/dropzone.element.css, but doesn't add that file. The version in patch #43 does have the new file. Not clear to me if the resolution is to introduce the file or remove the dependency.

I tried recreating the dropzone patch from #62, but including the css/dropzone.element.css file from #43

            "drupal/dropzonejs": {
                "#3023825 - dropzone patch": "https://www.drupal.org/files/issues/2023-11-13/dropzonejs-3023825-75.patch"
            },
            "drupal/media_bulk_upload": {
                "#3023825": "https://git.drupalcode.org/project/media_bulk_upload/-/merge_requests/14.diff"
            },

I did create the css file but it was not added when I created patch from changes. Another attempt.

            "drupal/dropzonejs": {
                "#3023825 - dropzone patch": "https://www.drupal.org/files/issues/2024-09-25/dropzonejs-3023825-76.patch"
            },
            "drupal/media_bulk_upload": {
                "#3023825": "https://git.drupalcode.org/project/media_bulk_upload/-/merge_requests/14.diff"
            },