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.';

    }
}
?>

There is no ajax call being made? Are you 100% sure that form.attr('action') is correct? Alert it after the var form line to check. Are you 100% sure there are no JS errors on the page when it loads (before you attempt to upload) ? — stef
– stef, Commented Dec 7, 2013 at 15:20
uploadScript src is rendering fine, as per my browser source. My guess is the controller code. No console errors...alerts fine, etc. It's a server-side issue with the Codeigniter upload library I'm sure. — Mike Barwick
– Mike Barwick, Commented Dec 7, 2013 at 17:42
Updated my question to include the default server-side script packaged with Uploadifive. I must be processing the data from the ajax call to the controller incorrectly. — Mike Barwick
– Mike Barwick, Commented Dec 7, 2013 at 17:52
Pretty sure the CI upload script looks for "userfile" by default, no? — Mike Barwick
– Mike Barwick, Commented Dec 8, 2013 at 10:00

Mike Barwick · Accepted Answer · 2013-12-08 19:44:21Z

2

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',
        ...
    });
});

answered Dec 8, 2013 at 19:44

community wiki

Mike Barwick

Sign up to request clarification or add additional context in comments.

4 Comments

Timmytjc Over a year ago

You can use the upload class to choose what upload name you want e.g. if (!$this->upload->do_upload('fileData')) {

Mike Barwick Over a year ago

Pretty sure in order the use the CI upload lib, you have to set the file as userfile, no? Unless you change the system/libraries/upload.php file...

Mike Barwick Over a year ago

Line 143 of the system->upload.php file, public function do_upload($field = 'userfile')

Timmytjc Over a year ago

'userfile' is the default upload name as you mentioned above you can just write $this->upload->do_upload() rather than $this->upload->do_upload('userfile'). If you wanted to change the upload name or run a multiple uploads for example you assign the upload name you want.

CRABOLO · Accepted Answer · 2014-06-18 18:29:49Z

0

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

edited Jun 18, 2014 at 18:29

CRABOLO

8,82439 gold badges46 silver badges68 bronze badges

answered Dec 7, 2013 at 9:53

Hugo B.

5031 gold badge10 silver badges26 bronze badges

3 Comments

Mike Barwick Over a year ago

I tried this already...uploadScript src is rendering fine, as per my browser source. My guess is the controller code.

Hugo B. Over a year ago

what happens when you run the controller manually? have you looked what data do you get? e.g. echo "<pre>".print_r($ _REQUEST)."</pre>";exit; and is it correct that the uploadifive-function is in $(function() {} and not in a $(document).ready(function() {})

Mike Barwick Over a year ago

That means the same thing (re: document ready) ;). And yes, the included uploadifive php script works fine when called directly. But I want to use it with codeigniters library.

Collectives™ on Stack Overflow

Using Codeigniter's Upload Library with Uploadify (Uploadifive)

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related