how to submit file using jquery to codeigniter controller - php

Question

May I ask for your help guys!
I am trying to upload a file and passing all the data to codeigniter controller using jquery.
my view file:
<div class="form-group">
<label class="col-md-4 control-label">Item Image</label>
<div class="col-md-8">
<input class="form-control" type="file" placeholder="" id="itemImage" name="itemImage" data-parsley-required="true" />
</div>
</div>
<button type="button" onclick="add_item();">Sumit</button>
<script>
function add_item(){
$.post('<?php echo site_url('admin_newitem/add_item'); ?>',
{
itemId : $('#itemId').val(),
itemImage : $('#itemImage').val()
},
function(data){
if(data.result=='SUCCESS'){
$('#itemId').val('');
$('#itemImage').val('');
//show success
}else{
//show error
}
},'json'
);
}
</script>
My controller:
function add_item(){
$this->output->set_status_header(200);
$this->output->set_header('Content-Type: application/json');
$itemId = $this->input->post('itemId');
$itemImage = $this->input->post('itemImage');;
$config['upload_path'] = realpath(APPPATH.'../assets_main/img/item/');
$config['allowed_types'] = 'jpg|jpeg';
$config['max_size'] = '100';
$config['max_width'] = '200';
$config['max_height'] = '200';
$file_name = $config['file_name'] = md5(uniqid(mt_rand()));
$config['remove_spaces'] = TRUE;
$this->load->library('upload', $config);
if(!$itemImage){
$jdata['result'] = "FAILED";
$jdata['message'] = "upload error.";
$jdata['field'] = "itemImage";
echo json_encode($jdata);
exit();
}
$data = array('upload_data' => $this->upload->data());
$jdata['message'] = "Thank you for purchasing our item!";
$jdata['result'] = "SUCCESS";
echo json_encode($jdata);
exit();
}
I was able to get the ItemId, and ItemImage but when I check the folder where the image is suppose to be located, it's not there. I think I fail to capture the real file, so, is there a way for me to get this done?

Answer 1

As you suggest, I believe that you are forgetting to actually do the upload, the code igniter documentation might help:
http://www.codeigniter.com/user_guide/libraries/file_uploading.html
With this correctly implemented, I think your code should look something similar to:
function add_item(){
$this->output->set_status_header(200);
$this->output->set_header('Content-Type: application/json');
$itemId = $this->input->post('itemId');
$itemImage = $this->input->post('itemImage');;
$config['upload_path'] = realpath(APPPATH.'../assets_main/img/item/');
$config['allowed_types'] = 'jpg|jpeg';
$config['max_size'] = '100';
$config['max_width'] = '200';
$config['max_height'] = '200';
$file_name = $config['file_name'] = md5(uniqid(mt_rand()));
$config['remove_spaces'] = TRUE;
$this->load->library('upload', $config);
//THE MISSING LINE
if($this->upload->do_upload()){
//THE FILE HAS NOW BEEN UPLOADED
$data = array('upload_data' => $this->upload->data());
$jdata['message'] = "Thank you for purchasing our item!";
$jdata['result'] = "SUCCESS";
echo json_encode($jdata);
exit();
}else{
//NO FILE UPLOADED
$jdata['result'] = "FAILED";
$jdata['message'] = "upload error.";
$jdata['field'] = "itemImage";
echo json_encode($jdata);
exit();
}
}

Answer 2

My initial thinking, having used CI and tried to do this same thing, is that you can't do file uploads via AJAX without a special plugin such as this:
http://malsup.com/jquery/form/
Specifically, this file upload portion:
http://malsup.com/jquery/form/#file-upload
Simply trying to send a post with the val of a file input will not work, I don't believe - though maybe more modern browsers are able to handle that now.