Uploading Image using Ajax, jQuery and Codeigniter

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.

[similar](http://stackoverflow.com/a/41786755/3898339) question hope you get some idea — Deep 3015, Feb 20 '17 at 19:22
To troubleshoot go to your network tab in your browser developer console and do a var_dump($_POST) in your controller. your dataString does seem to be written for GET though, not sure how this will play out. — qwertzman, Feb 22 '17 at 02:11

score 0 · Answer 1 · edited May 23 '17 at 11:46

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?

Uploading Image using Ajax, jQuery and Codeigniter

1 Answers1