1. Documentation
2. Change Log

Uploadify is a jQuery plugin that allows the easy integration of a multiple (or single) file uploads on your website. It requires Flash and any backend development language. An array of options allow for full customization for advanced users, but basic implementation is so easy that even coding novices can do it.

Documentation ¶

Requirements ¶

• Yii 1.0 or above

Installation ¶

• Extract the release file
• Copy the uploadify folder under protected/extensions
• Copy the images/uploadify folder to webapp/images
• Copy the js folder under webapp
• Copy the uploadFileAction.php file to protected/controller/upload/ folder

Usage ¶

See the following code example: the mult variable can be set to true or false if you want to upload multiple or single files.

$this->widget('application.extensions.uploadify.uploadifyWidget', array('mult'=>'false'));
<div id="fileUpload">You have a problem with your javascript</div>
        <div class='photo_menu'>
            <a href="javascript:startUpload()">Iniciar Subida</a> |  <a href="javascript:$('#fileUpload').fileUploadClearQueue()">Limpiar Cola</a>
        </div>

create an action in the controller you want use

public function actions() {
        return array(
            'upload'=>'application.controllers.upload.UploadFileAction',
        );
    }

on the script at 'protected/extensions/uploadify/views/uploadifyWidget.php' file you can change the url script to the action file is located. in this case I set on the controller 'uploadify'

<script type="text/javascript">
    $(document).ready(function() {
        $("#fileUpload").fileUpload({
            'uploader': '../images/uploader.swf',
            'cancelImg': '../images/cancel.png',
            'script': '/uploadify/upload',
            'folder': '../images/gallery',
            'fileDesc': 'Image Files',
            'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
            'multi': <?php echo $mult; ?>,
            'buttonText': 'agregar foto',
            'displayData': 'speed',
        'simUploadLimit': 1,
        'onComplete': complete,
        onError: function (a, b, c, d) {
        if (d.status == 404)
            alert('Could not find upload script. Use a path relative to: '+'<?= getcwd() ?>');
        else if (d.type === "HTTP")
           alert('error '+d.type+": "+d.status);
        else if (d.type ==="File Size")
           alert(c.name+' '+d.type+' Limit: '+Math.round(d.sizeLimit/1024)+'KB');
        else
           alert('error '+d.type+": "+d.text);
        },
    });

    function complete(evnt, queueID, fileObj, response, data) {
        alert("image has been uploaded succesfully!");
    }
});
function startUpload () {
    var params = '&newFileName='+$('#photo_name').val()
    $('#fileUpload').fileUploadSettings('scriptData', params);
    $('#fileUpload').fileUploadStart();
}
</script>

I am using this along with image extension to once i upload the picture, be able to save the info to db and create different sizes with imagick or gd. It is also able to modify the picture and delete it.

but this code only allow upload pictures for now.

Change Log ¶

September 27, 2009 ¶

• Initial release.