I would like to upload multiple files using a post request of type multipart/form-data
and for each file I need to know the file size (content-length) on the server side.
To construct the POST
request in javascript
I use a FormData
object and append the File objects for the upload to it. This works fine, but only a Content-type
header is added to each part, in addition to the Content-Disposition
header, but no Content-length
header, though this information is available from the individual File objects.
Is there a way to achieve that that Content-length
headers are set for every part from the FormData
object when sending the request?
Below is the code I use, including my work-around to the problem. It actually uses angular-js
to send the request, but I think this is not relevant to the question.
var form = new window.FormData();
form.append('additional-field-1', new Blob(['some plain text'], {type : 'text/plain'}));
for (var file in fileList) {
var fileObj = fileList[file];
var count = 1 + parseInt(file, null);
form.append('file-size-' + count, new Blob([fileObj.size], {type : 'text/plain'}));
form.append('file-' + count, fileObj);
}
$http.post(url, form, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
}).success(.....
Content-Length is the number of bytes that follow the headers.
Multipart Content-Type headers identify multipart messages. They require that a subtype and other elements be included in the header. multipart/alternative [RFC1521] The multipart/alternative content type is used when the same information is presented in different body parts in different forms.
multipart/form-data contains boundary to separate name/value pairs. The boundary acts like a marker of each chunk of name/value pairs passed when a form gets submitted. The boundary is automatically added to a content-type of a request header.
A multipart formpost is what an HTTP client sends when an HTML form is submitted with enctype set to "multipart/form-data". It is an HTTP POST request sent with the request body specially formatted as a series of "parts", separated with MIME boundaries.
I don't believe there is a way to actually add a custom header for each form data element. However why don't you add it to the content disposition header, as part of the file name:
data = new FormData();
data.append('additional-field-1', new Blob(['some plain text'], {type : 'text/plain'}));
for (var i = 0; i< $( '#file' )[0].files.length; i++) {
var fileObj = $( '#file' )[0].files[i];
data.append( '{ size : ' + fileObj.size + ' }' , $( '#file' [0].files[i], $( '#file' )[0].files[i].name );
}
I'm not sure how you are handling this on the server, but the request would look like this:
------WebKitFormBoundarysZxMHYOzMkqDmOvR
Content-Disposition: form-data; name="additional-field-1"; filename="blob"
Content-Type: text/plain
------WebKitFormBoundarysZxMHYOzMkqDmOvR
Content-Disposition: form-data; name="{ size : 22984 }"; filename="MatrixArithmetic.vshost.exe"
Content-Type: application/x-msdownload
------WebKitFormBoundarysZxMHYOzMkqDmOvR
Content-Disposition: form-data; name="{ size : 187 }"; filename="MatrixArithmetic.vshost.exe.config"
Content-Type: application/xml
------WebKitFormBoundarysZxMHYOzMkqDmOvR--
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With