Problem/Motivation

Media library upload modal/widget keep breaking during the image uploading, happens randomly.

What's happening:
Step 1: In CKEditor click on the Insert from Media Library icon

Step 2: In open modal/widget, click on Select files or drop image to upload

Step 2

Step 3:
Expected/normal: It takes a little bit time to upload the image and will show another modal to choose the Crop Image option etc

Step 3 normal

Happening: Quickly active modal replaced with new small modal with images gallery etc. Sometimes CKEditor also disappear itself on textarea.

Step 3 happens

Not getting any error!

This is the first time I am posting a support issue. So apologies in advance if I didn't select the right module/category etc.

CommentFileSizeAuthor
#9 3301973-media-library-issue.m.mp43.74 MBtesla863
#3 Screen Shot 2022-08-06 at 8.06.04 pm.png15.04 KBbsingh
Screen Shot 2022-08-05 at 4.14.01 pm.png54.39 KBbsingh
Screen Shot 2022-08-05 at 4.11.39 pm.png26.22 KBbsingh
Screen Shot 2022-08-05 at 4.09.32 pm.png50.49 KBbsingh
Screen Shot 2022-08-05 at 4.00.03 pm.png21.68 KBbsingh

Comments

bsingh created an issue. See original summary.

cilefen’s picture

cilefen commented
Component: ajax system » media system
Issue tags: -ckeditor, -dropzonejs, -Ajax, -media library, -file upload

Have you examined the browser console log?

bsingh’s picture

bsingh commented
StatusFileSize
new Screen Shot 2022-08-06 at 8.06.04 pm.png15.04 KB

Few details may be helpful:
- Drupal 9.4.4
- PHP 7.4

This starts happening upon update to 9.4.3.

These are in console atm:
Error with Permissions-Policy header: Origin trial controlled feature not enabled: 'interest-cohort'.
and
Console

Before this I have fixed/patched:
https://www.drupal.org/files/issues/2022-07-01/core-ajaxload-1988968-293...
for [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience.
and
https://www.drupal.org/files/issues/2021-03-22/3047022-71.patch

cilefen’s picture

cilefen commented
Status: Active » Postponed (maintainer needs more info)

It has been two months. IS there any update?

cilefen’s picture

cilefen commented
Status: Postponed (maintainer needs more info) » Closed (outdated)
bsingh’s picture

bsingh commented

Hey @cilefen, thanks for following this up.

Upon browsing a file to start uploading - sometimes randomly the main modal is replaced with a smaller one as I have shown earlier.

I found that at that point ajaxPageState response of /media-library is different in both cases [success or fail].
Libraries: not the same in both cases such as dropzonejs/integration, field_group/core,field_group/formatter.details, etc are missing in one response.
Ajax: Missing edit-save-insert--*, edit-save-select--* etc
Also missing add_css and add_js.

In other response again different libraries, "auto_select_handler", dropzonejs - edit-upload--t-* etc.

Any idea why these responses are different in diff cases. This is happening just on Prod!

Thanks

bsingh’s picture

bsingh commented
Status: Closed (outdated) » Active

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.9 was released on December 7, 2022 and is the final full bugfix release for the Drupal 9.4.x series. Drupal 9.4.x will not receive any further development aside from security fixes. Drupal 9 bug reports should be targeted for the 9.5.x-dev branch from now on, and new development or disruptive changes should be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

tesla863’s picture

tesla863 commented
StatusFileSize
new 3301973-media-library-issue.m.mp43.74 MB

Hi guys
I'm having the same issue, it's happening just in the prod environment!
On my debugs I also notice different ajax responses:
Prod - with error: 

"ajax": {
  "auto_select_handler": {
  "callback": "::updateFormCallback",
  "wrapper": "media-library-wrapper",
  "event": "auto_select_media_library_widget",

Any environment without error: 

"ajax": {
  "edit-save-select--DPoJUz0Uo_U": {
  "callback": "::updateLibrary",
  "wrapper": "media-library-add-form-wrapper",
  "event": "mousedown",
  "keypress": true,
  "prevent": "click",

Any idea?
Thanks!

bsingh’s picture

bsingh commented

@tesla863 It's start happening again on my end. Have you had any solution for it?

eric.vvf’s picture

eric.vvf commented

I am facing the same. But I couldn't reproduce it locally, only in Pantheon's staging environment. as @bsingh reported, there are differences in responses between cases that work and cases that don't. Happens randomly, and doesn't seem to have a pattern.

With error:

"ajax":{
            "auto_select_handler":{
               "callback":"::updateFormCallback",
               "wrapper":"media-library-wrapper",
               "event":"auto_select_media_library_widget",
               "url":"\/media-library?...",
               "dialogType":"ajax",
               "submit":{
                  "_triggering_element_name":"auto_select_handler"
               }
            }
         }

Without error:

"ajax":{
    "edit-submit--M799kaIDOac":{...}
    ...
    "auto_select_handler":{...}
    ...
}

I tried a patch to add the missing libraries (in my case: file/drupal.file and dropzonejs/integration), but the problem still persists.

nchristensen’s picture

nchristensen commented

For those hosting with Pantheon:

Pantheon has a known issue with DropzoneJS, which is used for the Media Entity DropzoneJS widget and Media Bulk Upload module.

The module does not interact will with multiple-container environments, such as Pantheon, and is known to cause issues within the platform itself, which is what the site is currently experiencing.

see Pantheon's documentation here: https://docs.pantheon.io/modules-known-issues#dropzonejs

sahilgidwani’s picture

sahilgidwani commented

Any update on this issue? I am also facing this issue in my production environment but not on Pantheon.

bsingh’s picture

bsingh commented

In my case, this was related to the server/hosting environments - as mentioned by @nchristensen.

Acquia has something similar: https://docs.acquia.com/cloud-platform/manage/files/broken/

bsingh’s picture

bsingh commented
Status: Active » Closed (works as designed)