Custom form AJAX error of upload file size shown even with no file field.

Yeah, I've see this failure as well being thrown on various occasions when there's no file upload. It's totally confusing when you get this.

I got the same issue,

Got a view with a node form on it. When uploading a file in the nodeform,it gives me a error about filesizes(even if the file is within the filesize)

I am also facing same issue.

In node form alter i have attached the #ajax . I am getting "The uploaded file likely exceeded the maximum file size " error. My functionality no where related to file upload.

$form['field_partial_amount']['widget']['0']['#ajax'] = [
'callback' => '\Drupal\my_module\Controller\AjaxCallbackController::responseCallback',
// 'callback' => 'finalWithdrawAmountAjaxTest',
'wrapper' => 'final-balance',
'event' => 'change',
'progress' => [
'type' => 'throbber',
'message' => NULL,
],
];

below is my AjaxCallbackController.php

namespace Drupal\my_module\Controller;

use Drupal\Core\Controller\ControllerBase;

/**
* call back controller class
*/
class AjaxCallbackController extends ControllerBase {

/**
* @return rennderable array
*
*/
static function responseCallback(array &$form, \Drupal\Core\Form\FormStateInterface $form_state) {
return $response = [
'#markup' => '

',
];
}
}

I was also able to reproduce the error at my end.

Steps I took:

1) Alter views_exposed_form.
2) Add '#ajax' to the select form element with a 'callback' function and a 'wrapper' id.
3) Whenever I change the value of this element. I get this error. Please see the image below:

The buildForm function in FormBuilder class throws the BrokenPostRequestException without checking the post_max_size or upload_max_filesize which seems to be incorrect.

I commented out the line which throws the exception, and tried to change the values again. The control doesn't seem to go into the callback function. Instead I get the Drupal.AjaxError error in console with the following message:

"
An AJAX HTTP error occurred.
HTTP Result Code: 200
Debugging information follows.
Path: /en/search/list?ajax_form=1
StatusText: OK
ResponseText: 
| SiteName
Skip to main content
Toolbar items
Back to site
Manage
Administration menuContentStructureAppearanceExtendConfigurationPeopleReportsHelp      
Shortcuts
User-defined shortcutsEdit shortcuts      
Edit
admin
User account actionsView profileEdit profileLog out      
Devel
Development menuCache clearConfig editorContainer InfoCurrent route infoDevel settingsElement InfoEntity InfoEvents InfoExecute PHPField InfoPHPinfo()Rebuild MenuReinstall ModulesRoutes InfoRun cronState editorTheme registryView SessionConfigure      
User account menu
Show — User account menu
Hide — User account menu
My account
Log out
SiteName
Breadcrumb
Home
Search
qwerqwer  
Select ratingGive it 1/5Give it 2/5Give it 3/5Give it 4/5Give it 5/5Cancel rating
Product fdsadfas  
Select ratingGive it 1/5Give it 2/5Give it 3/5Give it 4/5Give it 5/5Cancel rating
product asdfsub title  
Select ratingGive it 1/5Give it 2/5Give it 3/5Give it 4/5Give it 5/5Cancel rating
- Any -
Product
Treatment
Categories
- Any -
Body
Face
Sun
Powered by Drupal
{"ajaxPageState":{"theme":"bartik","libraries":"bartik\/global-styling,bartik\/global-styling,classy\/base,classy\/base,contextual\/drupal.contextual-links,contextual\/drupal.contextual-links,contextual\/drupal.contextual-toolbar,contextual\/drupal.contextual-toolbar,core\/drupal.active-link,core\/drupal.active-link,core\/drupal.states,core\/drupal.states,core\/html5shiv,core\/html5shiv,core\/normalize,core\/normalize,devel\/devel-toolbar,devel\/devel-toolbar,fivestar\/fivestar.base,fivestar\/fivestar.base,fivestar\/fivestar.craft,fivestar\/fivestar.craft,quickedit\/quickedit,quickedit\/quickedit,shortcut\/drupal.shortcut,shortcut\/drupal.shortcut,system\/base,system\/base,toolbar\/toolbar,toolbar\/toolbar,toolbar\/toolbar.escapeAdmin,toolbar\/toolbar.escapeAdmin,user\/drupal.user.icons,user\/drupal.user.icons,views\/views.ajax,views\/views.ajax,views\/views.module,views\/views.module"},"ajaxTrustedUrl":{"\/en\/search\/list":true,"\/en\/search\/list?ajax_form=1\u0026_wrapper_format=html":true},"ajax":{"edit-category-3--cax4Rt4a8zc":{"callback":"\\Drupal\\custom_module\\Form\\DependentFieldOptionsUpdater::updateOptions","wrapper":"dependent-fields-wrapper-container","event":"change","url":"\/en\/search\/list?ajax_form=1\u0026_wrapper_format=html","dialogType":"ajax","submit":{"_triggering_element_name":"category"}},"edit-category-2--9GYwZXePFM4":{"callback":"\\Drupal\\custom_module\\Form\\DependentFieldOptionsUpdater::updateOptions","wrapper":"dependent-fields-wrapper-container","event":"change","url":"\/en\/search\/list?ajax_form=1\u0026_wrapper_format=html","dialogType":"ajax","submit":{"_triggering_element_name":"category"}},"edit-category-1--0v2QWtzowdM":{"callback":"\\Drupal\\custom_module\\Form\\DependentFieldOptionsUpdater::updateOptions","wrapper":"dependent-fields-wrapper-container","event":"change","url":"\/en\/search\/list?ajax_form=1\u0026_wrapper_format=html","dialogType":"ajax","submit":{"_triggering_element_name":"category"}},"edit-category-all--znJmZTHUY7M":{"callback":"\\Drupal\\custom_module\\Form\\DependentFieldOptionsUpdater::updateOptions","wrapper":"dependent-fields-wrapper-container","event":"change","url":"\/en\/search\/list?ajax_form=1\u0026_wrapper_format=html","dialogType":"ajax","submit":{"_triggering_element_name":"category"}}},"views":{"ajax_path":"\/en\/views\/ajax","ajaxViews":{"views_dom_id:61a824844ea9e7826a772e4d0f0688f35653a3386ea8ff57c6605c3eb4679679":{"view_name":"product","view_display_id":"page_1","view_args":"","view_path":"\/en\/search\/list","view_base_path":"search\/list","view_dom_id":"61a824844ea9e7826a772e4d0f0688f35653a3386ea8ff57c6605c3eb4679679","pager_element":0}}},"toolbar":{"breakpoints":{"toolbar.narrow":"only screen and (min-width: 16.5em)","toolbar.standard":"only screen and (min-width: 38.125em)","toolbar.wide":"only screen and (min-width: 61em)"},"subtreesHash":"syiNQBqkuhiTAFEphKRff4vm1Jn6qd5SEPshNLAEWwg"},"path":{"baseUrl":"\/","pathPrefix":"en\/","currentPath":"search\/list","currentPathIsAdmin":false,"isFront":false,"currentLanguage":"en","currentQuery":{"_wrapper_format":"html","ajax_form":"1"}},"pluralDelimiter":"\u0003","user":{"uid":"1","permissionsHash":"1b376d1403b56ce9f0c75b7faa8c09318a30c46bf4a494de4d495238f11cc4e4"}}
"

