send input file info via ajax

The point is the following:

To give the input and select validation statements their data to check:

Code:

$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');

I got their values using val() and passed them as data parameters in the ajax request:

Code:

data: {
                product_title:pt,
                price: pp,
                categories: cid
            },

An that works.

What additional parameter do I need to pass so that the following CI method can do it's job?

Code:

if ( ! $this->upload->do_upload()) {... (the file input's name is userfile, the CI standard).

I tried the following from the SO link you gave me:

Code:

var fd = new FormData(document.getElementById("uploadImage"));
fd.append("label", "WEBUPLOAD");

and then modified the data parameter like so:

Code:

data: {
                product_title:pt,
                price: pp,
                categories: cid,
                userfile : fd
            },

however when I try to submit the form I get the following console error:

Code:

Argument 1 of FormData.constructor does not implement interface HTMLFormElement.

Is there something similar I can do to get the needed value from the file field so that CI can upload it?