Contrib.social

Drupal 10 image upload AJAX error with status code 200

Open on Drupal.org →
Created on 6 June 2024, 6 months ago
Updated 24 July 2024, 4 months ago

Weirdly, I'm getting an AJAX HTTP Error with Drupal 10 when trying to upload an image into a custom node type via Edit functionality. Here's the error:

[
{
"command": "settings",
"settings": {
"ajaxPageState": {
"theme": "claro",
"theme_token": "M3TQBj9mOsosDYzhHjcCpfd0JwNhnzGrWTiGFD_EG7s",
"libraries": "eJyNVNGS2yAM_CECT_2A9ubuqTP9BI-MZZsEgw-JXHJfX-E4ThynnbzYYncRIC1AM7hQcYy-hmTmv-aEqOCflO7jEZMLjIHXsooQku3N5ffAlT8tiZyNQdWuq0Y3orkGyh6wcRzTD1PypwBeL5D2ELoM3VNVk_J4L35Fo21s8JeP9vCSGoexB3L0krjnwb-HzoWXdqvd8OK5NEPtRekhRSNforNu3YLM8gDHnQhpRjsfa_A74rN3oZvBIIfftTENSlrBeOIM_jr_huxkxoH-L5l7KqKE5rZT8K4LQzHJI5E5loVhw9SlGZ85Mj4yfUzuW5YE_3uq6Zp1oXmyTtn6FqONbgRi_Ehx-NO2zm6SJxzE8B9PN0x9_JocRBsm5mTxXUZTyR_IEa0D_9ZDAiud3szmBIE8sIuBNIYLPVdeZrgj7m6nWzriPYyEK7CRZWKnYQ-nFU4MjLSCJmc1CbotmpBG2Ykse-EWe-4_MyZx4MVGwoRSJu--UYk5yhaveeahah36pupSzKMpM1bAxRWSW08oIati7muOyejyEcEdJCPV-gil0NXkILMeqrKw41t5lTBizp7reDJ3sSp3YrlDEqsRAnqqxMXZ3MV6T_dU5eEcM5N5gmlLRcv9NW-JJ6BcA_Plmk5OOWIaHFFpd1WfKznSMF3Q4jolJktsMy-9m8eqXMClTxKrh-f6cayRLIz4s7zLKtOtiiWenmT6C0xUV2M"
},
"ajax": {
"edit-field-image-0-remove-button--XUSHtLBPI6U": {
"callback": [
"Drupal\\file\\Element\\ManagedFile",
"uploadAjaxCallback"
],
"wrapper": "ajax-wrapper--ZinswkrYwh4",
"effect": "none",
"progress": {
"type": "throbber",
"message": null
},
"event": "mousedown",
"keypress": true,
"prevent": "click",
"url": "\/en\/node\/600\/edit?element_parents=field_image\/widget\/0\u0026destination=\/en\/admin\/content\u0026ajax_form=1\u0026_wrapper_format=drupal_ajax",
"httpMethod": "POST",
"dialogType": "ajax",
"submit": {
"_triggering_element_name": "field_image_0_remove_button",
"_triggering_element_value": "Remove"
}
}
},
"ajaxTrustedUrl": {
"\/en\/node\/600\/edit?element_parents=field_image\/widget\/0\u0026destination=\/en\/admin\/content\u0026ajax_form=1\u0026_wrapper_format=drupal_ajax": true
},
"pluralDelimiter": "\u0003",
"user": {
"uid": "1",
"permissionsHash": "fe66cae0a3f59fc98d64b4cb35554c298ed4428a82ecef9b060b4d1806947018"
}
},
"merge": true
},
{
"command": "add_css",
"data": [
{
"rel": "stylesheet",
"media": "all",
"href": "\/sites\/default\/files\/css\/css_o2TKLd_uBO46SALOh09xozXkX50NHET_xxSiTsljnQs.css?delta=0\u0026language=en\u0026theme=claro\u0026include=eJxLzkksytdPzkksLq7US8vMSQUAO5EGng\u0026exclude=eJyNVFGS2yAMvRCBrx6g3dn96kyP4JGxYpNg8CKRTfb0FY7jxHbayRfiPSEJ6QE0vQsVx-hrSGZaNSdEBf-kdBdPmFxgDLx0qwgh2c5clxVXVpoDORuDql1bDW5AczOUPWLjOKYfpsRPAbyeIe0htBnap15NysOj8ys-2sYGf_lojy95Yz90QI5ecu649--hdeGlarXrX7yXZqi9eHpI0UxkgNNOYJrQ1sca_I744l1oJzDIVXf7mHoljWc8cwZ_O39HdnLiSP93mSYoTgnNvS7wrg19kcSayBxLYtgwdWn9Z46Ma6aLyX1LSvC_xw4uWReaJ3lK6VuMNn4DEONHiv2f_d7ZTfCEvcj742nB1MWvUS-0YWJOFt9lN7Z8RQ5oHfi3DhJYmevmNCcI5IFdDKQxXOmp83LCnXB3v908Ee9hIFyAjaSJrYYDnBc4MTDSAhp11CRot2hCGqQSSXvlZjEePjOmi55kJEwobfLuG5WIo5R4izNt1d6hb6o2xTyYcmIBXFUhsfWIErLQfq6l2AUQhwdIdmrvI5RGV6OCzHKrSmLH9_YqYUScHdfxbB5sVd7E_IbEVgME9FSJirN5sPWBHqnKwyVmJvME05aKL3e3uMUegfIMzJdrWrnlgKl3RGXcVX2p5Er9-ECL6pSILLHNPM9u2qvyAOc5ia1Wn_N6r5EsDPiz_MIq072LxR4_YPoLGwtQmg"
}
]
},
{
"command": "update_build_id",
"old": "form-jq0fzIj2z48WjPSsRfkJeoTmGDaYjqvXhuyg8jXX_Ic",
"new": "form-EdRrdxlgzesrZCG1dOXsKQH3pzRaKBCqECoPv4CXaRw"
},
{
"command": "insert",
"method": "replaceWith",
"selector": null,
"data": "\u003Cdiv id=\u0022ajax-wrapper--ZinswkrYwh4\u0022\u003E\u003Cdetails open class=\u0022claro-details\u0022\u003E \u003Csummary role=\u0022button\u0022 aria-expanded=\u0022true\u0022 class=\u0022claro-details__summary\u0022\u003EPartner Image\u003C\/summary\u003E\u003Cdiv class=\u0022claro-details__wrapper details-wrapper\u0022\u003E\n \n \u003Cdiv class=\u0022js-form-item form-item js-form-type-managed-file form-type--managed-file js-form-item-field-image-0 form-item--field-image-0 form-item--no-label\u0022\u003E\n \u003Clabel for=\u0022edit-field-image-0-upload--aoS4kiGILDo\u0022 id=\u0022edit-field-image-0--TKYCNmAezUk--label\u0022 class=\u0022form-item__label visually-hidden\u0022\u003EPartner Image\u003C\/label\u003E\n \u003Cdiv class=\u0022image-widget js-form-managed-file form-managed-file form-managed-file--image is-single no-upload has-value has-meta\u0022\u003E\n \u003Cdiv class=\u0022form-managed-file__main\u0022\u003E\n \n\u003Cspan data-drupal-selector=\u0022edit-field-image-0-file-470-filename\u0022 class=\u0022file file--mime-image-png file--image\u0022\u003E\u003Ca href=\u0022\/sites\/default\/files\/2024-04\/Dentons-Logo-RGB-Dentons-Purple-300_3.png\u0022 type=\u0022image\/png\u0022\u003EDentons-Logo-RGB-Dentons-Purple-300_3.png\u003C\/a\u003E \u003Cspan class=\u0022file__size\u0022\u003E(23.11 KB)\u003C\/span\u003E\u003C\/span\u003E\n\n \u003Cinput data-drupal-selector=\u0022edit-field-image-0-remove-button\u0022 formnovalidate=\u0022formnovalidate\u0022 class=\u0022button--extrasmall remove-button button js-form-submit form-submit\u0022 type=\u0022submit\u0022 id=\u0022edit-field-image-0-remove-button--XUSHtLBPI6U\u0022 name=\u0022field_image_0_remove_button\u0022 value=\u0022Remove\u0022\/\u003E\n \u003C\/div\u003E\n\n \u003Cdiv class=\u0022form-managed-file__meta-wrapper\u0022\u003E\n \u003Cdiv class=\u0022form-managed-file__meta\u0022\u003E\n \u003Cdiv class=\u0022form-managed-file__image-preview image-preview\u0022\u003E\n \u003Cdiv class=\u0022image-preview__img-wrapper\u0022\u003E\n \u003Cimg data-drupal-selector=\u0022edit-field-image-0-preview\u0022 src=\u0022\/sites\/default\/files\/styles\/thumbnail\/public\/2024-04\/Dentons-Logo-RGB-Dentons-Purple-300_3.png?itok=2KpHfTn3\u0022 width=\u0022100\u0022 height=\u002226\u0022 alt=\u0022\u0022 loading=\u0022lazy\u0022 typeof=\u0022foaf:Image\u0022 class=\u0022image-style-thumbnail\u0022 \/\u003E\n\n\n \u003C\/div\u003E\n \u003C\/div\u003E\n \n \u003Cdiv class=\u0022form-managed-file__meta-items\u0022\u003E\n \n \u003Cdiv class=\u0022js-form-item form-item js-form-type-textfield form-type--textfield js-form-item-field-image-0-alt form-item--field-image-0-alt\u0022\u003E\n \u003Clabel for=\u0022edit-field-image-0-alt--mb1G4bns59U\u0022 class=\u0022form-item__label js-form-required form-required\u0022\u003EAlternative text\u003C\/label\u003E\n \u003Cinput data-drupal-selector=\u0022edit-field-image-0-alt\u0022 aria-describedby=\u0022edit-field-image-0-alt--mb1G4bns59U--description\u0022 type=\u0022text\u0022 id=\u0022edit-field-image-0-alt--mb1G4bns59U\u0022 name=\u0022field_image[0][alt]\u0022 value=\u0022\u0022 size=\u002260\u0022 maxlength=\u0022512\u0022 class=\u0022form-text required form-element form-element--type-text form-element--api-textfield\u0022 required=\u0022required\u0022 aria-required=\u0022true\u0022\/\u003E\n \u003Cdiv id=\u0022edit-field-image-0-alt--mb1G4bns59U--description\u0022 class=\u0022form-item__description\u0022\u003E\n Short description of the image used by screen readers and displayed when the image is not loaded. This is important for accessibility.\n \u003C\/div\u003E\n \u003C\/div\u003E\n\n \n \u003C\/div\u003E\n \u003C\/div\u003E\n \u003C\/div\u003E\n \n \u003Cinput data-drupal-selector=\u0022edit-field-image-0-fids\u0022 type=\u0022hidden\u0022 name=\u0022field_image[0][fids]\u0022 value=\u0022470\u0022\/\u003E\n\u003C\/div\u003E\n\n \u003C\/div\u003E\n \u003C\/div\u003E\n\u003C\/details\u003E\n\u003C\/div\u003E",
"settings": nul

I have no idea how to debug this or how to fix the error. It only happens on the dev server environment, and not on local Docksal environment

🐛 Bug report
Status

Postponed: needs info

Version

11.0 🔥

Component
Image module  →

Last updated 17 days ago

Created by

rvck2007

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

Comments & Activities

  • Issue created by @rvck2007
  • Status changed to Postponed: needs info 6 months ago
  • Comment 6 months ago →
    cilefen

    What do you mean by a custom node type, specifically? Please add verified steps to reproduce from a new Drupal install. This is needed for bug resolution.

  • Comment 6 months ago →
    rvck2007

    Hello.

    By "a custom node type", I mean a simply "Content node" that I want to add. And in this Content, I want to add a picture.

    Steps to reproduce the bug :
    1 - Go the page "Content/Media"
    /admin/content/media-grid

    2- Click on "+Add media"

    3- Choose "Image" (for instance)

    4- Select a picture file in the field "Add a new file > Browse"

    5 - Then you have this Error message Notification on top of the page :
    "Error message
    Oops, something went wrong. Check your browser's developer console for more details."

    6- When you open the Brower Developer Console, you have the detail for the Ajax error.

    Thanks a lot for your support, appreciate it !

  • Comment 6 months ago →
    cilefen

    Those are normal activities so there must be more steps to reproduce, starting from installing Drupal, for you to verify.

    Can you turn off JavaScript aggregation and get a stack trace from the browser console?

    Can you reproduce it on https://simplytest.me? The login is admin/admin.

  • Comment 5 months ago →
    rvck2007

    Hello Cilefen. Sorry for the delay in my reply. I have deactivated JavaScript in my browser (Firefox). And now I can upload the images and files. Admittedly, the thumbnail isn't displayed next to the upload field, but the file is uploaded correctly and I'm able to post the content with the uploaded image. However, as soon as I re-enable JavaScript in my browser, the bug reappears.

  • Comment 5 months ago →
    rvck2007

    But as I say (just in the message before), when I re-activate JavaScript, I have the bug and the error in the browser console (see picture attached).
    And it's impossible to submit the form

  • Comment 5 months ago →
    rvck2007
  • Comment 5 months ago →
    cilefen

    What do we need to do to set up a Drupal site that exhibits this bug?

    Is anything logged by Drupal?

    What is the precise platform setup?

  • Comment 5 months ago →
    giosal90

    Dear @cilefen,

    I'm working on the same project. Thank you for your time trying to help us investigate the issue.

    To respond to your questions:
    - There are no error messages in the Drupal internal log or Apache logs on the server, except for the famous AJAX error in the JS console in the browser.
    - The setup of the platform is the following: it is hosted on one of the servers of Infomaniak (Swiss hosting provider) with Debian 8 based on linux kernel 4.9.0-0.bpo.12-amd64, PHP 8.2 and Drupal 10.2.6. However, I seriously doubt that anybody else on any other environment will be able to reproduce this bug as we weren't able to do so neither in a local environment (on multiple computers) nor on our own servers.

    Thank you again,
    Best,
    giosal90

  • Comment 5 months ago →
    cilefen

    Do other Drupal sites run well on that hosting platform? Is there a layer 7 firewall?

    Have you built a new basic site on that hosting platform as an experimental control?

  • Comment 5 months ago →
    giosal90

    Dear @cilefen,

    We are testing this platform now as we foresee to migrate some of our websites there. However, as of now, there is only an old version of this same website, based on Drupal 9.5 that is running perfectly fine.

    On the other hand, we have not tested a new basic site but we did remove completely the directory with the problematic site as well as it's database and reinstalled it from scratch, after which we imported the backups.

    We can also provide you with package.json and composer.json files if needed.

    Best,
    giosal90

  • Comment 5 months ago →
    🇵🇪Peru alyaj2a

    In my case there was a space above <?php in settings.php. I removed this space y the problem resolved.

  • Comment 5 months ago →
    giosal90

    Dear @cliefen,

    We have just finalized the upgrade of the server to Debian 11 and MariaDB 10.6, but the issue still persists...

    Best,
    giosal90

  • Comment 5 months ago →
    giosal90

    Dear @cliefen,

    We have also explored another solution - we produced git artifact using GitLab CI and replaced the source code hosted on the server with the artifact.

    Weirdly enough, it now works. However, I do believe that the issue is still worrysome.

    Best,
    giosal90

  • Comment 5 months ago →
    cilefen

    During your analysis did you capture the precise difference in the new code you deployed as compared to the broken code?

  • Comment 4 months ago →
    🇳🇿New Zealand quietone

    Changes are made on on 11.x (our main development branch) first, and are then back ported as needed according to our policies.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024