PHP File Upload Undefined Index error

Question

I'm extremely confused by this. I have a form in which a user has the option to upload a resume... easy enough.

Unfortunately, every time I try to validate the file, I keep getting an 'Undefined Index' error, meaning the $_FILES[] array is empty. I have upped my upload_max_filesize & post_max_size and ensured file uploads were turned on in my php.ini file and restarted apache but still the array returns empty.

Here is my form HTML:

<form enctype="multipart/form-data" class="form-horizontal" id="contact-form" name="contact-form" action="/includes/mail/" method="post">
    <div id="resume-input" class="form-group">
        <label class="control-label col-sm-2">Upload Resume</label>
        <div class="col-sm-10">
            <input type="file" name="resume" id="resume-file" class="form-control" />
        </div>
    </div>
</form>

and here is the PHP checking for the file:

if(!isset($_FILES['resume'])) {
    echo "<span class='error'>Please upload your resume.</span><br />";
    return false;
} else {
    // Validate uploaded file
    $fileName = $_FILES['resume']['name']; // file name
    $fileExt = substr($fileName, strrpos($fileName, '.') + 1); // file extension
    $fileSize = $_FILES['resume']['size']/1024; // size in KBs
    $filePath = $_FILES['resume']['tmp_path']; // file path
}

Obviously this isn't the entire script, but this is the only part that doesn't work. I have tried var_dump($_FILES); at the beginning of the script and that returns array(0) { }

Can anyone see from what I have posted why this file upload isn't working?

PS: The form is being submitted via jQuery AJAX. I don't know if it's necessary or not, but here is that AJAX submit:

$.ajax({
    type: "POST",
    url: url,
    data: contactForm.serialize(), // serializes the form's elements.
    success: function(data) {
        returnMsg.fadeIn();
        returnMsg.html(data); // show response from the php script.
        if(data.indexOf("success") + 1) {
            $('form#contact-form input[type="text"],input[type="email"],textarea').val('');
            $('form#contact-form select[name="subject"]').val('Select a subject');
        } 

    }
});

Thanks for taking a look!

[click here][1] to see the answer ... ...... ..... [1]: http://stackoverflow.com/questions/2320069/jquery-ajax-file-upload — Fisherman, Apr 10 '14 at 21:01
http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery?rq=1 — Musa, Apr 10 '14 at 21:02
Check `var_dump($_SERVER['REQUEST_METHOD'])`, make sure it says `POST`. If it says `GET`, then you've got a full-blown HTTP redirect occuring and landing on your upload script as a GET request, meaning the upload is lost. Becase as written right now, your html looks fine, and your php should be working. Plus, you cannot upload files through standard AJAX. — Marc B, Apr 10 '14 at 21:02

jackfrankland · Accepted Answer · 2014-04-11T15:01:50.027

The problem is how you're uploading it. data: contactForm.serialize() just won't work with files. You've got the correct form, but by replacing it with a jQuery AJAX request, you completely change the request.

It is possible to use AJAX to upload files in HTML5, and you don't need the form:

document.querySelector('#resume-file').addEventListener('change', function(e) {
    var file = this.files[0];
    var fd = new FormData();
    fd.append("resume", file);
    var xhr = new XMLHttpRequest();
    xhr.open('POST', url, true);

    xhr.onload = function() {
        if (this.status == 200) {
            // success!!!
        }
    }

    xhr.send(fd);
}

For more information see: MDN - Using FormData objects

EDIT:

Here's how to do it in jQuery too (taken from MDN docs):

var fd = new FormData(document.getElementById("fileinfo"));
fd.append("CustomField", "This is some extra data");
$.ajax({
  url: "stash.php",
  type: "POST",
  data: fd,
  processData: false,  // tell jQuery not to process the data
  contentType: false   // tell jQuery not to set contentType
});

Excellent! Thank you. I wasn't aware we couldn't upload files via jQuery AJAX — Ty Bailey, Apr 11 '14 at 14:58
No problem. It is actually possible to do it in jQuery, just with slightly different options. It explains how in the link I posted, but I'll reference it in the answer too. Cheers. — jackfrankland, Apr 11 '14 at 15:00
One of the biggest advantages to doing it using the XMLHTTPRequest object is the ability to listen to upload progress events, which allows you to have a progress bar. — jackfrankland, Apr 11 '14 at 15:06

PHP File Upload Undefined Index error

1 Answers1

Linked