Implementing jquery upload plugin 'uploadify' with codeigniter

Question

How can i implement this in codeigniter?Uploadify(Jquery)

I mean what will be the controller? Hows the progress tracked? And what will happen if flashplayer is not installed by the user?

And How do i check progess? Have any one tried this with codeigniter?

Answer 1

I was looking at it for a project I'm working on, but decided not to use it because I have prototype and I couldn't get the two to work together nicely. I did find this in my travels, though:

http://uploadify.com/forum/viewtopic.php?f=7&t=47&p=210&hilit=codeigniter#p1855

hopefully it helps.

Just for reference, I ended up using the CI upload class, iframe, and prototype for AJAX. See the relevant post here.

Answer 2

We used it recently on a project we're working on, and we just put the sample uploadify.php in the web root.

The javascript and flash call this file to take care of the upload, and I modified uploadify.php to echo the uploaded file data. From there, the javascript on the original page adds a hidden input into the form we're using.

When the user submits the form, A CI controller/method is called and it is this which deals with resizing / manipulating the image.

If you need any further clarification, please let me know.

Edit : To answer the other parts of your question, if flash is not installed, a regular file input element is displayed. The way we use it, javascript is required for correct functionality, but that was a design choice.

Answer 3

I have successfully implemented uploadify in codeigniter as follows:

In the header view:

<script type="text/javascript" src="<?php echo base_url()?>resources/js/jquery.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="<?php echo base_url()?>resources/uploadify/uploadify.css" />
<script type="text/javascript" src="<?php echo base_url()?>resources/uploadify/swfobject.js"></script>
<script type="text/javascript" src="<?php echo base_url()?>resources/uploadify/jquery.uploadify.v2.1.0.min.js"></script>

In the page view:

<input id="fileInput" name="fileInput" type="file" />
 <script type="text/javascript">
    $(document).ready(function() {
    $("#fileInput").uploadify({
        'uploader'       : '<?php echo base_url()?>resources/uploadify/uploadify.swf',
        'script'         : '<?php echo site_url()?>/managerupload/vehicle_imageUpload',
        'cancelImg'      : '<?php echo base_url()?>resources/uploadify/cancel.png',
        'fileExt'        : '*.jpg;*.jpeg;*.png;*.gif',
        'folder'         : '/nonexistant',
        'auto'           : true,
        'multi'          : false,
        'scriptData'     : {'vehicleID': '<?php echo $vehicleID?>'},
        'onComplete'     : function() {vImg_reload('<?php echo $vehicleID?>');}
    });    });

</script>

The scriptData config option is passed through POST.

NOTE: the onComplete config option allows you to execute a function; in this case it is an Ajax call to update the images for the current vehicle; this may or may not be relevant to you. Let me know if it is and i will post it. As it is, i would rather not muddy the waters.

In the controller:

function vehicle_imageUpload(){
    $this->_checklogin();

    $file_dir = "vehicle_images/";

    $config['upload_path'] = './vehicle_images/';
    $config['allowed_types'] = 'gif|jpg|png';
    $config['max_size'] = '1000000';
    $config['overwrite'] = TRUE;
    $config['remove_spaces'] = TRUE;
    $config['encrypt_name'] = FALSE;

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

    if(! $this->upload->do_upload('Filedata')){
        echo $this->upload->display_errors();
    }else{

       $errors = $this->upload->display_errors();

       $upload_info = $this->upload->data();

       // Insert file information into database
       $insert_data = array(
        'vImg_vehicle_id_fk' => $this->input->post('vehicleID'),
        'vImg_filename' => $upload_info['file_name'],
        'vImg_filepath' => $upload_info['file_path'],
        'vImg_primary' => 1,
        'vImg_directory' => $file_dir
       );
       $this->db->insert('vehicle_images', $insert_data);
      }
}

This is a standard upload handler using the CI upload class; here we used the passed POST item 'vehicleID' to insert a record of the image into the database.

As with all flash stuff you have to work around the Flash Cookie Bug. There are two options, pass your session id through Uploadify's 'scriptData' array (as described above), and reload the session from the upload controller with the existing session ID. The other option is to not have Codeigniter match the session useragent.

In application/config.php

$config['sess_match_useragent'] = FALSE;

This prevents the Session Class from destroying the session when it sees a Useragent that doesnt belong to the session.

If you are worried about the security implications of this you just need to remember that user agents are trivial to fake and so long as your existing security is soundly implemented you will have no problems.