How to use Uploadify with CakePHP

On 05.06.09, In PHP Tutorials, by Andrei Gabreanu

Tweet (function() { var s = document.createElement(‘SCRIPT’), s1 = document.getElementsByTagName(‘SCRIPT’)[0]; s.type = ‘text/javascript’; s.async = true; s.src = ‘http://widgets.digg.com/buttons.js’; s1.parentNode.insertBefore(s, s1); })(); TweetIf you don’t know what uploadify is, it is an excellent script (looks good also by default) that lets you override the default file browser into an input that looks great, is flexible [...]

If you don’t know what uploadify is, it is an excellent script (looks good also by default) that lets you override the default file browser into an input that looks great, is flexible and uses Jquery, Flash and PHP.

It allows you to upload multiple files simultaneously, shows a progress bar and is very easy to customize.

Using this excellent script into a basic application where you don’t use friendly url’s is piece of cake and you will find many examples on the script’s homepage. However, using it within CakePHP(or any other framework for this matter) may prove a bit tricky.

Here is the best way to do it as i find out…

After you have downloaded the files and extracted the archive, create a layout named upload.ctp in your app/views/layouts/ folder with the following code:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
< html xmlns="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
< title >< ? echo $title_for_layout; ?>< /title>

< !--JAVASCRIPT-- >

< !--jQuery-- >
< script src="< ?= $html->url("/js/jquery-1.3.2.min.js")?>"       type="text/javascript">< /script>

< script src="< ?=$html->url("/js/jquery.uploadify_source.js")?>" type="text/javascript">< /script>

< !--CSS-->
< link rel="stylesheet" href="url("/css/main.css")?>"         type="text/css" media="screen"/>
< link rel="stylesheet" href="url("/css/uploadify.css")?>"    type="text/css" media="screen"/>
< link rel="stylesheet" href="url("/css/cake.generic.css")?>" type="text/css" media="screen"/>
< /head>
    < body>
        < div id="wrapper">
            < div id="content">
                < ? echo $content_for_layout; ?>
            < /div>
        < /div>
        < ?php echo $cakeDebug; ?>
    < /body>
< /html>

This layout assumes that you have a basic the following files (and locations):

  • /app/webroot/js/jquery-1.3.2.min.js
  • /app/webroot/js/jquery.uploadify_source.js
  • /app/webroot/css/main.css
  • /app/webroot/css/uploadify.css
  • /app/webroot/css/cake.generic.css

Next, create a controller into your application and an action as following :

Class MyControllers extends AppController{
 
    public function prepare_upload() {
 
        $this->layout = "upload";
 
    }
}

This controller will let you to display the uploadify page file selection page.

Create a view with the following contents (these are very important to stick with – try to modify them at your own “risk”):

< script type="text/javascript">
    $(document).ready(function(){
        var path = "<?= $html->url("/app/webroot/uploadify/")?>";
        $('#fileInput').fileUpload({
            'uploader': path + '/uploader.swf',
            'script': path + '/upload.php',
            'folder': path + '/files',
            'cancelImg': path + '/cancel.png',
            'fileExt':"*.leadmesh",
            'fileDesc':"MyExtensions files",
            'auto':true,
            'onComplete': function(event, queueID, fileObj, response, data) {
                window.location = "< ?= $html->url("/MyControllers/process_upload/")?>" + fileObj["name"];
            }
        });
    });
< /script>
< div style="padding:15px">
    < div id="upload_file" style="text-align:center">
        < h3>Upload a ".nice_extension" file to import.< /h3>
        < div align="center">< input height="30" width="110" type="file" name="fileInput" id="fileInput" align="center" />< /div>
    < /div>
< /div>

This view assumes that you have the following files and locations :

  • /app/webroot/uploadify/uploader.swf
  • /app/webroot/uploadify/upload.php
  • /app/webroot/uploadify/files/ – Must be writable
  • /app/webroot/uploadify/cancel.png

Where app/webroot/uploadify/ and app/webroot/uploadify/files are 2 writable folders (chmod 777 to them both).

Good, so now we have a basic page were we can upload “MyExtensions” files – this can be anything you want. For example “Uploadify files”.
Now we go to process the files. In this example we can read the file for stuff that we want and we will delete it from the server. This is very important to do – you can just copy it somewhere safe out of webroot if you need to have the file for later use – since that folder is public available and it can be viewed by anyone. Afterwards we refresh the parent page – you can just do something else ofcourse.

Create the following action in your MyControllers controller :

public function process_upload($filename) {
    $refresh = "";
    if (file_exists("uploadify/files/".$filename) === false) {
        $this->Session->setFlash('The upload failed. Please try again.','default',array("class" => "notification error"));
    } else {
        $file =  file_get_contents("uploadify/files/".$filename));
        if (!$file) {
            $this->Session->setFlash('The upload failed because the file contents is malformed</em>','default',array("class" => "notification error"));
        } else {
            /*
            * DO STUFF HERE
            */
            $this->Session->setFlash('The file was uploaded succesfully','default',array("class" => "notification confirm"));
            $refresh = "parent.location.reload();";
        }
        /*
        * DELETE OR MOVE YOUR FILE HERE. MAKE SOME CHECKS BEFORE YOU DO THAT THOUGH.
        */
        unlink("uploadify/files/".$filename);
        $this->set("refresh",$refresh);
    }
}

Now for the view of this method:

< div style="margin:15px;">
    < ?php $session->flash();?>
    < script type="text/javascript">
        < ?=$refresh?>
    < /script>
< /div>

And you are done!

Very important things to remember/add:

  • The uploader.swf,upload folder(files) the cancel picture and the script foruploading are all public so remember to harden your security before going with this live
  • The files that you upload will be public thus can be viewed by anyone

Hope you liked it!