Sending data to Codeigniter controller from UploadiFive

Question

I am trying to use UploadiFive to upload some files and, as they are uploaded, add information to a database about them. The user enters some details in a form and then clicks upload, at which point the file is uploaded and the information from the form is added to the database with corresponding file name.

I've got it working uploading files, but I need the form to post every time a file is completed uploading. It's posting the form but I'm struggling to get the file name from the uploaded file. Code below:

The HTML page:

<?php echo form_open_multipart('upload/do_upload', 'id="upload_form" name="upload_form"');?>
    <div id="queue"></div>
    <input id="file_upload" name="file_upload" type="file" multiple="true">
    <div id="target"></div>
</form>

<script type="text/javascript">
    <?php $timestamp = time();?>
    $(function() {
        $('#file_upload').uploadifive({
            'auto'             : true,
            'checkScript'      : '<? echo base_url();?>uploadify/check-exists.php',
            'formData'         : {
                                   'timestamp' : '<?php echo $timestamp;?>',
                                   'token'     : '<?php echo md5('unique_salt' . $timestamp);?>'
                                 },
            'queueID'          : 'queue',
            'onError'          : function(errorType) {
                                    alert('The error was: ' + errorType);
                                },

            'uploadScript'     : '<? echo base_url();?>uploadify/uploadifive.php',
            'onUploadComplete' : function (event, queueID, fileObj, response, data, file) {

                //Post response back to controller
                $.post('<?php echo site_url('upload/do_upload');?>', {
                    field1: $("#field1").val(),
                    field2: $("#field2").val(),
                    field3: $("#field3").val(),
                    field4: $("#field4").val(),
                    checkbox1: $("#checkbox1:checked").val(),
                    field5: $("#field5").val(),
                    filearray : response},
                    function(info){
                $("#target").append(info);  //Add response returned by controller
                });
            }
        });
    });
</script>

Then my controller:

//Decode JSON returned
$file = $this->input->post('filearray');
$json_decoded = json_decode($file);

// Get the image filename & full filename with path
$image_file = $json_decoded->{'file_name'};
$path = "assets/photos/highres/".$image_file;

echo "IMAGE FILE NAME: " . $image_file; die;

For debugging purposes, I just did an echo of $image_file.

It seems to be submitting everything except the response from the uploadifive.php script. When I use Firebug I can see that I do get a response, and it looks correct, but the response (filearray) isn't being posted to the form to be decoded.

Any ideas as to why I can't get the filename from the response?

Answer 1

TL;DR

Use event.name in onUploadComplete:function(event,data){}

If you really need the server's response, then you might want to use data (unfortunately, I can't test it but the documentation wouldn't lie, would it ?).

The details

The documentation for onUploadComplete tells us the following:

onUploadComplete

Input Type
function

Overridable
N/A

Triggered once for each file upload that completes. Arguments

• file
  The file object that was uploaded
• data
  The data returned from the server-side upload script (echoed in uploadifive.php)

Demo

$(function() {
    $('#file_upload').uploadifive({
        'uploadScript'     : '/uploadifive.php'
        'onUploadComplete' : function(file, data) {
            alert('The file ' + file.name + ' uploaded successfully.');
        }
    });
});

This is quite different from what is in your code:

'onUploadComplete' : function (event, queueID, fileObj, response, data, file) {...}

I could not test UploadiFive, but did a quick check with Uploadify:

'onUploadComplete' : function(event) {
    console.log(JSON.stringify(event,null,4));
}

Which returned this output:

{
    "size": 34405,
    "post": {},
    "modificationdate": "2015-09-21T02:24:51.597Z",
    "name": "Tire-wheel-advisor1.jpg",
    "creationdate": "2015-09-21T02:24:51.539Z",
    "id": "SWFUpload_0_0",
    "type": ".jpg",
    "filestatus": -4,
    "index": 0
}