Image upload via FormData API and AJAX is not working ($_FILES always empty)

Ok, after days and hours got it; my mistake was that I tried to access the uploaded image with the value of its name attribute, using:

$_FILES['imageupload']

Apparently, when you upload a file with the formData API, the key used to access your file is not the value of the name attribute of your input tag used for the upload anymore, but it gets overridden by the key you specified in your formdata of the respective element. Simply spoken, with:

<input type="file" name="imageupload" id="myElement"/>

In your HTML (name attribute actually becomes obsolete, you don’t even need to specify it), and:

myFormData.append('image',file);

In your JavaScript, you actually access your file in PHP on the server-side via:

$_FILES['image']

and NOT with:

$_FILES['imageupload']

Something else. If the script on your server-side is php, you should always specifiy files of a form data in this way in JavaScript:

data.append('image[]', file);

and NOT

data.append('image',file);

As I wrote above. This however changes nothing on how you access your file(s) in PHP, just use the way I’ve explained above.