Cuploadify: The CakePHP plugin for Uploadify

Jan 6 11 under Programming | 43 Comments

UPDATE #2: 2011/01/29 – Documentation for overloading include_scripts paths.
UPDATE #1: 2011/01/17 – Split article to separate element and view information.

Cuploadify @ GitHub: Repository | Download

Uploadify example

To install this plugin, simply unzip the latest stable build into your /app/plugins/cuploadify directory.

In my attempt to decouple all of my CakePHP projects into separate, reusable plugins, I’ve created a CakePHP plugin for Uploadify. For those of you who aren’t familiar with Uploadify, they describe themselves as “a powerful and highly-customizable file upload script.”

The Uploadify Element

At the heart of Cuploadify is the uploadify element which can be used in your views to quickly create a real-time file upload input box.

An Uploadify file input box can be inserted into your view like so:

$this->element("uploadify", array(
    "plugin" => "cuploadify",
    "dom_id" => "file_upload",
    "session_id" => $this->Session->id(),
    "include_scripts" => array($string...),
    "options" => array("script" => "/users/upload_profile_pic", $mixed...))
);

Options for the Uploadify element

plugin*
The value here must be specified as "cuploadify" in order to let CakePHP know that the element resides in the cuploadify plugin.

dom_id*
The DOM id of the Uploadify file uploader element.

session_id
As described in Uploadify’s FAQ, “Since the Flash file is what is communicating with your back-end script, the session information is not sent when a file is being uploaded.” If you want to give the back-end script the current session, you can either pass the "session_id" key through the scriptData option, or by specifying the session id through this parameter.

If you’re using the cuploadify component in your controller, the switching of the sessions will be taken care of for you. Otherwise, you will need to manually switch the session before it has been started (ie. in your controller’s beforeFilter() method) like so:

// this is not necessary if you're using the cuploadify component
if (isset($_REQUEST["session_id"])) {
    $session_id = $_REQUEST["session_id"];
    $this->Session->id($session_id);
}

include_scripts
In order to avoid including the same scripts multiple times — in the event that you have multiple uploadify inputs within the same page or are already including jquery/swfobject scripts — you can use this array to specify which scripts you wish to include when printing this element.
Possible values: "jquery", "swfobject", "uploadify", "uploadify_css".
As of v0.1.6, all of these values can be overloaded as keys, whose value will specify a custom path to its corresponding script.
Default values: No scripts will be included by default.

Example:

array("jquery" => "/path/to/jquery", "swfobject", "uploadify");

options
This associative array allows you to specify all the jquery options expected by Uploadify.
Possible values: View the Uploadify documentation to see all the possible keys and their expected values.
Mandatory option(s): script
Default option(s): The cancelImg and uploader options will use the files provided by Uploadify. No other options will be included.

To my knowledge, all paths/urls can use the CakePHP routing URLs.

* denotes mandatory options.

The Cuploadify Component

The cuploadify component contains helper methods to facilitate the back-end functionality likely to be used by an Uploadify input box. It is not required when using the uploadify element, but it’s purpose is to implement some of the basic actions generally used with Uploadify input boxes.

To use this plugin with your uploadify element, you will need to call the this component in the action specified by the script key of your element’s options parameter. In our current example, it would be like the following:

// don't forget to import the Cuploadify component!
App::import("Component", "Cuploadify.Cuploadify");
class UsersController extends AppController {
    ...
    function upload_profile_pic() {
        $this->cuploadify->upload();
    }
}

The Cuploadify component methods

upload($options = array($key=>$value,...))
This method can be used to upload the files specified by the Uploadify input box (to the destination specified by the input box).
Options: The only option currently available is "root", which allows the developer to specify a root directory to prepend to the upload directory specified by the "folder" key of the corresponding Uploadify input box. This gives a sort of sandbox effect to avoid certain XSS exploits.

And that’s it!

If there are any features missing or not working properly, feel free to let me know. Or – better yet – send me a patch with the fix :)

Social tagging: >

