Headers not set using Ext.Ajax.request form upload

Question

I want to upload a file using Ext.Ajax.request. Therefore I add the id of the file-input-field (form: formId). I also want to add some headers (Accept, Authorization, ...) to the request, which works when I don't add the form parameter. However when the form parameter is set my headers will be ignored for whatever reason.

I use ExtJs 6.2 modern.

How can I add headers when a form parameter is set to the request?

Ext.Ajax.request({
            cors: true,
            useDefaultXhrHeader: false,
            method: 'POST',
            url: someUrl,
            headers: {
                'Accept': 'application/json',
                'Authorization': someString,
                'usertoken': someString
            },
            params: {
                name: fileName,
                override: false
            },
            isUpload: true,
            form: formId
        })

score 0 · Answer 1 · answered Feb 26 '17 at 12:53

When you make a request with the form option, its not actually an Ajax request, and as such you can't pass extra headers.

From Docs

File uploads are not performed using normal "Ajax" techniques, that is they are not performed using XMLHttpRequests. Instead the form is submitted in the standard manner with the DOM element temporarily modified to have its target set to refer to a dynamically generated, hidden which is inserted into the document but removed after the return data has been gathered.

This is terrible. What happens if you need to XSRF-TOKEN? – John Smith Jun 03 '21 at 04:18 — John Smith, Jun 03 '21 at 04:18

Headers not set using Ext.Ajax.request form upload

1 Answers1