I am making a html5 drag and drop uploader with jquery, below is my code so far, the problem is that I get an empty array without any data. Is this line incorrect to store the file data - fd.append('file', $thisfile);?

$('#div').on(
    'dragover',
    function(e) {
        e.preventDefault();
        e.stopPropagation();
    }
);

$('#div').on(
    'dragenter',
    function(e) {
        e.preventDefault();
        e.stopPropagation();
        }
    );

$('#div').on(
    'drop',
        function(e){
            if(e.originalEvent.dataTransfer){
                if(e.originalEvent.dataTransfer.files.length) {
                    e.preventDefault();
                    e.stopPropagation();

                    // The file list.
                    var fileList = e.originalEvent.dataTransfer.files;
                    //console.log(fileList);

                    // Loop the ajax post.
                    for (var i = 0; i < fileList.length; i++) {

                        var $thisfile = fileList[i];
                        console.log($thisfile);

                        // HTML5 form data object.
                        var fd = new FormData();
                        //console.log(fd);

                        fd.append('file', $thisfile);

                        /*
                        var file = {name: fileList[i].name, type: fileList[i].type, size:fileList[i].size};

                        $.each(file, function(key, value) {
                            fd.append('file['+key+']', value);
                        })
                        */

                        $.ajax({
                           url: "upload.php",
                           type: "POST",
                           data: fd,
                           processData: false,
                           contentType: false,
                           success: function(response) {
                               // .. do something
                           },
                           error: function(jqXHR, textStatus, errorMessage) {
                               console.log(errorMessage); // Optional
                           }
                        });


                    }

                    /*UPLOAD FILES HERE*/
                    upload(e.originalEvent.dataTransfer.files);
            }
        }
    }
);

function upload(files){
    console.log('Upload '+files.length+' File(s).');
};

then if I use another method is that to make the file data into an array inside the jquery code,

var file = {name: fileList[i].name, type: fileList[i].type, size:fileList[i].size};

$.each(file, function(key, value) {
    fd.append('file['+key+']', value);
});

but where is the tmp_name data inside e.originalEvent.dataTransfer.files[i]?

php,

print_r($_POST);

$uploaddir = './uploads/'; 

$file = $uploaddir . basename($_POST['file']['name']); 


if (move_uploaded_file($_POST['file']['tmp_name'], $file)) { 
    echo "success"; 
} else {
    echo "error";
}

as you can see that tmp_name is needed to upload the file via php...

html,

<div id="div">Drop here</div>