43 Responses to Cuploadify: The CakePHP plugin for Uploadify

  1. Josh Wickham
    January 17, 2011 at 6:16 am

    Hey, was looking into Uploadify last October for an upcoming CakePHP overhaul of my site (mainly for image uploading) and was postponed due to holidays, et. al. I come back to my project, and a link here is listed in a forum post from a Google query for ‘cakephp, uploadify’. Kudos!

    Anyway, will let you know how it went (just downloaded it), though some information on how to use the component aspect would likely be helpful for those new to CakePHP’s setup.

    Thanks much!

    Reply
    • achan
      January 17, 2011 at 2:13 pm

      Good point, Josh… I’ll try to re-organize this post to have clearer information about the uploadify element and component soon.

      Be sure to get the latest version though, as I’ve added some support for the uploadify events (you don’t have it as I just tagged it this morning after your comment :P ).

      I apologize, since this plugin is still very much in progress… I’m coding the features as I need them! Of course, if there are any features missing that you need, let me know and I will implement them ASAP. OR, you could implement them and send me a patch :)

      Luckily, since it’s a plugin, you can simply drop the latest version of the plugin into your plugins folder as they come.

      Thanks for checking it out and let me know if it suits your needs!

      Reply
      • Josh Wickham
        January 24, 2011 at 9:02 am

        Thanks much! I’ve installed and run this and have to say that this is a very sweet plugin; kudos! I’ve been doing some small tweaks here and there and am trying to determine if they’re specific to my site or if they would have some more general benefit. I will definitely send you a patch if they have broad enough changes.

        One thing that I’m having an issue with (something with uploadify, I’m sure) is that when you open the file browser, after about 5-10 seconds, the web browser decides that the plugin is no longer responsive; I’ve crashed out of Chrome and Firefox in Ubuntu 10.04 every time I take too long. I’m gonna open a bug with them, but just thought you might be interested to know!

        Reply
  2. Sam
    January 27, 2011 at 5:55 pm

    Good job ! I wrote my own helper using your base idea. It doesn’t support all of your feature but is easier to use. I think you might be interested. I will add configuration options and all uploadify features as soon as possible.

    <?php
class UploadifyHelper extends AppHelper {
 
  var $helpers = array('Js', 'Form', 'Html', 'Session');
 
  var $template = '
    $(document).ready(function() {
      $("#%s").uploadify({
        "uploader"  : "/files/uploadify.swf",
        "scriptData": %s,
        "script"    : "%s",
        "cancelImg" : "/files/cancel.png",
        "folder"    : "/uploads",
        "auto"      : true,
        onComplete  : function(event, queueID, fileObj, reponse, data) {
          $("#callback").append("<a / rel="nofollow">");
        }
      });
    });
  '; 
 
  function file($fieldName, $script, $options = array()) {
    $options = $this->_initInputField($fieldName, $options);
    $this->Html->css("/css/uploadify.css", null, array("inline" => false));
    $this->Html->script(
        array("swfobject.js", 
              "/jquery-1.4.2.min.js", 
              "/jquery.uploadify.v2.1.4.min.js"),
        array("inline" => false));
    $this->Html->scriptBlock(
          sprintf($this->template, $options['id'], 
              $this->Js->object(
                  array('session_id' => $this->Session->id())), 
              $script), 
          array("inline" => false));
    return $this->Form->file($fieldName, $options);
  }
}
?>

    In my view, it now looks like this:

    echo $this->Uploadify->file('picture', '/controller/upload');
    Reply
  3. Maurelle Mejos
    February 12, 2011 at 10:15 pm

    Does this support cakephp 1.3.7? I am having trouble implementing this. please help.

    Reply
    • Amos Chan
      February 12, 2011 at 10:35 pm

      Yup, it works on 1.3.7, as for as I can tell.

      What are you having problems with?

      Reply
      • Maurelle Mejos
        February 15, 2011 at 9:15 pm

        It works now but can we use uploadify events for this? how?

        Reply
        • Amos Chan
          March 3, 2011 at 11:22 am

          You certainly can use uploadify events. They are treated as $options in the uploadify element.

          There are two ways to implement the events:

          Define the whole function within php:

          $options = array(
    "onAllComplete"=>
        "function() { alert('completed!'); }"
);

          Define the function in javascript and pass the function name into the $options:

          function allCompleted() {
    alert("completed!");
}
 
