Using Codeigniter's Upload Library with Uploadify (Uploadifive)

Question

I have a "document" upload form that I had running as it should through the normal Codeigniter upload library. However, I need this to work as a Ajax call. I have an Uploadifive script (which I purchased), which is their HTML5 equilivant to Uploadify.

My issue is a can't get the Uploadifive jQuery Ajax plugin to work well with my controller function. There's no console errors, CI errors, and no error outputting from the ajax function. In fact, it doesn't appear the Uploadify function is even functioning, as the page redirects to my controller function and returns the $error = array('error' => $this->upload->display_errors()); error in the first portion of the controller function below.

Does anyone have experience incorporating Uploadifive with Codeigniter? Anything stand out with my code?

Please note, I'm loading all the correct scripts, libraries, models, etc. Also, no form validation has been coded yet. Again, everything works without the Uploadify plugin

Controller Function (i.e. upload/add_document):

function add_document() {

    if (!$this->upload->do_upload()) {

        // If file upload failed or is invalid, 
        // display error notification
        $error = array('error' => $this->upload->display_errors());
        $this->load->view('upload', $error);
    }       
    else {

        // If file upload was successful,
        // get 'file_name' of the uploaded document
        $file_uploaded = $this->upload->data();
        $file_name = $file_uploaded['file_name'];

        // Add document to S3
        $query = $this->s3_model->add_document($file_name);
        if($query) {           

            // If successful, return S3 file url 
            $document_url = $query;

            // Add document and form details to db
            $this->content_model->add_doc($document_url);

            // Delete temporary document from local 'uploads' folder
            unlink('uploads/'.$file_name);
        }                   

        $this->load->view('upload');
    }

}

Form:

<? echo form_open_multipart('upload/add_document', 'id="upload-doc-form"') ;?>
    <? echo form_input('title', '', 'placeholder="Title"') ;?><br/>
    <? echo form_textarea('description', '', 'placeholder="Description"') ;?><br/>
    <? echo form_input('company',  '', 'placeholder="Company"') ;?><br/>
    <? echo form_input('company_url', '', 'placeholder="Company URL"') ;?><br/>
    <? echo form_upload('userfile', '', 'id="file-upload"') ;?>
    <br/><br/>
    <? echo form_submit('', 'Upload', 'class="doc-submit"') ;?>
<? echo form_close() ;?>

JS (wrapped in a $(function(){})

var form = $('#upload-doc-form');

$('#file-upload').uploadifive({                 
    'auto': true,
    'buttonText': 'BROWSE',
    'uploadScript': form.attr('action'),
    'onError': function(errorType) {
        alert('The error was: ' + errorType);
    }
});

Here's the DEFAULT packaged server-side script included with Uploadify, which I'm not pointing too (obvs). This is just to show you how Uploadify handles the data. I'm instead using the controller...which I assume is the issue here.

<?php
/*
UploadiFive
Copyright (c) 2012 Reactive Apps, Ronnie Garcia
*/

// Set the uplaod directory
$uploadDir = '/uploads/';

// Set the allowed file extensions
$fileTypes = array('jpg', 'jpeg', 'gif', 'png'); // Allowed file extensions

$verifyToken = md5('unique_salt' . $_POST['timestamp']);

if (!empty($_FILES) && $_POST['token'] == $verifyToken) {
    $tempFile   = $_FILES['Filedata']['tmp_name'];
    $uploadDir  = $_SERVER['DOCUMENT_ROOT'] . $uploadDir;
    $targetFile = $uploadDir . $_FILES['Filedata']['name'];

    // Validate the filetype
    $fileParts = pathinfo($_FILES['Filedata']['name']);
    if (in_array(strtolower($fileParts['extension']), $fileTypes)) {

        // Save the file
        move_uploaded_file($tempFile, $targetFile);
        echo 1;

    } else {

        // The file type wasn't allowed
        echo 'Invalid file type.';

    }
}
?>

Answer 1

The issue is I wasn't setting (or changing) the file object name that was sent from the Ajax call to my controller. Codeigniter's UPLOAD library looks for the file object named, userfile. By default, Uploadifive sends the data string, fileData.

Very simple edit - something I should have caught...

In the Uploadifive Alax function, I had to rename the fileObjName to coincide with the CI upload library. Like so:

$(function() {
    $('#file-upload').uploadifive({
        'fileObjName': 'userfile',
        ...
    });
}); 

Answer 2

Have you tried to set the option uploadScript to $(this).attr('action') or maybe <?php echo base_url() . "upload/add_document"; ?>