Upload file with Ajax XMLHttpRequest

Question

I am trying to send file with XMLHttpRequest with this code.

var url= "http://localhost:80/....";
$(document).ready(function(){
    document.getElementById('upload').addEventListener('change', function(e) {
        var file = this.files[0];
        var xhr = new XMLHttpRequest();
        xhr.file = file; // not necessary if you create scopes like this
        xhr.addEventListener('progress', function(e) {
            var done = e.position || e.loaded, total = e.totalSize || e.total;
            console.log('xhr progress: ' + (Math.floor(done/total*1000)/10) + '%');
        }, false);
        if ( xhr.upload ) {
            xhr.upload.onprogress = function(e) {
                var done = e.position || e.loaded, total = e.totalSize || e.total;
                console.log('xhr.upload progress: ' + done + ' / ' + total + ' = ' + (Math.floor(done/total*1000)/10) + '%');
            };
        }
        xhr.onreadystatechange = function(e) {
            if ( 4 == this.readyState ) {
                console.log(['xhr upload complete', e]);
            }
        };
        xhr.open('post', url, true);
        xhr.setRequestHeader("Content-Type","multipart/form-data");
        xhr.send(file);
    }, false);
});

I get this error: T

The request was rejected because no multipart boundary was found.

What am I doing wrong?

timdream · Accepted Answer · 2013-05-20 02:43:13Z

116

There is no such thing as xhr.file = file;; the file object is not supposed to be attached this way.
xhr.send(file) doesn't send the file. You have to use the FormData object to wrap the file into a multipart/form-data post data object:
```
var formData = new FormData();
formData.append("thefile", file);
xhr.send(formData);
```

After that, the file can be access in $_FILES['thefile'] (if you are using PHP).

Remember, MDC and Mozilla Hack demos are your best friends.

EDIT: The (2) above was incorrect. It does send the file, but it would send it as raw post data. That means you would have to parse it yourself on the server (and it's often not possible, depend on server configuration). Read how to get raw post data in PHP here.

edited May 20, 2013 at 2:43

answered Jun 2, 2011 at 9:09

timdream

5,9225 gold badges25 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

nkassis Over a year ago

xhr.send(file) is based on XHR2 which is a new version of the XMLHttpRequest object only avalable in some browsers.

timdream Over a year ago

@nkassis yeah, but it would send the file itself as the post body, instead of constructing a multipart postdata for server to parse.

andreszs Over a year ago

This method requires at least IE10 or Android 3.0.

Rick Over a year ago

@gmustudent Yes, keep appending. MDN has an excellent article about this topic Using FormData Objects

Abhi Over a year ago

Failed to execute 'append' on 'FormData': parameter 2 is not of type 'Blob'

|

Mostafa Mohammadzadeh · Accepted Answer · 2022-06-07 06:55:07Z

1

A more extended answer:

let formData = new FormData();
formData.append("fileName", audioBlob);

$.ajax({
    "url": "https://myserver.com/upload",
    "method": "POST",
    "headers": {
        "API-Key": "myApiKey",
    },
    "async":        true,
    "crossDomain":  true,
    "processData":  false,
    "contentType":  false,
    "mimeType":     "multipart/form-data",
    "data":         formData
}).done(function(response){

    console.log(response);

});

answered Jun 7, 2022 at 6:55

Mostafa Mohammadzadeh

92112 silver badges8 bronze badges

Collectives™ on Stack Overflow

Upload file with Ajax XMLHttpRequest

2 Answers 2

9 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related