<?php
$options = array(
    "onAllComplete" => "allCompleted"
);
?>

          The $options array can then be passed to the uploadify element.

          Reply
  4. Mike
    February 13, 2011 at 2:58 pm

    Hi,

    Does it work with CakePHP 1.2?

    Thanks! :-)

    Reply
    • Amos Chan
      February 13, 2011 at 10:50 pm

      Unfortunately, this plugin is not compatible with 1.2 due to changes in the Core API of CakePHP between 1.2 and 1.3. For example, the Js helper of 1.3 allows the use of JQuery instead of 1.2′s default of Prototype. Another reason is that CakePHP has changed location of plugin assets from /vendors to within the plugin’s folders.

      The concept is the same, but you’ll need to make sure you revert everything to 1.2′s standards in order to get it working… Good luck!

      Reply
  5. Jim
    February 19, 2011 at 11:10 am

    Hi Amos,
    I can’t have it upload files. The control appears on the page but nothing happens after “upload”. I’m using Auth but I put the method called but Uploadify in the “allow” list. What is the $this->Cuploadify->upload(); method for again? Do I need it if I use the “auto => true” option? I put the line App::import(“Component”, “Cuploadify.Cuploadify”); in my controller so the session should be kept. Do I have to do something else?
    Thanks !
    Jim

    Reply
    • Amos Chan
      February 22, 2011 at 4:36 pm

      Hi Jim,

      The $this->Cuploadify->upload(); method is what uploads the files from Uploadify to the server with the parameters you specified… so yes, it’s absolutely needed in order to upload your files!

      The only way you could omit the upload() method is if you implemented the uploading code yourself.

      Hope that helps!

      Reply
  6. David
    March 3, 2011 at 7:35 am

    Hi Amos,

    I am really frustrating that I just can’t get that to work in mine. I unziped your plugin in to my plugin folder and I ran the test, everything shows right, but when I really select a file, the upload box shows me an “HTTP Error”, is a HTTP 404 error, it is the same when I run it in localhost/exceltv/cuploadify/tests/upload or in my real project.

    The only thing I can do now is to attach my app in this zip file, I have also put the sql dump in the zip file. I know I am asking too much. Just in case you want to take a look at it. Here is the link:
    http://eedo.thinqwise.org/content/wco/exceltv.zip

    If you could help me to run the test file successfully in the plugin folder will be a huge help!

    Thank you so much!!!

    -David

    Reply
    • Amos Chan
      March 10, 2011 at 2:53 pm

      Hi David,

      The demo works for me…. the only thing I can suggest is to make sure that your upload folder is writable and to take into account that the value passed into the “folder” option is relative to your document root.

      So… I unzipped your code, uploaded a sample file and checked in /files (not necessarily /app/webroot/files) and it was there.

      Reply
  7. Larry
    March 10, 2011 at 1:29 pm

    I am having the exact same problem as David. The debug log say:

    “Debug: initializing cuploadify component…”

    I think is has something to do with the session, but i can not figure out how to fix it. I can get uploadify to work on its own with the simple script from the uploadify site but not with cuploadify. I would really like to use cuploadify. Any help would really be appreciated.

    Thanks so much

    Larry

    Reply
  8. Larry
    March 10, 2011 at 10:26 pm

    Everything works up to the point that the uploadify progress bar reaches 100%. Uploadify then turns red and it say “HTTP Error”. The files are never uploaded. I have put a “files” folder everywhere. They are all writable. This happens both locally (using WAMP) and on my live server. When i go to temp/logs/debug it say “Debug: initializing cuploadify component…” but nothing else. Not sure what i am doing wrong. I tried Davids example and it acts the same as mine.

    Reply
    • BenJ
      March 30, 2011 at 2:44 pm

      First of all thank you Amos for this component.
      Larry, Have you solved the problem for the HTTP error?
      I don’t understand what script this message come from, and i have no message in the firebug console, either in the files temp/logs/

      Otherwise when i use $this->cuploadify->upload(); in my upload function in the controller, I have an error “Undefined property: UsersController::$cuploadify”
      But I import the Cuploadify component in this controller.

      thank you for your help

      Reply
      • BenJ
        March 30, 2011 at 5:49 pm

        Ok i don’t have anymore the error message for $this->cuploadify->upload();
        I put this line in the add function instead of putting it into an upload_img function
        (because my controller is a mediafiles controller so i thought upload and save the data with the same function)

        Anyway I have not yet found the solution for the HTTP error

        Reply
        • BenJ
          March 31, 2011 at 9:53 am

          Sorry for the useless post.
          My HTTP error was the 302, redirect problem. probably caused by flash. I solved the problem by adding the beforeFilter function in my Controller :

          function beforeFilter() {
          parent::beforeFilter();
          if (isset($_REQUEST["session_id"])) {
          $session_id = $_REQUEST["session_id"];
          $this->Session->id($session_id);
          }
          }

          Reply
          • Amos Chan
            March 31, 2011 at 9:59 am

            Hmmm.. interesting. Was your controller using the Cuploadify component? If so, this code should be automatically hooked by the component’s initialize() method…

            Thanks for posting your results!

          • BenJ
            April 1, 2011 at 6:46 am

            you’re right, my component wasn’t imported with the line 

            App::import("Component", "Cuploadify.Cuploadify");

            I have no HTTP error without the beforeFilter since i have put Cuploadify in the components variable.
            My controller :

            class MediafilesController extends AppController {
	var $name = 'Mediafiles';
	var $components = array('RequestHandler', 'Cuploadify.cuploadify');

 	function upload_img() {
 		$this->cuploadify->upload();
 	}

	function add() {
		// add media info in the database in ajax after upload
	}
}

            Thanks!

  9. Charles Dixon
    March 15, 2011 at 12:57 pm

    I’m using ACL for the authentication and admin users have access to all actions on all controllers. In the admin section of the site (accessible only to admin users) I’m trying to upload images using cuploadify.

    I’ve had an assortment of problems with files not uploading etc.. which I’ve now resolved by adding my upload action (in my controller) to the list of ACL allowed actions so that the action can be accessed by anyone. This isn’t ideal but it’s ok whilst I try to sort this all out. After selecting files they upload fine but upon clicking any link I get logged out of the admin section with an auth message stating “You are not authorized to access that location.”.

    Any idea why this would be happening? The only thing that I can think of is that the flash is somehow breaking the auth stuff, especially as it wouldn’t even upload the files until I made the action accessible to all.

    Cheers.

    Reply
  10. Steve L
    March 18, 2011 at 9:44 am

    Thanks very much for this plugin Amos. I thought I’d post back for anyone else using the plugin with the two issues I had, hopefully it may help.

    IE7 Error: Expected identifier, string or number
    For IE7 the plugin has a JS error due to the fact IE7(& IE6) moans about trailing commas found on “uploadify.ctp” cake element. This is because on the foreach loop (line 56) a comma is echoed at the end of each loop. This means that the last loop through will have the erroneous trailing comma. You will need to move the echo statement so it does not append the “,” at the end of the last loop (or not use IE7) either way easy to fix.

    I think a couple of other people have had a “http error” after 100% progress, for me this was because I had my cake install in a subfolder. Simply adding the subfolder to the options array on line 11 of upload.ctp, for example “script” => “/subfolder/cuploadify/tests/upload” fixed the issue.

    Thanks again – this was a huge help.

    Cheers,

    Steve L

    Reply
  11. Martin
    April 13, 2011 at 1:46 am

    Hi there,

    i have used your component and all the setup was easy and it is working fine, but only on my local setup. (wamp)

    when i moved my app to the live server the component is throwing HTTP error (404) which means “Could not find upload script.” but the funny thing is the file was uploaded to correct place, which means the upload script (/admin/products/upload) was found.
    I placed some log debug to the actual upload method and all debug messages were there in the log file, again it means the upload script was executed, not sure what to do now.

    - the session seems to be regenerating correctly.
    - i’have used uploadify on the same live server but without cakephp and it is working fine

    no idea where to look and what to do :(

    many thanks for any help.

    Reply
  12. Math
    April 13, 2011 at 2:33 am

    hi im beginner in cakephp, but cannot make using meio upload!! your test and upload the images are saved to where? could provide a download to study the script? many thanks!!

    Reply
  13. Entharion
    May 3, 2011 at 8:30 am

    How will I process the information after it has been parsed by the php script? I’m trying to use the onComplete function but because it’s being used in php I can’t seem to make it work.


    echo $this->element("uploadify", array(
    "plugin" => "cuploadify",
    "dom_id" => "file_upload",
    "session_id" => $this->Session->id(),
    "include_scripts" =>
    array("jquery", "swfobject", "uploadify", "uploadify_css"),
    "options" => array(
    "script" => "/metavideo/files/uploadify.php",
    "buttonImg" => "/cuploadify/img/selecteer.png",
    "cancelImg" => "/metavideo/img/icons/x_alt_16x16.png",
    "folder" => "/metavideo_temp",
    "hideButton" => true,
    "wmode" => "transparent",
    "fileExt" => "*.jpg;*.gif;*.png",
    "fileDesc" => ".jpg .gif .png",
    "sizeLimit" => "102400",
    "auto" => true,
    "multi" => false,
    "removeCompleted" => false,
    "width" => "190",
    "height" => "28",
    "onComplete" => "function(event, ID, fileObj, response, data) {
    'alert(fileObj.name)';
    }"
    ))
    );

    My backend script looks like this, because I couldn’t get it to work with the one you supplied.

    and in my controller I have it set up like this.

    class TargetTypesController extends AppController {
    ...
    var $components = array('Cuploadify.cuploadify');
    ...
    function edit($id = NULL) {
    $this->cuploadify->upload();
    }
    }

    I’ve literally tried everything I can to get the information out, but so far nothing seems to work. I’m using the latest 1.7 version of your plugin with a .htaccess protected Cakephp version 1.3.7.

    So can you please tell me what’s wrong with the script and what I should do because I am at a loss here.

    Reply
    • Amos Chan
      May 3, 2011 at 11:04 am

      what do you mean by process? client-side or server-side?

      if you want to process the file server-side, you would add code after the upload() method in your edit(). upload(), if ran successfully, will upload your file to /metavideo_temp and then it’s up to you what you want to do with it. You’d process it like you’d normally process it in php.

      On the client-side, when the upload has been completed, the callback specified in onComplete will be called. However, I’ve noticed that your function has your alert() wrapped in single-quotes… is that a typo? if not, that may be why you don’t see your alert. Try removing the single quotes.

      Reply
      • Entharion
        May 4, 2011 at 3:35 am

        By process I meant processing the php in the XXX_controller.php after the form has been submitted, so I can put the name of the file in the database.

        But now I removed the quotes and I get an alert with the filename, so I guess I can load it in a variable now… so that works. XD
        How silly… I had added them because php stopped without them, but that works now.

        Any tips on getting the data into the controller more easily?

        Reply
        • Keith
          May 16, 2011 at 7:48 am

          Entharion, can you give more details on how you were able to save the filename to the database? I have it to the point where the files are copying fine and the ALERT displays based on your code.

          I’m want to save the filename to the database as well, so I will to call the controller like “TargetTypesController” pass it the filename and save it to the database in the controller or should it be done in the component?

          Thank you in the advance.

          Reply
  14. Gary
    May 8, 2011 at 8:52 am

    One thing that wasn’t really clear to me was the the session management part. If you find that you are losing the sessions take note of two things. If you’re not using the cuploadify component ensure you put this code in the app_controller. It didn’t work for me in the beforeFilter of the controller I was working in.

    // this is not necessary if you're using the cuploadify component
