I have no idea why i keep getting an empty $_FILES global array when i print it out. Ive been looking it over but i can't see where i am going wrong. because of that i have shown all of the code. if i use the button it reaches the server just fine and everything works out. but if i use the drag and drop then i get no files on the server? any idea why? when i print the array it is array(0).
I found one problem with the while loop which i now fixed still no files tho. just incase people are wondering if the post action is correct. The url is rewritten using mod_rewrite. It displays the correct php pages so i am assuming the the pages is reached. would mod_rewrite affect the uploading of files. I don't think so...?
<!DOCTYPE html>
<html>
<head>
<title>Music Upload</title>
<style>
#zone
{
height:300px;
width:500px;
border:1px solid black;
}
</style>
</head>
<body>
<div id="zone">
<legend>Drop a file here…</legend>
<p>Or click button to <em>Browse</em>…</p>
</div>
<form action="../receive/" method="POST" enctype="multipart/form-data">
<input type="file" name="file[]" multiple />
<input type="submit" value="submit" />
</form>
<script>
function dragover(event)
{
event.preventDefault();
console.log("drag event");
return false;
};
function dragend(event)
{
event.preventDefault();
console.log("drag end event");
return false;
};
function drop(event)
{
console.log("Files droped");
event.preventDefault();
var files=event.dataTransfer.files;
fileupload(files);
};
function isMp3(file)
{
console.log("Check if mp3 file");
mimeTypes=['audio/mpeg','audio/mp3','audio/x-mpeg-3'];
for(var i=0;i<mimeTypes.length;i++)
{
if(file.type==mimeTypes[i])
{
return true;
};
};
return false;
};
function fileupload(files)
{
if(files.length>0)
{
var formData= new FormData();
var i=0;
while(i<files.length)
{
var file= files.item(i);
if(isMp3(file)){
formData.append('file[]',files[i++]);
console.log('valid mp3');
}
}
var xhr = new XMLHttpRequest();
xhr.open('POST','/mymusic/receive',true);
xhr.onload=function()
{
if(this.status==200)
{
console.log('data sent');
console.log(this.responseText);
}else
{
console.log('data failed');
}
};
xhr.upload.onprogress=function(event)
{
if(event.lengthComputable)
{
var complete=Math.round(event.loaded*100/event.total);
console.log(complete+"%");
}
};
xhr.send(formData);
}
};
var dropArea=document.getElementById("zone");
dropArea.addEventListener("dragover",dragover,false);
dropArea.addEventListener("dragend",dragend,false);
dropArea.addEventListener("drop",drop,false);
console.log('script loaded');
</script>
</body>
</html>
<?php exit();?>
Here is the server file. it doesn't really matter but just incase
<?php
echo "server reached\n";
var_dump($_POST);
var_dump($_FILES);
exit();
?>
