Make dropzonejs widget available to the new Media Library in core

+1 on this

That would be interesting. I am not currently very up to speed with that, so my question is if core media library even supports that?

@mohammed-j-razem @primsi
for the meantime: There is a patch available for the Seven theme to enable drag&drop support in Core:
https://www.drupal.org/project/drupal/issues/2113931

And I've migrated the patches already for Claro:
https://www.drupal.org/project/claro/issues/3059615

Enjoy :-)

Would be a very cool feature indeed.
My knowledge of the inner workings of this module is very limited, so I could not get it working. I had hoped the symply altering the form element type and attaching the libraries would make it work...
But all I get is a widget that looks good, but isn't working...

/**
 * Implements hook_form_FORM_ID_alter().
 */
function dropzonejs_form_media_library_add_form_upload_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state, $form_id) {
  $form['container']['upload']['#type'] = 'dropzonejs';
  $form['#attached']['library'][] = 'dropzonejs/widget';
  $form['#attached']['library'][] = 'dropzonejs_eb_widget/common';
}

Perhaps someone else can point me in the right direction?

Here is an initial patch. Note, that #3171743: [backport] Not possible to overwrite the upload forms for media library is currently needed.

Tested the patch with Seven&Claro admin themes using Drupal core 8.9.6. On both the media library failed to open after applying the patch. AJAX error:

Notice: Undefined index: #upload_validators in /var/www/html/modules/contrib/dropzonejs/src/Form/DropzoneJsUploadForm.php on line 110
Notice: Undefined index: fids in /var/www/html/core/modules/media_library/src/Form/FileUploadForm.php on line 199
Warning:  count(): Parameter must be an array or an object that implements Countable in /var/www/html/core/modules/media_library/src/Form/FileUploadForm.php on line 199
Notice:  Undefined index: #cardinality in /var/www/html/core/modules/media_library/src/Form/FileUploadForm.php on line 199

Patch worked for me on Drupal 8.9.7 - I am using the Gin admin theme, which extends Claro.

Thank you Christian,

Patch #7 is working for Images

Other uploadable media types are not supported yet

Local Video

File or Docs

Audio

Tested with Drupal 9

#3171743: [backport] Not possible to overwrite the upload forms for media library
Was committed and released to Drupal 8 and Drupal 9

It's Christian's fix, only the support for other Drupal core media sources.

Had a testing round ( Local development ) no extra config or settings

Image

Local Video

File or Docs

Audio

Tested in Drupal 8.9.7 and Drupal 9.0.7 using the Claro admin theme
The issue #3171743: [backport] Not possible to overwrite the upload forms for media library was committed and released in both.
Thanks, Christian for the initial patch.

+++ b/dropzonejs.services.yml
@@ -5,3 +5,6 @@ services:
+  dropzonejs.url_generator:
+    alias: url_generator.non_bubbling
+    public: true

