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
For those who encounter the similar problem, this was finally resolved by upgrading the server from Debian 8 to Debian 11. Really strange...