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

Questions
1

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

HTML

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

…

JS

var userid = localStorage.getItem("user_id");
var imageUpload = $$('#profile-img [name="imageupload"]').val();
console.log(imageUpload) **// shows: C:\fakepath\my-photo.jpg**
app.request({
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.

2

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


https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/file

3

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

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

with
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.

4

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: