FancyUpload and CI

[eluser]Unknown[/eluser]
I know this is old post but google found almost nothing useful about handling CI uploads with FancyUpload. I believe it's still a problem for a lot of people. I came up with this solution:

In config/mimes.php we add 'application/octet-stream' to all mimes we want to use FancyUpload to upload.

Code:

.
.
'gif' => array('image/gif', 'application/octet-stream'),
'jpeg' => array('image/jpeg', 'image/pjpeg', 'application/octet-stream'),
'jpg' => array('image/jpeg', 'image/pjpeg', 'application/octet-stream'),
'jpe' => array('image/jpeg', 'image/pjpeg', 'application/octet-stream'),
'png' => array('image/png',  'image/x-png', 'application/octet-stream'),
'pdf' => array('application/pdf', 'application/x-download', 'application/octet-stream'),
.
.

In our controller we utilize regular way of dealing with uploads:

Code:

.
.
$config['upload_path'] = '/our/upload/path/';
$config['allowed_types'] = 'jpg|png|gif|pdf';
$config['encrypt_name'] = TRUE;
// other $config values

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

if ( ! $this->upload->do_upload()) {
    $error = $this->upload->display_errors();
}
else {
    $data = $this->upload->data();
}
.
.

Now we just add another check (getimagesize()) to our if..else:

Code:

.
.
if ( ! $this->upload->do_upload()) {
    $error = $this->upload->display_errors();
}
else {
    $data = $this->upload->data();
    
    $fileinfo = @getimagesize($data['full_path']);
    if ($fileinfo) {
        $data['file_type'] = $fileinfo['mime'];
        $data['image_height'] = $fileinfo[1];
        $data['image_width'] = $fileinfo[0];
        $data['image_size_str'] = $fileinfo[3];
        $data['is_image'] = TRUE;
        $data['image_type'] = substr($data['file_ext'], 1);
    }
    else {
        $this->load->helper('file');
        $data['file_type'] = get_mime_by_extension($data['file_name']);
    }
}
.
.

We're using suppressor operator (@) with getimagesize function so it doesn't generate PHP errors in case of failure (uploaded file isn't image).
In case uploaded file isn't image we load file helper and replace file_type value with file helper function get_mime_by_extension().

This is it, I hope anyone finds this helpful.

EDIT:
I got an email asking me to explain a bit more how to integrate FancyUpload into CI forms. I'm not going through generic FancyUpload integration (you can find that out at Harald's page: http://digitarald.de/project/fancyupload...hotoqueue/). That said, let's begin!

We have our form (no kiddin' ;-)) and this form has it's action e.g. form/upload. Now we have to write a method for receiving FancyUpload uploads only. Let's call it fancyUpload(). Since FancyUpload sends data with 'Filedata name (not sure but i think this can be changed) we have to tell our do_upload() method to look for it. Our controller should now look something like this:

Code:

.
.
function fancyUpload($json = TRUE) {
    $config['upload_path'] = '/our/upload/path/';
    $config['allowed_types'] = 'jpg|png|gif|pdf';
    $config['encrypt_name'] = TRUE;
    // other $config values
    
    $this->load->library('upload', $config);
    
    $field_name = 'Filedata';
    if ( ! $this->upload->do_upload($field_name)) {
        $error = $this->upload->display_errors();
    }
    else {
        $data = $this->upload->data();
        
        $fileinfo = @getimagesize($data['full_path']);
        if ($fileinfo) {
            $data['file_type'] = $fileinfo['mime'];
            $data['image_height'] = $fileinfo[1];
            $data['image_width'] = $fileinfo[0];
            $data['image_size_str'] = $fileinfo[3];
            $data['is_image'] = TRUE;
            $data['image_type'] = substr($data['file_ext'], 1);
        }
        else {
            $this->load->helper('file');
            $data['file_type'] = get_mime_by_extension($data['file_name']);
        }
    }
    
    if ($error) {
        $data = array(
            'status' => '0',
            'error' => $error
        );
    }
    else {
        $data['status'] = '1';
    }
    
    if ($json) {
        echo json_encode($data);
    }
    else {
        return $data;
    }
}
.
.

SInce FancyUpload degrades gracefully to

Code:

<input type="file" name="Filedata" />

in case Flash fails to load we must provide a way for user to be able to upload this way also. As said before our form action is 'form/upload'. Normally there would be some code that handles uploads (just like our fancyUpload method) so instead of duplicating that piece of code we just call our fancyUpload method to do the work:

Code:

.
.
function upload() {
    // some code here
    
    // images
    $this->fancyUpload(FALSE);
    
    // some more code below
}
.
.

There is one more important thing to do now. FancyUpload takes form's action as his upload url - we have to change this cause we want to process only file uploads. We do this in javascript where we create FancyUpload instance:

Code:

.
.
var up = new FancyUpload2($('demo-status'), $('demo-list'), { // options object
    // we console.log infos, remove that in production!!
    verbose: false,
    
    // url is read from the form, so you just have to change one place
    url: 'form/fancyUpload',
    
    // path to the SWF file
    path: 'path/to/swf/file',
.
.

Now if everything is done correctly we should have a working FancyUpload uploader in our CI form :-)