PDA

View Full Version : How can I add headers to getForm.Submit() calls?



KallDrexx
19 Jan 2011, 9:43 AM
I have come up with an issue that certain headers are not being sent when I call getForm.submit(). For example, the "X-Requested-With" header is not being sent, which is causing Asp.Net to not detect the form submission request as an Ajax request, which I need it to do for various reasons (e.g. send errors via Json and not error 500 Html pages).

I tried adding "headers: { 'X-Requested-With' : 'XMLHttpRequest' }," to my submit() call, but this did not work. I then tried to modify the default headers with "Ext.Ajax.defaultHeaders = { 'My-Test': 'Test worked' };". When I did this, all my requests are correctly sending the 'My-Test' header except for form submissions.

Does anyone know how I can correctly add the X-Requested-With header to form submission calls?

KallDrexx
21 Jan 2011, 7:54 AM
So is this not possible? Is this a bug or a design decision?

darthwes
21 Jan 2011, 8:13 PM
MMM, Why don't you just do an ajax request then?


var frmVals = this.getForm().getValues();
Ext.Ajax.request({
params: frmVals,
url: this.url,
...
});

not so bad, right?

KallDrexx
22 Jan 2011, 6:44 AM
How do I upload a file with an Ajax request?

Condor
22 Jan 2011, 8:10 AM
You can't upload files with an Ext.Ajax request.

You have to use a form submit, which doesn't support setting headers.

donp
24 Feb 2011, 1:48 PM
But, the form object docs say that it does support headers.


