(v3) file upload in form is not passing to backend server

I have a form where user can upload/ change their profile picture. The form is passing all the data to php-server except the image. On php side, it shows that $_FILES image is undefined


    <form id="profile-img" enctype="multipart/form-data">
    <input type='file' name="imageupload"/>


var userid = localStorage.getItem("user_id");
var imageUpload = $$('#profile-img [name="imageupload"]').val();
console.log(imageUpload) **// shows: C:\fakepath\my-photo.jpg**
url: 'http://localhost/upload-image.php',
method: "POST",
data: {
userid: userid, 
imageUpload: imageUpload
cache: false,
contentType: "multipart/form-data",
processData: true,

success: function(response) {
.......   .......   .....

On PHP page

$userid = $_POST["userid"];  **//THIS WORKS FINE**
$target_dir = "../upload/";
$target_file = $target_dir.basename($_FILES["imageUpload"]["name"]); 

//Undefined index: imageUpload

Please suggest how it is done.

Input type=“file” doesn’t work like this, File values is in input.files object.


Please explain, I did not understand.
Do you mean to say that I should replace this line -

var imageUpload = $$('#profile-img [name="imageupload"]').val();

var imageUpload = $$('#profile-img [input.files]').val();

If yes, then yes I did it but still same issue. Console.log is showing the value of imageUpload as -C:\fakepath\my-photo.jpg. But this value is not passing to php server side.

p.s. I am not very good in javascript, so little explanation in answer will be helpful. Thanks.

Sorry, I got it what you mean. I got the detailed way to do it from the reference link you posted. Thanks. The issue is solved now :grinning: