Sending form data along with input type file using ajax in codeIgniter

Question

I have a simple form which include input type file and other form fields. I am able to send input type file data to controller but there is problem to send other form data along with input type file.
Here is what I have done so far -
Form -

<form method="post" id="theme_option_form" enctype="multipart-formdata">
        Logo :<input type="file" name="image_file" id="image_file">
        Logo Size :<input type="text" id="logo_size" class="form-control input-sm">
        Heading Size :<input type="text" id="hding_size" class="form-control input-sm">
        <input type="submit" name="upload" id="upload" value="Upload" class="btn btn-primary btn-sm">
</form>  

Ajax Code -

$('#theme_option_form').on("submit",function(e){
    var hding_size=$('#hding_size').val();   
    var logo_size=$('#logo_size').val();
                $.ajax({
                    url:base_url+'admin/theme_options_data',
                    method:'post',
                    data:new FormData(this),
                    contentType:false,
                    cache:false,
                    processData:false,
                    success:function(data){
                       alert(data);
                    }
                });         
});  

Controller function -

public function theme_options_data()
 {
       if(isset($_FILES['image_file']['name']))
        {
          $this->load->helper('string');
          $logo_name=random_string('alnum',5);
          $config['upload_path']='./upload';
          $config['allowed_types']='jpg|jpeg|png|gif';
          $config['file_name']=$logo_name;
          $this->load->library('upload',$config);
          if(!$this->upload->do_upload('image_file'))
            {
              echo $this->upload->display_errors();
            }
            else
            {
              $data=$this->upload->data();
            }
          }

    }  

File uploading is working properly, but I just need to send form data(Logo size, heading size etc) to controller and later I have to stored all data to database.
Please Help me.
Thanks

Answer 1

Form ...Put name of the fields.

<form method="post" id="theme_option_form" enctype="multipart-formdata">
    Logo :<input type="file" name="image_file" id="image_file">
    Logo Size :<input type="text" name="logo_size" id="logo_size" class="form-control input-sm">
    Heading Size :<input type="text" name="hding_size" id="hding_size" class="form-control input-sm">
    <input type="submit" name="upload" id="upload" value="Upload" class="btn btn-primary btn-sm">

Controller

public function theme_options_data()
 {
       if(isset($_FILES['image_file']['name']))
        {
          $this->load->helper('string');
          $logo_name=random_string('alnum',5);
          $config['upload_path']='./upload';
          $config['allowed_types']='jpg|jpeg|png|gif';
          $config['file_name']=$logo_name;
          $this->load->library('upload',$config);
          if(!$this->upload->do_upload('image_file'))
            {
              echo $this->upload->display_errors();
            }
            else
            {
              $data=$this->upload->data();
            }
          }
       $logo_size = $_POST['logo_size'];
       $heading_size  = $_POST['hding_size'];
    }