$_FILES global variable not able to receive data sent from XMLHttpRequest()

Question

I am trying to upload a file to a folder in my server using XMLHttpRequest() and PHP. Here is the HTML file fu2.html:

<form action="fu2.php" method="POST" enctype="multipart/form-data">
    <input type="file" name="file" id="file"><br><br>
    <input type="button" value="Upload" onclick="loadFile()">
</form>
<script>
function loadFile() {

    var myFileList = document.getElementById("file").files;
    var fileToUpload = myFileList[0];
    alert(fileToUpload.name+","+fileToUpload.tmp_name);
    var xhr = new XMLHttpRequest();
    xhr.open("POST", 'http://10.192.44.143/pgadmsn/fu2.php',false);
    xhr.send(fileToUpload);
    alert(xhr.responseText);
}
</script>

The php file fu2.php is :

<?php
if(isset($_FILES["fileToUpload"])){
$name = $_FILES["fileToUpload"]["name"];
$tmp_name = $_FILES['fileToUpload']['tmp_name'];

if (isset ($name)) {
    if (!empty($name)) {

    $location = 'uploads/';

    if  (move_uploaded_file($tmp_name, $location.$name)){
        echo 'Uploaded';    
        }

        } else {
          echo 'please choose a file';
          }
    }
    else{
        echo "name not set";
    }
}
else echo "FILES not set!";
?>

There are 2 problems that I am facing:

In alert(fileToUpload.name+","+fileToUpload.tmp_name);, fileToUpload.tmp_name is coming to be undefined.
The major problem is that in fu2.php file where isset($_FILES["fileToUpload"]) is evaluating to false because I am getting FILES not set! as xhr.responseText.

What am I doing wrong here?

form_data.append('file', file_data); – Doug Jun 24 '16 at 16:15 — Doug, Jun 24 '16 at 16:15
Are u suggesting to use FormData object? – Ankit Shubham Jun 24 '16 at 16:17 — Ankit Shubham, Jun 24 '16 at 16:17

score 1 · Accepted Answer · answered Jun 24 '16 at 20:10

Here is the flaws :

1). You're referencing an unexisting component name. It's $_FILES["file"] not $_FILES["fileToUpload"]

2). Basically you're transmitting binary data to server via Ajax, you need mechanism to wrap the file into readable stream it can be achieved using FormData object.

Here I fixed your codes:

fu.html

<form action="fu2.php" method="POST" enctype="multipart/form-data">
    <input type="file" name="file" id="file"><br><br>
    <input type="button" value="Upload" onclick="loadFile()">
</form>
<script>
    function loadFile() {

        var myFileList = document.getElementById("file").files;
        var fileToUpload = myFileList[0];

        var fd = new FormData();
        fd.append("file", fileToUpload);
        alert(fileToUpload.name);
        var xhr = new XMLHttpRequest();
        xhr.open("POST", 'http://10.192.44.143/pgadmsn/fu2.php',false);
        xhr.send(fd);
        alert(xhr.responseText);
    }
</script>

fu.php

<?php
if(isset($_FILES["file"])){
    $name = $_FILES["file"]["name"];
    $tmp_name = $_FILES['file']['tmp_name'];

    if (isset ($name)) {
        if (!empty($name)) {

            $location = 'uploads/';

            if  (move_uploaded_file($tmp_name, $location.$name)){
                echo 'Uploaded';
            }

        } else {
            echo 'please choose a file';
        }
    }
    else{
        echo "name not set";
    }
}
else echo "FILES not set!";
?>

If I recall I saw your previous similar question, at the time I wanted to answer it but suddenly I got problem with my internet connection. :D — Fevly Pallar, Jun 24 '16 at 20:37
Oh! You did see that! As I said, I was literally going nuts over this for last 2 days! I guess the contents over net are a bit incomplete as for AJAX, all I could find was client-side stuff and they totally ignored the php code! If I used to get PHP code, then it would not be AJAX stuff! — Ankit Shubham, Jun 24 '16 at 20:48

$_FILES global variable not able to receive data sent from XMLHttpRequest()

1 Answers1