Uploading Image using Ajax, jQuery and Codeigniter - php

Question

I'm trying to add a feature where I can attach an image in the form using Codeigniter, Ajax, jQuery. The form submits and when I check the database for the image file, it seems that it doesnt have anything on it. Usually they use FormData but, I already started using this method. I was wondering if there is anyway I could do it this way.
Here are my codes.
jQuery
$('#addForm').submit(function(event){
var emp_id = $("#agentNames").val();
var campaign = $("#addCampaign").val();
var k_type = $("#addKudosType").val();
var c_name = $("#addCustomerName").val();
var p_number = $("#addPhoneNumber").val();
var e_add = $("#addEmailAdd").val();
var comment = $("#addCustomerComment").val();
var supervisor = $("#addSupervisor").val();
var file = $("#addFile").val();
var p_reward = $("#addPrefReward").val();
var pfrd = $("#addProofreading").val();
var k_card = $("#addKudosCard").val();
var r_status = $("#addRewardStatus").val();
dataString = "emp_id="+emp_id+"&campaign="+campaign+"&k_type="+k_type+"&c_name="+c_name+"&p_number="+p_number+"&e_add="+e_add+"&comment="+comment+"&supervisor="+supervisor+"&file="+file+"&p_reward="+p_reward+"&pfrd="+pfrd+"&k_card="+k_card+"&r_status="+r_status;
$.ajax({
type: "POST",
url: "<?php echo base_url(); ?>index.php/Kudos/addKudos/",
data: dataString,
cache: false,
success: function(html)
{
alert("Succesfully Added!");
location.reload();
}
});
event.preventDefault();
});
Controller
public function addKudos()
{
$emp_id= $this->input->post('emp_id');
$campaign= $this->input->post('campaign');
$k_type= $this->input->post('k_type');
$c_name= $this->input->post('c_name');
$p_number= $this->input->post('p_number');
$e_add= $this->input->post('e_add');
$comment= $this->input->post('comment');
$supervisor= $this->input->post('supervisor');
$file= $this->input->post('file');
$config['upload_path'] = "uploads/images/";
$config['allowed_types'] = "jpg|png";
$config['file_name'] = $_FILES['addFile']['name'];
$this->load->library('upload', $config);
$this->load->initialize($config);
if($this->upload->do_upload('addFile')){
$uploadData = $this->upload->data();
$picture = $uploadData['file_name'];
} else {
$picture = '';
}
$p_reward= $this->input->post('p_reward');
$pfrd= $this->input->post('pfrd');
$k_card= $this->input->post('k_card');
$r_status= $this->input->post('r_status');
$this->KudosModel->add_kudos($emp_id,$campaign,$k_type,$c_name,$p_number,$e_add,$comment,$supervisor,$picture,$p_reward,$pfrd,$k_card,$r_status);
}
Model
function add_kudos($emp_id,$campaign,$k_type,$c_name,$p_number,$e_add,$comment,$supervisor,$picture,$p_reward,$pfrd,$k_card,$r_status)
{
$emp_id1 =mysqli_real_escape_string($this->db->conn_id,trim($emp_id));
$campaign1 =mysqli_real_escape_string($this->db->conn_id,trim($campaign));
$k_type1 =mysqli_real_escape_string($this->db->conn_id,trim($k_type));
$c_name1 =mysqli_real_escape_string($this->db->conn_id,trim($c_name));
$p_number1 =mysqli_real_escape_string($this->db->conn_id,trim($p_number));
$e_add1 =mysqli_real_escape_string($this->db->conn_id,trim($e_add));
$comment1 =mysqli_real_escape_string($this->db->conn_id,trim($comment));
$supervisor1 =mysqli_real_escape_string($this->db->conn_id,trim($supervisor));
$file1 =mysqli_real_escape_string($this->db->conn_id,trim($picture));
$p_reward1 =mysqli_real_escape_string($this->db->conn_id,trim($p_reward));
$pfrd1 =mysqli_real_escape_string($this->db->conn_id,trim($pfrd));
$k_card1 =mysqli_real_escape_string($this->db->conn_id,trim($k_card));
$r_status1 =mysqli_real_escape_string($this->db->conn_id,trim($r_status));
$query = $this->db->query("insert into tbl_kudos(emp_id,acc_id,kudos_type,client_name,phone_number,client_email,comment,uid,file,reward_type,proofreading,kudos_card,reward_status,is_given) values('$emp_id1','$campaign1','$k_type1','$c_name1','$p_number1','$e_add1','$comment1','$supervisor1','$file1','$p_reward1','$pfrd1','$k_card1','$r_status1',now())");
}
Thanks.

Answer 1

The database doesn't have any file because you aren't submitting any. You didn't show any HTML but you must have something like:
<input type="file" id="addfile">
But in jquery, you are retrieving the file using:
var file = $("#addFile").val();
Which will return the file name or an empty string because you won't get file contents (or image) using val(). You need to look for another method to upload form data with file contents using AJAX. Check this out: How can I upload files asynchronously?