doAction (http://dev.sencha.com/deploy/dev/docs/source/BasicForm.html#method-Ext.form.BasicForm-doAction)( String/Object actionName, [Object options] ) : BasicForm
Performs a predefined action (Ext.form.Action.Submit (http://dev.sencha.com/deploy/dev/docs/output/Ext.form.Action.Submit.html) or Ext.form.Action.Load (http://dev.sencha.com/deploy/dev/docs/output/Ext.form.Action.Load.html)) or a custom extension of Ext.form.Action (http://dev.sencha.com/deploy/dev/docs/output/Ext.form.Action.html) to perform application-specific processing.Parameters:

actionName : String/ObjectThe name of the predefined action type, or instance of Ext.form.Action (http://dev.sencha.com/deploy/dev/docs/output/Ext.form.Action.html) to perform.
options : Object(optional) The options to pass to the Ext.form.Action (http://dev.sencha.com/deploy/dev/docs/output/Ext.form.Action.html). All of the config options listed below are supported by both the submit (http://dev.sencha.com/deploy/dev/docs/output/Ext.form.Action.Submit.html) and load (http://dev.sencha.com/deploy/dev/docs/output/Ext.form.Action.Load.html) actions unless otherwise noted (custom actions could also accept other config options):

url : StringThe url for the action (defaults to the form's url (http://dev.sencha.com/deploy/dev/docs/output/Ext.form.BasicForm.html#Ext.form.BasicForm-url).)
method : StringThe form method to use (defaults to the form's method, or POST if not defined)
params : String/ObjectThe params to pass (defaults to the form's baseParams, or none if not defined)
Parameters are encoded as standard HTTP parameters using Ext.urlEncode (http://dev.sencha.com/deploy/dev/docs/output/Ext.html#Ext-urlEncode).

headers : ObjectRequest headers to set for the action (defaults to the form's default headers)





If we are using JSON, how are we supposed to set the Content-type header to be applicatoin/json, when the form is submitted? If we can't do this, then we can't use the form's submit action.

Don P.

Condor
24 Feb 2011, 11:42 PM
The missing piece of information here is that the 'headers' option is only valid when not doing a file upload.

TonySteele
30 Apr 2012, 2:17 PM
'
The missing piece of information here is that the 'headers' option is only valid when not doing a file upload' its still a missing bit of information! perhaps you should add it. I have just spent an hour trying to do this so that asp.net web.api will return json in response to a file upload.

harel
20 Aug 2013, 1:52 AM
Without headers in the file upload anything to do with header based authentication (api calls etc.) that require a file upload is just not possible...

trenty
17 Oct 2013, 12:36 AM
[SOLVED]
The issue described below seems solved for us.
The Spring Security Doc says, that you can't set CSRF-Token as a request param for Ajax requests, so we did it in the HTTP header. But in case of normal form submits it works. (submits with file upload fields are normal form submits (no Ajax), as Condor said.) :)
http://spring.io/blog/2013/08/21/spring-security-3-2-0-rc1-highlights-csrf-protection

Hi,

we also need to set additional HTTP Headers (X-CSRF-TOKEN) for an file upload to work with our Spring Security configuration.

Does anyone have a workaround or knows an approach how to fix it?


Thank you very much!

craig2005
15 Aug 2015, 7:20 PM
Stuck on this issue too. We have spring security checking headers as well.

Condor, out of curiosity, why can't we send headers for file uploads? I'm sure there is a logical reason, I was just wondering what it was.

valio
8 Sep 2015, 6:36 AM
why can't we send headers for file uploads? I'm sure there is a logical reason, I was just wondering what it was.

The reason appears to be IE9 support

(http://caniuse.com/#search=FormData)More specifically:
If a form has an upload field, Ext.form.Basic.hasUpload (http://docs.sencha.com/extjs/5.1/5.1.1-apidocs/#!/api/Ext.form.Basic-method-hasUpload) will return true.
This method is required as there's no possibility for legacy browsers to provide upload data via XHR (http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously). Thus in the case of an upload field, a hidden fake form is created and submitted to the server. However with this approach the headers that get sent can not be modified (http://stackoverflow.com/questions/9516865/how-to-set-a-header-field-on-post-a-form).

craig2005
8 Sep 2015, 8:30 AM
thanks for the reply. "IE support" is the story of our lives :-)

That being said, we should at least have the option or a flag that says ignore legacy. I know bootstrap 4 will be dropping support for older IE versions. Its just something that has to happen.

webbasan
4 Aug 2016, 4:49 AM
Argh!

This does mean also that one can't set the "x-frames-allow-from" header for file uploads, which is required to circumvent the issue that the hidden frame might be used for an upload to a different server than that of the main application!

Bad luck...

webbasan

valio
4 Aug 2016, 5:47 AM
This does mean also that one can't set the "x-frames-allow-from" header for file uploads, which is required to circumvent the issue that the hidden frame might be used for an upload to a different server than that of the main application!

Well; there is no way with the current ExtJS implementation.
However it can be done, if you drop support for legacy browsers (e.g. <IE9).

In order to do that you would have to implement one to several overrides; if I am not mistaken (haven't tried) on the Ext.form.Basic.submit method (ignore options.standardSubmit || me.standardSubmit, instead call doAction only with 'directsubmit' or 'submit') and then call the Ext.form.Basic.submit (http://docs.sencha.com/extjs/5.1.1/Ext.form.Basic.html#method-submit) method on the "save" button (or whatever you call it) click event, where you set the intended "headers" object within the options parameter according to the description in Ext.form.Basic.doAction (http://docs.sencha.com/extjs/5.1.1/Ext.form.Basic.html#method-doAction) method.
Probably the file upload fields need overrides as well, but that shouldn't be a hard problem either I guess, as long as the request looks as described in the preferred answer here (http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously).

There would be actually a good reason to drop legacy support and go for HTML5 XHR uploads: namely that you can track progress of the actual current file upload percentage and report that to the user (can be important if your users may upload larger files and/or use networks with a low bandwitdh).

One additional small note (*scnr*): if you want a really user-friendly solution, you may consider implementing DropzoneJS (http://www.dropzonejs.com/) or a similar library as ExtJS component. I have done that, but I am not sure if I am allowed to share the code yet. It is not that hard however. It supports multi-upload capabilities with drag & drop, as well as file previews.