File upload by ajax $.post not working

Question

I am really new to ajax do forgive me if the question is stupid. I have a multi step form and it has the 4 parts , and I am using $.post() ajax request to send this. while all my other details are going fine I am not able to upload my file. this is what I am trying to do

Here I am trying to catch the form values.

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

Then I am passing these values to the object variable.

obj_params.pan_file = hello;

And then sending it to store with ajax.post()

$.post('<?php echo base_url(); ?>get-ekyc-form', obj_params, function (msg) {
    if (msg == "1") {
        swal("Success!", "EKYC Form has been Submitted Successfully", "success");
        window.location = '<?php echo base_url(); ?>list-active-requirement';
    }
}, "json", "processData:false", "contentType:false");
return true;

And this is where I do file transfer.

if ($_FILES['file-0']['name'] != "") {
    $image_data = array();
    //config initialise for uploading image 
    $config['upload_path'] = './media/front/img/quote-docs/';
    $config['allowed_types'] = 'xlsx|pdf|doc|docx';
    $config['max_size'] = '5000';
    $config['max_width'] = '12024';
    $config['max_height'] = '7268';
    $config['file_name'] = time();
    //loading upload library
    $this->upload->initialize($config);
    $this->load->library('upload', $config);
    if (!$this->upload->do_upload('file-0')) {
        $error = array('error' => $this->upload->display_errors());
    } else {
        $data = array('upload_data' => $this->upload->data());
        $image_data = $this->upload->data();
        $file_name = $image_data['file-0'];
    }
    $file_name = $image_data['file_name'];
} else {
    $file_name = '';
}

Also I am working on someone elses code so I do understand I must have made loads of mistakes. I'll be grateful if someone could help me around this.

Answer 1

HTML code

<input id="picture" type="file" name="pic" />
<button id="upload">Upload</button>





$('#upload').on('click', function() {
        var file_data = $('#picture').prop('files')[0];   
        var form_data = new FormData();                  
        form_data.append('file', file_data);
        alert(form_data);                             
        $.ajax({
                    url: 'upload.php', // point to server-side PHP script 
                    dataType: 'text',  // what to expect back from the PHP script, if anything
                    cache: false,
                    contentType: false,
                    processData: false,
                    data: form_data,                         
                    type: 'post',
                    success: function(php_script_response){
                        alert(php_script_response); // display response from the PHP script, if any
                    }
         });
    });

in upload.php

<?php

    if ( 0 < $_FILES['file']['error'] ) {
        echo 'Error: ' . $_FILES['file']['error'] . '<br>';
    }
    else {
        move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']);
    }

?>