Why is my jQuery not processing my file input?

Question

I am writing a jQuery/AJAX script that uploads an image. The ajax goes through because my upload script returns a message. The issue is that the upload script does not find the selected file. I use codeigniter to execute the file upload and then output xml. I get the message 'You did not select a file to upload'

Here's my jQuery:

$('#submit-thumb').on('click', function(e) {
    console.log('submit detected');
    $.ajax({
        type: "POST",
        data: $('#thumbnail').serializeArray(),
        dataType: "xml",
        url: "http://basecommand.com/index.php/ajax/content/thumb/3yIfPuWkDwRCKosq",
        cache: false,
        success: function(xml) {
            $(xml).find('success').each(function() {
                $('#thumb-message').html('<p style="color: green;">'+$(this).find('message').text()+'</p>');
                $('#thumb-img').prop('src', $(this).find('filename').text());
            });
            $(xml).find('error').each(function() {
                $('#thumb-message').html('<p style="color: red;">'+$(this).find('message').text()+'</p>');
            });
        },
        error: function() {
            $('#thumb-message').html('<p style="color: red;">ajax failed to execute...</p>');
        }
    });

    e.preventDefault(); 
});

This is the AJAX file:

function thumb($draft_code) {

    $config = array(
        'allowed_types' => 'gif|jpg|png',
        'max_size' => '100',
        'max_width' => '192',
        'max_height' => '108',
        'encrypt_name' => TRUE
    );

    $this->load->library('upload', $config);

    if($this->upload->do_upload('thumbnail')) {

        $this->attachment->create($this->upload->upload_data());

        if($this->attachment->error == NULL) {

            $this->article->draft_thumb($draft_code, $this->attachment->info['id']);

            if($this->article->error == NULL) {
                header('Content-Type: text/xml');
                $this->output->set_output(
                    '<success>
                        <message>Your thumbnail has been changed.</message>
                        <filename>'.$this->attachment->info['file_name'].'</filename>
                    </success>'
                );
            } else {
                header('Content-Type: text/xml');
                $this->output->set_output(
                    '<error>
                        <message>'.$this->article->error.'</message>
                    </error>'
                );
            }
        } else {
            header('Content-Type: text/xml');
            $this->output->set_output(
                '<error>
                    <message>'.$this->attachment->error.'</message>
                </error>'
            );
        }
    } else {    
        header('Content-Type: text/xml');
        $this->output->set_output(
            '<error>
                <message>'.$this->upload->display_errors().'</message>
            </error>'
        );
    }
}

This is the HTML:

<a href="#change-thumb" rel="toggleElement">Change Thumbnail</a>                        

<div style="display: none;" id="change-thumb">
    <input type="file" name="thumbnail" id="thumbnail">
    <a href="" id="submit-thumb">Submit</a>
    <div id="thumb-message"></div>
</div>