Using Ajax to upload file
<p>I have tried several variations of this (based on articles and other SO forums) to get this to work and I have narrowed it down to the fact that the data is getting lost when I try to send the form data to my PHP script. When I echo $_FILES["file"]["name"] it is empty. </p>

<p>I have tested and my ajax and php scripts are connected as I can return some data, just not any form data. This is obviously resulting in the files not being uploaded. </p>

<p>My current code is in reference to this forum (lee8oi's answer):
<a href="https://stackoverflow.com/questions/2320069/jquery-ajax-file-upload">jQuery Ajax File Upload</a>
I started a new forum because this question was asked 6 years ago.</p>

<p>html:</p>

<pre><code>&lt;form id="signUpForm" name="signUpForm"  action="../functions/newUser.php" method="post"&gt;
    &lt;input type="file" class="su_photo" name="file" id="user-photo"&gt;
    &lt;input type="submit" id="sign-up" type="button" class="btn btn-primary btn-sm pull-right" value="Get Started"&gt;
&lt;/form&gt;
</code></pre>

<p>js:</p>

<pre><code>  $('#signUpForm').on('submit',function(){
        var fd = new FormData( $('#signUpForm') );
        fd.append("label", "WEBUPLOAD");
        $.ajax({
          url: "../../functions/newUser.php",
          type: "POST",
          data: fd,
          processData: false,  // tell jQuery not to process the data
          contentType: false   // tell jQuery not to set contentType
        }).done(function( data ) {
            console.log("PHP Output:");
            console.log( data );
        });
        return false;
    });
</code></pre>

<p>php:</p>

<pre><code>   if ($_POST["label"]) {
      $label = $_POST["label"];
    }
    $allowedExts = array("gif", "jpeg", "jpg", "png");
    $temp = explode(".", $_FILES["file"]["name"]);
    $extension = end($temp);
    if ((($_FILES["file"]["type"] == "image/gif")
    || ($_FILES["file"]["type"] == "image/jpeg")
    || ($_FILES["file"]["type"] == "image/jpg")
    || ($_FILES["file"]["type"] == "image/pjpeg")
    || ($_FILES["file"]["type"] == "image/x-png")
    || ($_FILES["file"]["type"] == "image/png"))
    &amp;&amp; ($_FILES["file"]["size"] &lt; 200000)
    &amp;&amp; in_array($extension, $allowedExts)) {
        if ($_FILES["file"]["error"] &gt; 0) {
            echo "Return Code: " . $_FILES["file"]["error"] . "&lt;br&gt;";
        } else {
            $filename = $label.$_FILES["file"]["name"];
            echo "Upload: " . $_FILES["file"]["name"] . "&lt;br&gt;";
            echo "Type: " . $_FILES["file"]["type"] . "&lt;br&gt;";
            echo "Size: " . ($_FILES["file"]["size"] / 1024) . " kB&lt;br&gt;";
            echo "Temp file: " . $_FILES["file"]["tmp_name"] . "&lt;br&gt;";

            if (file_exists("uploads/" . $filename)) {
                echo $filename . " already exists. ";
            } else {
                move_uploaded_file($_FILES["file"]["tmp_name"],
                "uploads/" . $filename);
                echo "Stored in: " . "uploads/" . $filename;
            }
        }
    } else {
        echo $_FILES["file"]["name"];
    }
</code></pre>