File upload not working in PHP , $_POST['file'] , not able to extract file

Question

I have the following HTML code:

<form action="mail/filesend.php" method="POST" accept-charset="utf-8" enctype="multipart/form-data" validate>
    <div class="input-wrpr">
        <input type="file" name="files[]">
    </div>
    <button type="submit">
        Send File
    </button>       
</form>

And then the following file upload code in jQuery:

$(function () {


    let files = null;

    $('input[type="file"]').on('change' , (e) => {
        files = e.target.files;
    });


    $('form').submit(function(e){
        e.stopPropagation();
        e.preventDefault();

            let data = new FormData();
            // files = $('input[type="file"]')[0].files;   

            $.each(files, function(key, value){
                data.append(key, value);
            });

            console.log(data.getAll('0'));
            // console.log(data);

            $.ajax({
                type: $(this).attr('method'),
                url : $(this).attr('action'),
                data: data,
                cache: false,
                dataType: 'json',
                processData: false, // Don't process the files
                contentType: false, // Set content type to false as jQuery will tell the server its a query string request
                data : data
            }).done(function(data){
                // console.log(data);
                if (! data.success) {
                    // console.log(data.errors);
                    /*for(let er in data.errors) {
                        console.log(data.errors[er])
                    }*/
                    console.log(data);
                } else {
                    /* else condition fires if form submission is successful ! */
                    console.log(data.file); 
                }
            }).fail(function(data){
                console.log(data);  
            });

    });



});

And the following PHP code for testing :

<?php  

// You need to add server side validation and better error handling here

$data = array();

if(isset($_FILES['files'])) {  

    $data = array('file' => 'I a in if');
}
else {
    $data = array('file' => 'I am in else');
}

echo json_encode($data);

?>

Now when i check my console i see that the PHP if condition is not passing , that is it is unable to detect:

isset($_POST['files'])

Why is this happening ? I have tried using isset($_FILES['files']), also I have tried renaming my html file input field to just files instead of files[] , but this does't seem to work , What am I doing wrong ?

I was following the tutorial HERE. But somehow the example I have created just does't work.

Answer 1

Try to print_r($_FILES) and check if it shows an array of file,
If it does, use the same key in $_FILES['same_key_here'] and it supposed to work,
Let me know if it doesn't

Answer 2

If you want to send files, do something like this. This may help you.

var fileInput = $("#upload_img")[0]; // id of your file
var formData = new FormData();
formData.append("image_file",fileInput.files[0]);  //'xmlfile' will be your key

Check in your php code like,

echo $_POST['image_file'];