FormData sends files but $_FILE is empty

StackOverflow https://stackoverflow.com/questions/16546385

Question

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&hellip;</legend>
            <p>Or click button to <em>Browse</em>&hellip;</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();
?>
Was it helpful?

Solution

Try it without the rewrite, that is most probably the issue.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top