I have an ExtJs form with an upload field. When I sumbit the form, the Accept-header is wrong. The response is JSON yet the sent Accept-header is:

Accept:text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

My educated guess is that it's the browsers default value.

In Chrome this results in a warning: Resource interpreted as Document but transferred with MIME type application/json.

In FireFox this results in a file download.

Conclusion: I have to change/set the Accept-header to application/json

Sencha's documentation sais it has a headers parameter, but I've tested and for fileupload it does not work. A ment said it's not supported. (found same result in another thread)

Any suggestions to get rid of the file download/ set the right Accept-header... It doesn't have to be a ExtJs sollution. If you can give me a plain javaScript solution for setting the accept header on a file upload form, I can probably mold it into the sencha framework.

UPDATE:

The ExtJS form submit:

form.submit({
    url: API_URLS.addDocument,
    waitMsg: 'Uploading your document...',
    headers: {
        "Accept": 'application/json' //doesn't work
    },
    success: function() {
        ...
    },
    failure: function(){
        ...
    }
});

Behind the scenes it creates an ordinary form similar to this:

<form action="API_URLS.addDocument" enctype="multipart/form-data" method="post">
    <input type="file"/>
</form>

which can be submitted through javaScript (submit())

I have an ExtJs form with an upload field. When I sumbit the form, the Accept-header is wrong. The response is JSON yet the sent Accept-header is:

Accept:text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

My educated guess is that it's the browsers default value.

In Chrome this results in a warning: Resource interpreted as Document but transferred with MIME type application/json.

In FireFox this results in a file download.

Conclusion: I have to change/set the Accept-header to application/json

Sencha's documentation sais it has a headers parameter, but I've tested and for fileupload it does not work. A ment said it's not supported. (found same result in another thread)

Any suggestions to get rid of the file download/ set the right Accept-header... It doesn't have to be a ExtJs sollution. If you can give me a plain javaScript solution for setting the accept header on a file upload form, I can probably mold it into the sencha framework.

UPDATE:

The ExtJS form submit:

form.submit({
    url: API_URLS.addDocument,
    waitMsg: 'Uploading your document...',
    headers: {
        "Accept": 'application/json' //doesn't work
    },
    success: function() {
        ...
    },
    failure: function(){
        ...
    }
});

Behind the scenes it creates an ordinary form similar to this:

<form action="API_URLS.addDocument" enctype="multipart/form-data" method="post">
    <input type="file"/>
</form>

which can be submitted through javaScript (submit())

• javascript
• extjs
• http-headers

• How are you performing the request can you paste some code? – Lloyd Commented Nov 12, 2012 at 13:48

1 Answer 1

The Accept header is just asking the server to respond with data of a given type. The * in the default header means "or anything else" (although the q value puts a lower priority then that).

If the response is JSON and you want JSON, then you don't need to touch the Accept header at all.

The problem is that, if I'm reading between the lines correctly, you are trying to perform an Ajax file upload using an iframe, and Firefox doesn't try to render JSON files as documents.

There are two ways around this.

1. Present the response as HTML instead of JSON and then extract the data from it using DOM
2. Use XMLHttpRequest 2 and the File API to upload the files instead of an iframe. (Note: This uses new APIs that have limited browser support).