problem when using ajax uploading a file with $http and setting ContentType to multipart/form-data

[jo32]

If I upload a file using the code blow:

$http({
    method: "POST",
    url: postUrl,
    headers: {
        'Content-Type': "multipart/form-data"
    },
    data: {
        font: file
    },
...

The ContentType of the request will set to be exactly "multipart/form-data", which is mising the boundary.

POST http://10.237.111.72:3000/font/b342ca2eb5af40fa3b68fb8f3003c710ca2faec0 HTTP/1.1 Host: 10.237.111.72:3000 Connection: keep-alive Content-Length: 5573 Accept: application/json, text/plain, / Origin: http://10.237.111.72:3000 User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.125 Safari/537.36 Content-Type: multipart/form-data Referer: http://10.237.111.72:3000/client/ Accept-Encoding: gzip,deflate,sdch Accept-Language: en-US,en;q=0.8,zh-CN;q=0.6,zh;q=0.4,zh-TW;q=0.2,ja;q=0.2

------WebKitFormBoundaryUqv1tZJx6huDrlLx ...

However, the code below works:

$http({
    method: "POST",
    url: postUrl,
    headers: {
        'Content-Type': undefined
    },
    data: {
        font: file
    },
...

POST http://10.237.111.72:3000/font/b342ca2eb5af40fa3b68fb8f3003c710ca2faec0 HTTP/1.1 Host: 10.237.111.72:3000 Connection: keep-alive Content-Length: 5573 Cache-Control: max-age=0 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,/;q=0.8 Origin: http://10.237.111.72:3000 User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.125 Safari/537.36 Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryRlmP43i8kQ0Jxj79 Referer: http://10.237.111.72:3000/client/ Accept-Encoding: gzip,deflate,sdch Accept-Language: en-US,en;q=0.8,zh-CN;q=0.6,zh;q=0.4,zh-TW;q=0.2,ja;q=0.2

------WebKitFormBoundaryRlmP43i8kQ0Jxj79

[jeffbcross]

You shouldn't set the Content-Type for File or any multipart upload, as the user-agent should set that itself. From the spec:

If data is a FormData

Let the request entity body be the result of running the multipart/form-data encoding algorithm with data as form data set and with UTF-8 as the explicit character encoding. Let mime type be the concatenation of "multipart/form-data;", a U+0020 SPACE character, "boundary=", and the multipart/form-data boundary string generated by the multipart/form-data encoding algorithm.

I'll close this for now, but if I'm wrong, please add a comment mentioning me, create a plunk demonstrating your problem, and why you need to set this header. And also include what browser(s) you're using.

[caitp]

It's not clear that they're talking about sending actual FormData objects, but emulating them (which might make sense for older browsers). I'm not sure how simple it is to emulate formdata uploads without the newer api though

[jo32]

There still some confusions using $http, if I omit the 'headers', the content type of the request will set to be application/json.

method: "POST",
url: fontUrl,
// headers: {
//     'Content-Type': undefined
// },
data: {
    font: file
},

POST http://10.237.111.72:3000/font/26c9d32b039766639e12cb8dd6ab0cab94525d71 HTTP/1.1 Host: 10.237.111.72:3000 Connection: keep-alive Content-Length: 5738 Accept: application/json, text/plain, / Origin: http://10.237.111.72:3000 User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.125 Safari/537.36 Content-Type: application/json;charset=utf-8 Referer: http://10.237.111.72:3000/client/ Accept-Encoding: gzip,deflate,sdch Accept-Language: en-US,en;q=0.8,zh-CN;q=0.6,zh;q=0.4,zh-TW;q=0.2,ja;q=0.2

------WebKitFormBoundarysjzu8VTDq6f3Hg9o

Sorry for not having the time creating a plunk.

[caitp]

@jo32 well you're passing an object { "font": <BLOB> } in send(), it's not surprising the browser isn't setting it correctly for you.

Try something more like this.

var data = new FormData();
data.append('fieldName', file);
$http({
  method: 'post',
  data: data
});

I think that should do what you're expecting it to do

[caitp]

If you need to support ancient browsers, that's a research project, because I'm not really sure how to emulate form-data correctly without using the FormData object --- but this strategy will probably work for modern ones (at least, it will work for modern browsers with regular XHR, not sure if we're doing something in angular to break that)