sending file to upload script using ajax doesn't work

Question

I am trying to send an by the user dropped file to the php upload script using ajax. I don't know why it doesn't work, nothing happens if I drop an image.

( Why's no one answering? )

So this is the html part:

<div id="dropzone" class="dropzone" 
     ondragenter="return false;"
     ondragover="return false"
     ondrop="drop(event)">
    Drop here!
</div>

And this is the js function :

// drag n' drop
function drop(e) {
    e.preventDefault();

    var datei = e.dataTransfer.files[0];

    if(datei && datei.type.match("image/*")) {
        var reader = new FileReader();

        reader.onload = function(event) {
            var uploadfile = event.target.result;

            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'imgupload.php');

            var formdata = new FormData();
            formdata.append('upload', uploadfile);
            xhr.send(formdata);

        }

        reader.readAsDataURL(datei);
    }
}

So what am I doing wrong? What needs to be changed?

Thanks for your help!

Answer 1

It was quite easy. I should not have used FileReader() .

This is working:

// drag n' drop
function drop(e) {
    e.preventDefault();

    var datei = e.dataTransfer.files[0];

    if(datei && datei.type.match("image/*")) {

        var formdata = new FormData();
        formdata.append('upload', datei);

        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'imgupload.php');
        xhr.send(formdata);

    }
}