How to upload file using pure vanilla javascript and php?

Question

I have an existing html form which uploads a file to the server as soon as the user selects an image file.

I have done something like this.

//html code
<input type="file" id="photo" name="photo" accept="image/*" />
// the usual html stuff

document.getElementById('photo').addEventListener("change",uploadImage);
function uploadImage()
{
    var xhr = new XMLHttpRequest();

    xhr.open("POST","/upload.php",true);    
    xhr.setRequestHeader("Content-type","image");

    var file = document.getElementById('photo').files[0];
    if(file)
    {
        var formdata = new FormData();
        formdata.append("pic",file);
        xhr.send(formdata);
    }
    xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200)
    {
             //some code
    }
};
}

But in my php file, I can't access this uploaded file. The $_POST array seems to be empty. I did a print_r for $_POST and it gave Array(). What am I doing wrong?

You do know that file uploads are in $_FILES, and not $_POST, corrrect? — Sean
– Sean, Commented Dec 31, 2015 at 16:29
You shouldn't need to set content-type as XHR should automatically detect that you have appended a file and use multipart/form-data. And php does not understand content-type image either which is why you are not getting anything — Patrick Evans
– Patrick Evans, Commented Dec 31, 2015 at 16:33

Community · Accepted Answer · 2017-05-23 11:45:39Z

10

You are using FormData which works very much the same way a normal form does.

First of all, in PHP files will not be in $_POST but instead in $_FILES, see the documentation.

What that documentation does mention, along with the $_FILES buffer, is that you need to use the multipart/form-data encoding, any FormData transferred through an XMLHttpRequest will have this set by default, though you may want to check it if the $_FILES remain empty. You should remove the xhr.setRequestHeader("Content-type","image"); and let the XHR object handle it, of - if that doesn't work - add

xhr.setRequestHeader("Content-type","multipart/form-data");

There is a pretty nice example right here at stackoverflow

edited May 23, 2017 at 11:45

CommunityBot

11 silver badge

answered Dec 31, 2015 at 16:39

Rogier Spieker

4,1972 gold badges25 silver badges26 bronze badges

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

1 Comment

John Strood Over a year ago

You are absolutely right. I removed it and now I have something in my $_FILES .

Collectives™ on Stack Overflow

How to upload file using pure vanilla javascript and php?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related