+++ b/src/Element/DropzoneJs.php
@@ -86,6 +86,10 @@ class DropzoneJs extends FormElement {
+    /** @var \Drupal\Core\Routing\UrlGeneratorInterface $urlGenerator */
+    $urlGenerator = \Drupal::service('dropzonejs.url_generator');

@@ -93,7 +97,7 @@ class DropzoneJs extends FormElement {
-      '#attributes' => ['data-upload-path' => Url::fromRoute('dropzonejs.upload')->toString()],
+      '#attributes' => ['data-upload-path' => $urlGenerator->generateFromRoute('dropzonejs.upload')],

Just curious why this is needed? Overriding a private service that is. It can cause issues such as this #2948185: ServiceNotFoundException when logging out.

Was there an issue using Url::fromRoute?

I tried the patch and I think the reason for using private service is to avoid caching CSRF token. I tried also with Url::fromRoute, but it doesn't work, the token is always not valid. I think it is happening because of ajax form caching inside media library.

I found this issue https://drupal.stackexchange.com/questions/293913/invalid-csrf-token-usi... and there is a workaround here https://github.com/Mykola-Veryha/ajax-flag-link/blob/master/src/Controll..., the author tries to refresh the token. That is also not ideal solution.

Here is re-rolled patch without using private service. I used collected cacheable metadata and applied it to form element. Now the CSRF token is valid inside ajax form too. Please review.

Not sure why the test failed, but it is not related to the change in this issue. Failure is here at line 61:

// Js is attached.
    $this->assertNotEmpty($this->xpath("/html/body/script[contains(@src, 'libraries/dropzone/dist/min/dropzone.min.js')]"));

Thanks Artem! I just tried the patch in #20 and it's working for me (core 8.9.10).

Having the following #3192282: Fix Dropzonejs widget issue of adding _0 on all image file names

Steps to reproduce

When applying dropzonejs widget on the media image field
and upload image dropzonejs widget
Then it addes _0 on all images path
like this when upload image "test.png"
after upload and check image path /sites/default/files/test_0.png

I can also confirm the bug with filenames from #24

While using lighting_media_bulk_upload after applying the #20 patch, the form at /admin/content/media/bulk-upload stops working. Previously there was no dropzone widget on the page, but the select multiple button worked. After the patch the button stopped working.

I found the problem with "_0". DropzoneJS was moving the file from temp folder to destination and then MediaLibrary class is also doing this. So I modified the UploadForm from DropzoneJS to have empty destination, so it remains in temp folder and then media library moves it to proper destination.

MediaLibrary UploadForm is a parent to DropzoneJS, so it is safe to have destination empty for DropzoneJS.

Again, the test that check whether dropzone.js file is there fails, but it has nothing to do with the module itself, it is how composer pulls the assets.

I tried the patch in #27 with a field designed to accept file media entities. The media library would not load. The error message was big and ugly (and JSON encoded) but the start read:

An AJAX HTTP error occurred.
HTTP Result Code: 200
Debugging information follows.
Path: https://iiroc.dev.localhost/node/add/new_notice?ajax_form=1
StatusText: OK
ResponseText: 
Notice:  Undefined index: #upload_validators in /Users/martin/Sites/iiroc/docroot/modules/contrib/dropzonejs/src/Form/DropzoneJsUploadForm.php on line 110
Notice:  Undefined index: fids in /Users/martin/Sites/iiroc/docroot/core/modules/media_library/src/Form/FileUploadForm.php on line 199
Warning:  count(): Parameter must be an array or an object that implements Countable in /Users/martin/Sites/iiroc/docroot/core/modules/media_library/src/Form/FileUploadForm.php on line 199
Notice:  Undefined index: #cardinality in /Users/martin/Sites/iiroc/docroot/core/modules/media_library/src/Form/FileUploadForm.php on line 199

Can you please give more details? I tested this patch with Drupal 8.9.15 (OpenSocial) and also Drupal 9.1.5 with standard profile and it is working. What are your versions? Any details on what media types are enabled, what type is not working for you?

I had been testing using Drupal 8.9.15 (no distro). I was attempting to upload file entities.

I believe I have since been able to get it working by adding the Media Bulk Upload module, but it sounded like that shouldn't be a requirement.

Using the Media Bulk Upload with Dropzone.js they are working very well.
#3206185: Add Media Bulk Upload module

It feels that we should have a config setting for Dropzone.js to be used in the Media Library.
Some may want to have it in selected fields only and may not use it in other fields.

I have refactored the upload form class to re-use what base class provides to avoid having notices and warnings. Now also the validation is correct, previously it was using fids property from managed_file element that is obviously not present in dropzoneJS element (there it is called uploaded_files).

Now there should be no warnings, no errors and no "_0" in file names.

Please review new patch.

This should fix the tests

$generated_url->applyTo($element)

has overwritten the attachments.

Looks like it works well, but only thing I noticed is when I have a media library field on a node and I click the button to open the modal, the modal is focused on the media library view listing rather than at the top of the modal where the dropzone widget is. So you have to scroll up to see/use the widget. Not sure how easily we can alter that.

So I tested a bit more, and it does work fine when I switch my admin theme to Seven. The issue I ran into only exists on Claro and Gin as far as I can tell, so might be an issue for the theme instead.

The patch from #37 seems to work with me as well. Only issue is with the scroll position when the modal opens.
Focus is on the "Select files" button but somehow the modal content is a bit scrolled (see screenshot):

The problem mentioned in #39ff seems to be a core issue, see #3267599: Arbitrary scroll on dialog open.

I tested this and it looks good

Thx, committed it

Hi everyone, thanks for the changes they seem very useful. But I tend to agree with @Rajab Natshah #34, I think it should be configurable. I added this option at https://www.drupal.org/project/dropzonejs/issues/3171110 .

Thank you !