if (isset($_REQUEST["session_id"])) {
    $session_id = $_REQUEST["session_id"];
    $this-&gt;Session-&gt;id($session_id);
}

    I actually did it like this to lock a couple of things down to just the action I needed it for:

    if (isset($_REQUEST["session_id"]) &amp;&amp; $this-&gt;action == "add" &amp;&amp; $this-&gt;params['controller'] == 'images') {
   $session_id = $_REQUEST["session_id"];
   $this-&gt;Session-&gt;id($session_id);
}

    Also, as pointed out in the comments earlier but to sum some things up ensure you change this parameter. I had already wrestled with this on a previous project and it’s a toughy if you don’t know what’s happening

    Configure::write('Session.checkAgent', false);
    Reply
  15. Keith
    May 17, 2011 at 9:22 am

    For those who are having a problem with the files actually uploading to the specified folder defined in upload.ctp, here’s what happened to me. Locally when I had:

    “folder” => “/files”

    the files would go to the “files” directory off my document root directory not the cake’s webroot directory. However, when I uploaded the code to my server the files were not in the “/files” directory. After pulling out my hair I added a slash at the end of the directory:

    “folder” => “/files/”

    and the files were now there.

    Reply
  16. Jason Galuten
    June 10, 2011 at 5:00 pm

    I am getting the HTTP Error as well. I could tell from the log that the initialize method in the cuploadify component is not getting very far. I assumed that the line: if (isset($_REQUEST["session_id"])) { is evaluating to false. So I tried inserting this line before it: debug($_REQUEST); and what I get is:

    Array
    (
    [CAKEPHP] => 2ab485b2fdeeedc64b3fed550e449644
    )

    So, I’m trying to dig around some more and try some things, but not sure where it’s going wrong. Any help would be much appreciated. I am using Cake v1.3.9

    Thanks,
    Jason

    Reply
  17. Nick
    August 3, 2011 at 7:20 pm

    Very cool plugin! Thank you for sharing! Something I noticed, though, is that if the target file already exists, it is overwritten. I think there should be an option for the “upload” method called “overwrite”. It would be a boolean. If it was set to “true”, the file would be overwritten, which is the current behavior. If it was set to “false”, the filename would have a “2″ put at the end. If that file exists as well, the “2″ would be changed to a “3″. It would keep checking until it finds that the file doesn’t exist.

    Reply
  18. frndforever
    August 3, 2011 at 10:49 pm

    i tried this one…. it worked thanks a lot man…
    another way of doing this is also listed here
    http://www.instatutorial.com/using-uploadify-with-cakephp

    Reply
  19. tg2345
    August 23, 2011 at 12:50 pm

    Even after setting the session id in both the app_controller, my main controller, and using the component I still got a 302 redirect error.
    With some debugging the problem was the Auth component, when it ran the check on the session key (Auth.User is the default) it could not find the data even though the session id had been replaced and had become a valid session (checked using Session->valid()).

    Solution being, I had to save the username, and password hash in a cookie, or you can save it in the session. To be safe I encrypted them, and set them as named params in the url. When submitted, I would decrypt the data, and use $this->Auth->login() function to login the user in the beforeFilter. Then set the session id for shits and giggles, and that was the best way I could devise to solve my problem.

    Reply
    • BenJsno
      September 21, 2011 at 6:19 am

      I have the same error.
      In local all works fine but on the distant server, the upload don’t start and gives me an HTTP 302 error.
      Can you share your solution, because i use Auth component too, it’s maybe the problem.
      Thanks

      Reply
  20. Brian
    October 2, 2011 at 9:21 am

    I must be doing something wrong, running the test after some tweaks I get 100% complete. File is nowhere to be found. Running some extra debug

    2011-10-02 14:19:18 Debug: initializing cuploadify component...
2011-10-02 14:19:18 Debug: ------data------
2011-10-02 14:19:18 Debug:
2011-10-02 14:19:18 Debug: $_FILES EMPTY: 1
2011-10-02 14:19:18 Debug: Array
(
    [script] => /mrlink/cuploadify/tests/upload
    [folder] => /mrlink/files
    [buttonText] => ADD FILE
    [auto] => 1
    [multi] => 1
    [uploader] => /mrlink/cuploadify/files/uploadify.swf
    [cancelImg] => /mrlink/cuploadify/img/cancel.png
)

    $_FILES is empty?

    Reply
  21. Joost
    October 30, 2011 at 11:59 am

    Do you have plans to make this work on CakePHP 2?

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">