Question

Morning guys.

I’m trying to use Plupload along with CodeIgniter. I tried uploadify before Plupload and it worked awesome, the main problem with uploadify is that it never sent the CSRF code, no matter what I used, this was really odd so I reviewed Plupload and I made it work as expected in matter of minutes. However, it ONLY works well with the HTML5 uploader and not with the Flash Uploader.

Reviewing the logs I found the reason why it was not working: while using the CodeIgniter File Uploading Class.

Since I’m doing a bulk image uploader I set it up to allow “jpg,gif,png,jpeg” but found that the uploader rejects the uploading petition since I’m uploading a wrong type_file (which I found is octet/stream – wtf?).

After the upload process, I was processing the image (generating thumbs, watermarks, cropping, etc) so if I set it to allow all file types, the image processing won’t work at all.

What I was thinking was on doing something like upload the file (allowing octet/stream MIME TYPE) then convert it to image (with imagecreatefromstring and file_get_contents functions) and then process it individually.

If you have any other idea let me know

Answer 1

Before going on, I suggest you drop any flash uploader, and pick up https://github.com/blueimp/jQuery-File-Upload that stays always HTML5 and is backwards compatible. At most you won’t see uploading bars, but there’s no Flash, and you don’t have to do any kind of modification to CodeIgniter.

The following is not very refined. In fact, I’m dropping support for Flash upload in my application from the next version.

Any upload made via Flash will be received by the server as application/octet-stream.
This stops being a problem when in the file /application/config/mime.php you add “application/octet-stream” to the filetypes you’re interested in. Here’s an example, look at the bottom of the file.

Currently, the CSRF is not much the problem, as much that Flash has its own cookies, which means it’s like a completely separate browser. Before even trying to send the CSRF, we must put into Flash the Session ID that CodeIgniter uses to identify you. You will also have to change in /application/config/config.php

$config['sess_match_useragent'] = FALSE;

If you want to use Uploadify3 (this should work for Uploadify 2 and Plupload too), you first have to add /application/libraries/MY_Session.php to make possible to send Session data also via POST.

Just use this file:
https://github.com/woxxy/FoOlSlide/blob/a7522d747fe406da18ce18ae9763f083b89eb91e/application/libraries/MY_Session.php

Then in your controller, you have to make it possible to retrieve the Session ID at any time.

function get_sess_id()
{
    $this->output->set_output(json_encode(array('session' => $this->session->get_js_session(), 'csrf' => $this->security->get_csrf_hash())));
}

Your upload controller should be a pretty standard upload function. Make sure you use the right name on your upload (“userfile”).

Now, the worst part: the view file. I could’ve removed some details, but I think some extra data will help you coding it without having to look up too much in Uploadify3.

<script type="text/javascript">
    function updateSession()
    {
        jQuery.post('<?php echo site_url('/admin/series/get_sess_id'); ?>', 
        function(result){

            jQuery('#file_upload_flash').uploadifySettings( 'postData', {
                'ci_sessionz' : result.session, 
                '<?php echo $this->security->get_csrf_token_name(); ?>' : result.csrf, 
                'chapter_id' : <?php echo $chapter->id; ?>
            }, false );
            setTimeout('updateSession()', 6000);
        }, 'json');
    }

    jQuery(document).ready(function() {
        jQuery('#file_upload_flash').uploadify({
            'swf'  : '<?php echo site_url(); ?>assets/uploadify/uploadify.swf',
            'uploader'    : '<?php echo site_url('/admin/series/upload/compressed_chapter'); ?>',
            'cancelImage' : '<?php echo site_url(); ?>assets/uploadify/uploadify-cancel.png',
            'checkExisting' : false,
            'preventCaching' : false,
            'multi' : true,
            'buttonText' : '<?php echo _('Use flash upload'); ?>',
            'width': 200,
            'auto'      : true,
            'requeueErrors' : true,
            'uploaderType'    : 'flash',
            'postData' : {},
            'onSWFReady'  : function() {
                updateSession();
            },
            'onUploadSuccess' : function(file, data, response) {
                var files = jQuery.parseJSON(data);
                var fu = jQuery('#fileupload').data('fileupload');
                fu._adjustMaxNumberOfFiles(-files.length);
                fu._renderDownload(files)
                .appendTo(jQuery('#fileupload .files'))
                .fadeIn(function () {
                    jQuery(this).show();
                });
            }   
        });
    });

</script>
<div id="file_upload_flash"></div>

Now, if it wasn’t already enough work… there’s a bug in Uploadify3, that doesn’t make it trigger one or two of the callbacks.

Here’s a fixed version of the code: https://github.com/woxxy/FoOlSlide/blob/a7522d747fe406da18ce18ae9763f083b89eb91e/assets/uploadify/jquery.uploadify.js

You might want to minify it.

But what if you wanted to use jQuery-File-Upload?

Then all you’d have to do is adapting your controller a bit. Here’s an example (I won’t go through cleaning this code either, as it would probably just make a broken upload controller anyway)

function upload()
{
    $info = array();

    // compatibility for flash uploader and browser not supporting multiple upload
    if (is_array($_FILES['Filedata']) && !is_array($_FILES['Filedata']['tmp_name']))
    {
        $_FILES['Filedata']['tmp_name'] = array($_FILES['Filedata']['tmp_name']);
        $_FILES['Filedata']['name'] = array($_FILES['Filedata']['name']);
    }

    for ($file = 0; $file < count($_FILES['Filedata']['tmp_name']); $file++)
    {
        $valid = explode('|', 'png|zip|rar|gif|jpg|jpeg');
        if (!in_array(strtolower(substr($_FILES['Filedata']['name'][$file], -3)), $valid))
            continue;

        if (!in_array(strtolower(substr($_FILES['Filedata']['name'][$file], -3)), array('zip', 'rar')))
            $pages = $this->files_model->page($_FILES['Filedata']['tmp_name'][$file], $_FILES['Filedata']['name'][$file], $this->input->post('chapter_id'));
        else
            $pages = $this->files_model->compressed_chapter($_FILES['Filedata']['tmp_name'][$file], $_FILES['Filedata']['name'][$file], $this->input->post('chapter_id'));

        foreach ($pages as $page)
        {
            $info[] = array(
                'name' => $page->filename,
                'size' => $page->size,
                'url' => $page->page_url(),
                'thumbnail_url' => $page->page_url(TRUE),
                'delete_url' => site_url("admin/series/delete/page"),
                'delete_data' => $page->id,
                'delete_type' => 'POST'
            );
        }
    }

    // return a json array
    echo json_encode($info);
    return true;
}


function get_file_objects()
{
    // Generate JSON File Output (Required by jQuery File Upload)
    header('Content-type: application/json');
    header('Pragma: no-cache');
    header('Cache-Control: private, no-cache');
    header('Content-Disposition: inline; filename="files.json"');

    $id = $this->input->post('id');
    $chapter = new Chapter($id);
    $pages = $chapter->get_pages();
    $info = array();
    foreach ($pages as $page)
    {
        $info[] = array(
            'name' => $page['filename'],
            'size' => intval($page['size']),
            'url' => $page['url'],
            'thumbnail_url' => $page['thumb_url'],
            'delete_url' => site_url("admin/series/delete/page"),
            'delete_data' => $page['id'],
            'delete_type' => 'POST'
        );
    }

    echo json_encode($info);
    return true;
}

And add more tremendous view code (this time it’s almost stock one from jQuery upload)

<div id="fileupload">
    <link href="<?php echo site_url(); ?>assets/jquery-file-upload/jquery-ui.css" rel="stylesheet" id="theme" />
    <link href="<?php echo site_url(); ?>assets/jquery-file-upload/jquery.fileupload-ui.css" rel="stylesheet" />
    <?php echo form_open_multipart(""); ?>
    <div class="fileupload-buttonbar">
        <label class="fileinput-button">
            <span>Add files...</span>
            <input type="file" name="Filedata[]" multiple>
        </label>
        <button type="submit" class="start">Start upload</button>
        <button type="reset" class="cancel">Cancel upload</button>
        <button type="button" class="delete">Delete files</button>
    </div>
    <?php echo form_close(); ?>
    <div class="fileupload-content">
        <table class="files"></table>
        <div class="fileupload-progressbar"></div>
    </div>
