File Upload Failure

Question

I am trying to upload file using Ajax to a Nodejs Server.

Ajax Code:

var url = 'http://<ip:port>/upload/';
var formValues = $("#files").get(0).files;
$.ajax({
    url: url,
    type: 'POST',
    data: formValues,
    processData: false,
    cache: false,
    beforeSend: function( xhr ) {
        xhr.setRequestHeader('content-type', 'multipart/form-data');
    },
    success: function (data) {
        console.log("Store details: %j", data);
        Backbone.history.navigate('store');
        window.location.reload();
    }
});

I am using busboy in the Node Server and it is giving me this error when i trying to parse the request headers to initialize the busboy object.

Error: Multipart: Boundary not found
at new Multipart (/home/ubuntu/MoojicDashboard/node_modules/busboy/lib/types/multipart.js:58:11)
at Multipart (/home/ubuntu/MoojicDashboard/node_modules/busboy/lib/types/multipart.js:26:12)
at Busboy.parseHeaders (/home/ubuntu/MoojicDashboard/node_modules/busboy/lib/main.js:62:22)
at new Busboy (/home/ubuntu/MoojicDashboard/node_modules/busboy/lib/main.js:21:10)

But if i don't set the content-type to multipart/form-data the request is discarded by the busboy.

I even tried using multer package but it also give me the same error.( Later i found out it was build on busboy.)

I even tried setting contentType to false.

$.ajax({
            url: url,
            type: 'POST',
            data: formValues,
            processData: false,
            cache: false,
            contentType: false,
            success: function (data) {
                console.log("Store details: %j", data);
                Backbone.history.navigate('store');
                window.location.reload();
            }
        });

to force JQuery not to set default content-type but it didn't work too.

Setting contentType: 'multipart/form-data' also not worked and give me the same 'Multipart: Boundary not found' error. So anybody can help me out to get out of this error.

score 2 · Accepted Answer · edited May 23 '17 at 10:33

2

You should use the FormData API instead of trying to do it yourself. Then when you pass your FormData instance to $.ajax(), it will automatically set the right headers for you. Here is an example.

edited May 23 '17 at 10:33

Community

1
1

answered Sep 15 '14 at 02:00

mscdex

104,356
15
192
153

score 1 · Answer 2 · edited May 23 '17 at 12:18

It is better to use FormData with MIME-Type set to 'multipart/form-data'. The key/values from FormData is put in form of a query and is seperated by '&'. This is fixed and known to server.

Example: category=laptop&brand=apple&price=150000,250000

But with files this is not the case so we have to provide some way so that code on server can seperate out the file from other data.

For this we provide a boundary value which marks the start and end of file data.

Use contentType: 'multipart/form-data;boundary=abc'.

Clearly the error shows 'Multipart: Boundary not found' and hence the boundary is missing

Providing the boundary solves the problem.

For More details see : https://stackoverflow.com/a/20321259

And if this does not work then try setting contentType: false

File Upload Failure

2 Answers2