Changing the title. This is not limited to pager. This is the best I could come up with.

JS callstack below:

	Drupal.Ajax.error	@	ajax.js?v=8.3.2:965
complete	@	ajax.js?v=8.3.2:510
t.complete	@	jquery.form.min.js?v=3.51:11
i	@	jquery.min.js?v=2.2.4:2
fireWith	@	jquery.min.js?v=2.2.4:2
z	@	jquery.min.js?v=2.2.4:4
(anonymous)	@	jquery.min.js?v=2.2.4:4
XMLHttpRequest.send (async)		
send	@	jquery.min.js?v=2.2.4:4
ajax	@	jquery.min.js?v=2.2.4:4
e.fn.ajaxSubmit	@	jquery.form.min.js?v=3.51:11
Drupal.Ajax.eventResponse	@	ajax.js?v=8.3.2:679
(anonymous)	@	ajax.js?v=8.3.2:536
dispatch	@	jquery.min.js?v=2.2.4:3
r.handle	@	jquery.min.js?v=2.2.4:3

I was also getting this. I finally figured out that had something to do with the custom template I was using for my form declared in a hook_theme function. Once I removed that, it started working. My template was pretty simple but I have yet to figure out anything past that it had to do with using a template file with my form.

Update:
Just coming back to this. Simple mistake on my part. My template was missing: {{ form.form_id }}. Once I fixed this, everything worked just fine.

Unfortunately, the "file size" error message is really misleading, confusing, and definitely made it hard to track down my simple mistake especially since my form has nothing to do with a file field.

I have this issue also when I render a view with a pager inside a form, when I change the page the response contains this error, also in the preview of the view that appears when you edit the view.

Done.

Ups, now should work.

Sorry, this time I really tested it.

From https://drupal.stackexchange.com/questions/250078/ajax-submission-leads-...,

My problem: I was adding a 'destination' parameter to the url of the ajax link that opened my custom form, and used the destination in my submit handler, to issue a form redirect, causing the redirect to appear to be an ajax request in /Drupal/Core/Form/FormBuilder.php:299, but without the form_id (since it was in fact a GET (redirect)), and thus exploded with that misleading upload file size error.

