codeigniter send input file info via ajax - ajax

Question

I have a form with 4 fields: title, price, image and category.
When submitted, it inserts the 3 strings into the DB and uploads the image, or returns errors. It all works fine.
However, now I want it to be done via ajax.
It works fine for the title, price and category fields, but how do I pass the info needed from the file field so that codeigniter can upload it?
Right now it keeps saying "You did not select a file to upload."
My controller:
function add_new_product_ajax()
{
// make sure it's the admin, else redirect
if ( ! $this->session->userdata('is_admin') ) {
redirect('admin/login');
exit();
}
// get product name
$pn = $this->input->post('product_title');
// get price
$p = $this->input->post('price');
// get category id
$cid = $this->input->post('categories');
// upload config
$config['upload_path'] = './uploads/';
$config['allowed_types'] = 'gif|jpg|png';
$config['max_size'] = '100';
$config['max_width'] = '1024';
$config['max_height'] = '768';
$config['overwrite'] = TRUE;
// load form validation
$this->load->library('form_validation');
// validate fields
$this->form_validation->set_rules('product_title', 'Product Name', 'trim|required|is_unique[products.name]');
$this->form_validation->set_rules('price', 'Price', 'trim|required|callback_check_price');
$this->form_validation->set_rules('categories', 'Product\'s Category', 'required');
// if validation failed
if ($this->form_validation->run($this) == FALSE)
{
// dummy var
$data['dummy'] = '';
// load categories module to make a select list
$this->load->module('categories/categories');
$data['options'] = $this->categories->categories_select();
// load the view
$this->load->view('new_product_view', $data);
}
else // validation passed
{
// do upload
$this->load->library('upload', $config);
$field_name = "userfile";
// $this->upload->do_upload($field_name);
// try to upload
if ( ! $this->upload->do_upload()) {
$data['error'] = $this->upload->display_errors();
// load categories module to make a select list
$this->load->module('categories/categories');
$data['options'] = $this->categories->categories_select();
// load the view
$this->load->view('new_product_view', $data);
}
else // upload successful, insert data into table
{
// insert product data
$this->mdl_products->add_product($pn, $p, $cid);
// success msg
$data['msg'] = '<div class=successmsg>The product has been added!</div>';
// load categories module to make a select list
$this->load->module('categories/categories');
$data['options'] = $this->categories->categories_select();
// load the view
$this->load->view('new_product_view', $data);
}
}
}
My ajax ( with missing file value parameter):
$('body').on('click', 'a.submitnewprod', function(e) {
e.preventDefault();
// alert('code');return;
// get product title
var pt = $('#product_title').val();
// get product price
var pp = $('#price').val();
// get category id
var cid = $('#categories').val();
// get userfile ???????
var uf = $('#uploadImage').val();
$.ajax({
type: "POST",
url: site + "admin/add-new-product-ajax",
data: {
product_title:pt,
price: pp,
categories: cid
},
beforeSend: function() {
$('#ajaximg img').addClass('act');
},
success: function(data) {
// $('.results').html(data);
$('#ajax').html(data);
},
complete: function() {
$('#ajaximg img').removeClass('act');
}
});
});
the file html from my view file:
<input id="uploadImage" type="file" name="userfile" size="20" onchange="PreviewImage();" />
What do I need to pass in my ajax call inside data parameter, so that the upload can work normally?

Answer 1

Its not an issue in your PHP its to do with how you are posting the $_FILE field. Instead of grabbing individual form fields try using the form serialize function of jQuery and declare the post as multipart/form-data. There is loads of examples of how to achieve this on SO but should look a bit like this...
var myData = $('#your_form').serialize();
$.ajax({
type: "POST",
contentType:attr( "enctype", "multipart/form-data" ),
url: " URL Goes Here ",
data: myData
...