bakursait bakursait - 21 days ago 5
Ajax Question

$_FILES empty and does not contain any data

before I describe my problem, I really did search on the internet and here in this website to find the solution. I found a question that is really similar to my problem, but the given answer is not even close, so I'm here to write my problem.

the problem is:

I've

form
that has some input fields plus
input type='file'
for uploading images. this form inside
jquery-ui dialog
, when I submit the
form
, all fields response as it should be, except
input type='file'
for images it never carry any data of the image.

here is the code that explain my problem:

update_form.php:

<form action="" class="fixed-dialog" method="post" id="customForm" enctype="multipart/form-data">
<input type="file" class="form-group input-field" accept="image/jpg,image/png,image/jpeg,image/gif" id="image" name="image" />
</form>


When the user click
Send
button, this code will fire (JQuery):

$("#send").click(function(){
var all = $("#customForm").serialize();
//the following condition is to check if all input fields were filled.
$.ajax({
type: "POST",
url: "includes/update_user_info.php",
data: all,
success: function(data){
if(data == 1){
alert("You have update data successfuly");
window.location = "index.php";
}else{
alert("there is an error");
}
}
});
});


here is update_user_info.php: to move the image from tmp file to other file

$user_image = &$_FILES['image']['name'];
$user_image_type = &$_FILES['image']['type'];
$user_temp_image = &$_FILES['image']['tmp_name'];
if(isset($_FILES['image'])){
$_SESSION['errors'] = "it's set.\n";

//the next statement is empty, it should carry some data.
$_SESSION['errors'] .= $_FILES['image']['tmp_name'];
}else{
$_SESSION['errors'] = "NOT SET YET!!!";
}

$target = "./images/users_img/".$user_image;
$source = $_FILES['image']['tmp_name'];
// if($_FILES['image']['error'] == 0){
move_uploaded_file($_FILES['image']['tmp_name'],$target);
$_SESSION['errors'] .= "Target is: ".$_FILES['image']['tmp_name'];
if(is_uploaded_file($_FILES['image']['tmp_name'])){
$_SESSION['errors'] .= "Target is: it Worked";
echo 1;
}else{
$_SESSION['errors'] .= "Target is: NOT WORKING";
echo 1;
}
// }else{
// $_SESSION['errors'] .= "Something went Wrong!!";
// echo 1;
// }


when I tried to echo
$_FILES['image']['tmp_name']
, or
['name']
or
['error']
, it always gives me an error:

Undefined index: name/tmp_name/or error,

isset($_FILES['image'])
= TRUE.
, BUT:

$_FILES['image']['name']
is empty.


any help will be appreciated.

thank you.

Answer

I don't believe you can send file input this way (just by serializing).

Here is what you have to do:

var data = new FormData();
jQuery.each(jQuery('#file')[0].files, function(i, file) {
  data.append('file-'+i, file);
});

And then you can send them by ajax

jQuery.ajax({
  url: 'php/upload.php',
  data: data,
  cache: false,
  contentType: false,
  processData: false,
  type: 'POST',
  success: function(data){
    alert(data);
  }
});

Found it there: Sending multipart/formdata with jQuery.ajax

Dealt with this in the past.