Take the tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

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

    }
}
?>
share|improve this question
 
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 Dec 7 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 Dec 7 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 Dec 7 at 17:52
 
try $this->upload->do_upload('userfile'); –  Nouphal.M Dec 8 at 8:15
 
Pretty sure the CI upload script looks for "userfile" by default, no? –  Mike Barwick Dec 8 at 10:00
show 2 more comments

This question has an open bounty worth +50 reputation from Mike Barwick ending in 21 hours.

The question is widely applicable to a large audience. A detailed canonical answer is required to address all the concerns.

2 Answers

up vote 2 down vote accepted

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',
        ...
    });
}); 
share|improve this answer
1  
You can use the upload class to choose what upload name you want e.g. if (!$this->upload->do_upload('fileData')) { –  Timmytjc Dec 8 at 20:09
 
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 Dec 8 at 20:48
 
Line 143 of the system->upload.php file, public function do_upload($field = 'userfile') –  Mike Barwick Dec 8 at 20:49
 
'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. –  Timmytjc Dec 9 at 10:21
add comment

i have not enough reputation to comment. I will delete this answer if it isn't correct or isn't helpful.

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

share|improve this answer
 
I tried this already...uploadScript src is rendering fine, as per my browser source. My guess is the controller code. –  Mike Barwick Dec 7 at 17:40
 
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() {}) –  Hugo B. Dec 8 at 8:49
 
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. –  Mike Barwick Dec 8 at 10:04
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.