Basic jQuery Ajax file upload with PHP - php

Question

I've been trying to get a basic file upload through an ajax form without success. I'm looking for the bare minimum basics and nothing I have found through searching has worked.
I've been messing about with this for about 8 hours and have tried at least a dozen different methods but have not been able to get anything successfully uploaded.
I have narrowed down my code to the most bare necessities as best I can.
My JavaScript goes like this:
function uploadFile(param) { //Upload File
$.ajax({
url: "modules/upload/upload.php",
type: "post",
data: new FormData($(param)[0]),
cache: false,
contentType: false,
processData: false,
success: function (data) {
console.log(data);
}
});
}
which is called with:
$(".app-canvas").on('change', ".fileUpload", function () {
uploadFile($(this));
});
and the PHP:
<?php
$sourcePath = $_FILES['driver_licence_image']['tmp_name']; // Storing source path of the file in a variable
$targetPath = "uploads/".$_FILES['driver_licence_image']['name']; // Target path where file is to be stored
move_uploaded_file($sourcePath,$targetPath) ; // Moving Uploaded file
?>

Answer 1

FormData takes an HTMLFormElement as an argument to its constructor, you're passing what looks a file input. To add a file from a form element you have to use append.
$(".app-canvas").on('change', ".fileUpload", uploadFile);
function uploadFile() { //Upload File
var fd = new FormData();
fd.append('driver_licence_image', this.files[0]);
$.ajax({
url: "modules/upload/upload.php",
type: "post",
data: fd,
cache: false,
contentType: false,
processData: false,
success: function (data) {
console.log(data);
}
});
}
p.s. $(param)[0] is equivalent to param(when param is a dom node), so please don't do that.