</div>
<script id="template-upload" type="text/x-jquery-tmpl">
    <tr class="template-upload{{if error}} ui-state-error{{/if}}">
        <td class="preview"></td>
        <td class="name">${name}</td>
        <td class="size">${sizef}</td>
        {{if error}}
        <td class="error" colspan="2">Error:
            {{if error === 'maxFileSize'}}File is too big
            {{else error === 'minFileSize'}}File is too small
            {{else error === 'acceptFileTypes'}}Filetype not allowed
            {{else error === 'maxNumberOfFiles'}}Max number of files exceeded
            {{else}}${error}
            {{/if}}
        </td>
        {{else}}
        <td class="progress"><div></div></td>
        <td class="start"><button>Start</button></td>
        {{/if}}
        <td class="cancel"><button>Cancel</button></td>
    </tr>
</script>
<script id="template-download" type="text/x-jquery-tmpl">
    <tr class="template-download{{if error}} ui-state-error{{/if}}">
        {{if error}}
        <td></td>
        <td class="name">${name}</td>
        <td class="size">${sizef}</td>
        <td class="error" colspan="2">Error:
            {{if error === 1}}File exceeds upload_max_filesize (php.ini directive)
            {{else error === 2}}File exceeds MAX_FILE_SIZE (HTML form directive)
            {{else error === 3}}File was only partially uploaded
            {{else error === 4}}No File was uploaded
            {{else error === 5}}Missing a temporary folder
            {{else error === 6}}Failed to write file to disk
            {{else error === 7}}File upload stopped by extension
            {{else error === 'maxFileSize'}}File is too big
            {{else error === 'minFileSize'}}File is too small
            {{else error === 'acceptFileTypes'}}Filetype not allowed
            {{else error === 'maxNumberOfFiles'}}Max number of files exceeded
            {{else error === 'uploadedBytes'}}Uploaded bytes exceed file size
            {{else error === 'emptyResult'}}Empty file upload result
            {{else}}${error}
            {{/if}}
        </td>
        {{else}}
        <td class="preview">
            {{if thumbnail_url}}
            <a href="${url}" target="_blank"><img src="${thumbnail_url}"></a>
            {{/if}}
        </td>
        <td class="name">
            <a href="${url}"{{if thumbnail_url}} target="_blank"{{/if}}>${name}</a>
        </td>
        <td class="size">${sizef}</td>
        <td colspan="2"></td>
        {{/if}}
        <td class="delete">
            <button data-type="${delete_type}" data-url="${delete_url}" data-id="${delete_data}">Delete</button>
        </td>
    </tr>
</script>
<script src="<?php echo site_url(); ?>assets/js/jquery-ui.js"></script>
<script src="<?php echo site_url(); ?>assets/js/jquery.tmpl.js"></script>
<script src="<?php echo site_url(); ?>assets/jquery-file-upload/jquery.fileupload.js"></script>
<script src="<?php echo site_url(); ?>assets/jquery-file-upload/jquery.fileupload-ui.js"></script>
<script src="<?php echo site_url(); ?>assets/jquery-file-upload/jquery.iframe-transport.js"></script>

<script type="text/javascript">

    jQuery(function () {
        jQuery('#fileupload').fileupload({
            url: '<?php echo site_url('/admin/series/upload/compressed_chapter'); ?>',
            sequentialUploads: true,
            formData: [
                {
                    name: 'chapter_id',
                    value: <?php echo $chapter->id; ?>
                }
            ]
        });

        jQuery.post('<?php echo site_url('/admin/series/get_file_objects'); ?>', { id : <?php echo $chapter->id; ?> }, function (files) {
            var fu = jQuery('#fileupload').data('fileupload');
            fu._adjustMaxNumberOfFiles(-files.length);
            fu._renderDownload(files)
            .appendTo(jQuery('#fileupload .files'))
            .fadeIn(function () {
                jQuery(this).show();
            });

        });

        jQuery('#fileupload .files a:not([target^=_blank])').live('click', function (e) {
            e.preventDefault();
            jQuery('<iframe style="display:none;"></iframe>')
            .prop('src', this.href)
            .appendTo('body');
        });

    });

</script>