$_FILES empty and does not contain any data

Question

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.

setting the `enctype` on the form itself is useless if you're submitting with ajax. You need to set up the ajax request to do the same. google for "uploading files with ajax" there are a bunch of examples that show how to do it with `formData` instead of serialize. — I wrestled a bear once., Nov 15 '16 at 21:55
Ajax uploads of binary data requires some extra work, and browser support. What are you testing with? — Tieson T., Nov 15 '16 at 21:56

score 1 · Accepted Answer · edited May 23 '17 at 11:53

1

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

firstnameInputValue = $('#firstnameInput').val();
jQuery.ajax({
  url: 'php/upload.php',
  data: {
    file: data,
    firstname: firstnameInputValue
  },
  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.

edited May 23 '17 at 11:53

Community

1
1

answered Nov 15 '16 at 21:56

Yann Chabot

4,789
3
39
56

1

As an additional reference, here is a spectacular plugin for abstracting this behavior and ensuring consistency across browsers: http://malsup.com/jquery/form/. I've used it before and it's great. – War10ck Nov 15 '16 at 21:58
If you found it there, then this question is a duplicate of that question. – Charlotte Dunois Nov 15 '16 at 22:00
@CharlotteDunois yes I've flagged it already – Yann Chabot Nov 15 '16 at 22:01
@YannChabot thank you.. but now how can I append other input field with the file input? – bakursait Nov 16 '16 at 00:45
1

@bakursait look at the updated answer, you can send DATA as an object. And then, you can deal with it in your PHP script $_POST['firstname'], the key of the POST array will be the key you gave in the javascript object provided as the data parameter's value. – Yann Chabot Nov 16 '16 at 14:44
@YannChabot my friend, I tried it, but still did not work. So I tried to send only input file (as the old one) and it's work fine. – bakursait Nov 17 '16 at 14:19
@bakursait really? Damn ! I know I did exactly this script in the past and it worked well, I'll try to find that script back and come back here – Yann Chabot Nov 17 '16 at 14:39
@bakursait are you sure your firstnameInputValue does not have val in front? It has to be a global variable, local sometimes won't transfer in your ajax parameter – Yann Chabot Nov 17 '16 at 14:41
@YannChabot I'm sory, but what did you mean by "val in front"?!. secondly, I tried to declare this variable outside the ".click(function(){...});" but also it' s not working!! if you can help with that, I'll be appreciate it.. thank you any way – bakursait Nov 17 '16 at 21:04
sorry I meant var, like in var test = blabla; (Making it a local variable), try as a global at first to make sure it runs well – Yann Chabot Nov 17 '16 at 21:05
@YannChabot I made the variable global and then local as you suggest, but still did not work. the key "data" still returning an unexpected result. "data" in my case, cannot hold both "file, firstname". It only carries one of them. any other suggested will be welcomed. thanks!! – bakursait Nov 17 '16 at 23:38

$_FILES empty and does not contain any data

1 Answers1