My solution: Remove the destination parameter from the ajax link, so as not to confuse the ajax handling of the form builder on the redirect; and handle the redirect a different way.

I have the same issue. The patch does not fix anything. Worst, it's break others.

In my case, i have this issue when varnish cache POST requests. By default, my varnish configuration cached POST requests. Configuring varnish to pass POST requests fixed this issue.
In case you also use varnish and you really want to cache POST requests, maybe you should at least pass ajax form POST requests.

Closed https://www.drupal.org/project/drupal/issues/3150306 as a duplicate.

This error comes up if you're outputting a form in a Twig template and you've rendered individual form element.

So what is the solution?

I have a block builder which displays block through twig! And all my forms displayed through its twig isn't working! please help!

my stack trace looks like this ->

Drupal.Ajax.error	@	ajax.js?v=8.9.13:507
complete	@	ajax.js?v=8.9.13:241
t.complete	@	jquery.form.js:298
c	@	jquery.min.js?v=3.5.1:2
fireWith	@	jquery.min.js?v=3.5.1:2
l	@	jquery.min.js?v=3.5.1:2
(anonymous)	@	jquery.min.js?v=3.5.1:2
load (async)		
send	@	jquery.min.js?v=3.5.1:2
ajax	@	jquery.min.js?v=3.5.1:2
(anonymous)	@	jquery.form.js:437
e.fn.ajaxSubmit	@	jquery.form.js:437
Drupal.Ajax.eventResponse	@	ajax.js?v=8.9.13:333
(anonymous)	@	ajax.js?v=8.9.13:272
dispatch	@	jquery.min.js?v=3.5.1:2
v.handle	@	jquery.min.js?v=3.5.1:2
trigger	@	jquery.min.js?v=3.5.1:2
a.event.trigger	@	jquery-migrate.min.js?v=8.9.13:2
(anonymous)	@	jquery.min.js?v=3.5.1:2
each	@	jquery.min.js?v=3.5.1:2
each	@	jquery.min.js?v=3.5.1:2
trigger	@	jquery.min.js?v=3.5.1:2
triggerUploadButton	@	file.js?v=8.9.13:95
dispatch	@	jquery.min.js?v=3.5.1:2
v.handle	@	jquery.min.js?v=3.5.1:2

Any fixes?

What joachim says in https://www.drupal.org/project/drupal/issues/2658718#comment-13783185

This error comes up if you're outputting a form in a Twig template and you've rendered individual form element.

And Abouhassane Abdelhamid on StackOverflow https://drupal.stackexchange.com/a/250149/16345 says

well in my case it was not a matter of post size request but rather when I themed the form in my twig file, I did not include the form id.

That helped me a lot for bugfixing a similar casus on a project. This is a solution:

When rendering individual form elements you should use {{ form|without( ... ) }} in your twig template. After doing this 'invisible' things required for AJAX will be rendered.

Here an example from Drupal commerce commerce-checkout-form--with-sidebar.html.twig
https://git.drupalcode.org/project/commerce/-/blob/8.x-2.x/modules/check...

<div class="layout-checkout-form clearfix">
  <div class="layout-region layout-region-checkout-main">
    {{ form|without('sidebar', 'actions') }}
  </div>
  <div class="layout-region layout-region-checkout-secondary">
    <h3>{% trans %} Order Summary {% endtrans %}</h3>
    {{ form.sidebar }}
  </div>
  <div class="layout-region layout-region-checkout-footer">
    {{ form.actions }}
  </div>
</div>

Please notice that {{ form|without('sidebar', 'actions') }} renders everything except the individual elements.
Then after that (not sure if order is important though) the individual elements {{ form.sidebar }} and {{ form.actions }} are rendered.

I'll just post my own solution here, hope it can help someone.

I'm on Drupal 10, and not using a custom twig file. Still getting this error when attaching an #ajax behaviour to a form element.

I ended up manually setting the #ajax.url property to include the form_id:

/**
* Implements hook_form_FORM_ID_alter() for views_exposed_form.
*/
function my_module_form_views_exposed_form_alter(&$form, FormStateInterface $form_state, $form_id) {

      $uri = \Drupal\Component\Utility\UrlHelper::parse(\Drupal::request()->getRequestUri());
      $uri['query']['form_id'] = $form['#id'];
      $uri['query']['ajax_form'] = 1;
      $form['term_node_tid_depth']['#ajax'] = [
        'callback' => 'my_module_callback',
        'wrapper' => 'wrapper-container',
        'url' => Url::fromUri('internal:' . $uri['path']),
        'options' => ['query' => $uri['query'], 'fragment' => $uri['fragment']]
      ];

}