Zend Framework Uploadify Extension

UPDATED: 26.7.2010, added working example

ZFUE – Zend Framework Uploadify Extension v 1.0

Content

How does it works
What you need.
How to
    – Download
    – ZF Form Element
    – ZFUE My_Form_Element_File setup()
    – Handling upload
    – Options
    – Fix session problem
TODO
License
Bugs
Download

How does it works

ZFUE tries to simplify Uploadify integration and prevent duplicate code for handling file upload.
It embeds itself upon exiting Zend_Form_Element_File object and retrieve as much information, as it can from original setup. That means it check for different ZF validators, such es ‘Extension’, ‘Size’ and creates necessary settings for Uploadify.
It also handle uploading file into defined destination (if not defined, file is uploaded to default temp directory), so you don’t have to create specific page just to handle file uploading for Uploadify.
While uploading, it validates uploaded file against setup validators, so it provides same level of security as classic file upload.
After form submit, it overwrites Zend_Form_Element_File settings and tries to simulate original file upload behavior.
ZFUE also solves $_SESSION problem for non IE browsers.

What you need

Zend Framework – i am using version 1.9 but this extension should work every with newer versions, as long as there will not be drastic change in ZF library code.
Uploadify – i am using version 2.1.0 (what is latest at the moment)

You will also need jQuery and SWFObject libraries, but uploadify already comes with this, so you don need to download it separately, unless there will be newer version you would like to use.

How to

Download

Download latest version. Unzip downloaded content and copy it to ‘library’ directory, next to ‘Zend’ directory (on the same level). So your ‘library’ directory tree will looks like this:

  • library
    • My
      • Form
        • Decorator
          • Uploadify.php
        • Element
          • File.php
          • Uploadify.php
    • Zend


ZF Form Element

  1. In your Zend_Form definition, replace Form_Element_File with My_Form_Element_File.
  2. Add prefix path to your decorator (allow ZF to find your custom decorator).
  3. Load custom decorator.
  4. At the end of setup chain call ‘create()’ function. (if you do not use setup chain, call this function when you finish your setup)
Before


$file = new Form_Element_File( 'my_file' );
$file->setOptions(array(
    'required' => true,
    'label' => 'Label'
))
->setDestination( '/tmp' )
->addValidators(array(
    'array( 'Count', true, 1 ),
    'array( 'Extension', true, array( 'csv' ))
))
->setDecorators(array(
    'File',
    'Description',
    'Label',
    'array('Errors', array('placement' => 'prepend'))
));
$form->addElement($file);

After


$file = new My_Form_Element_File( 'my_file' );
$file->setOptions(array(
    'required' => true,
    'label' => 'Label'
))
->setDestination( '/tmp' )
->addValidators(array(
    'array( 'Count', true, 1 ),
    'array( 'Extension', true, array( 'csv' ))
))
->addPrefixPath('My_Form_Decorator', 'My/Form/Decorator/', 'decorator')
->setDecorators(array(
    'File',
    'Description',
    'Label',
    'array('Errors', array('placement' => 'prepend')),
    array('Uploadify', array('text' => 'Nahrať súbor'))
))
->create();
$form->addElement($file);

Can it be simpler ?

ZFUE My_Form_Element_File setup()

Now you have to write My_Form_Element_File ‘setup()’ function.

$options – represent Uploadify options
Several options are created for you automatically and you are not allowed to change them. (If you do, ZFUE will not work properly.)
These are:
‘sizeLimit’, ‘fileExt’, ‘fileDataName’, ‘script’, ‘scriptData’
ZFUE custom option:
‘myShowUpload’ - tells if upload link will be displayed on the beginning.

Then you have to load ‘uploadify.css’, ‘jquery.uploadify.v2.1.0.min.js’, ‘swfobject.js’ and ‘jQuery.js’.
You can do this here or anywhere else as far it will be rendered on the page.

You can also add rename filter, to rename uploaded file.
$this->addFilter(‘rename’, ‘new_name’);
There is build function in My_Form_Element_Uploadify what you can use.
$this->addFilter(‘rename’, $this->getRandomFileName());

Handling upload

In your controller, you are handling file upload similar to this:

$form = new Custom_Zend_Form();
if ($this->getRequest()->isPost()) {
    if ($form->isValid($this->getRequest()->getParams())) {
        $form->getElement('my_file')->receive();
    }
}

So all you need to do is add one additional condition:

$form = new Custom_Zend_Form();
if ($this->getRequest()->isPost()) {
    if ($form->isValid($this->getRequest()->getParams())) {
        if ( ! $subForm->getElement('subor')->isUploadify()) {
            $form->getElement('my_file')->receive();
        }
    }
}

And thats all.

Options

In your controller, you can add rename filter to original file uploader and use My_Form_Element_Uploadify function ‘getRandomFileName()’ to generate random name:

$form->getElement('my_file')->addFilter('rename', $subForm->getElement('subor')->getRandomFileName())->receive();

Fucntion:

$form->getElement('my_file')->getFileName()

will return proper file path.

Fix session problem

Overview

Flash is lame program and cant handle sessions in other browsers than IE. So if you use sessions to authenticate user, you have to pass the sessions into flash and than again retrieve it in the code.
Right now, ZFUE is automatically adding PHPSESSID into Uploadify ‘scriptData’ option (thats why you are not allowed to change it right now, or you can, but you have to think about this session problem)
To retrieve $_SESSION information before you authenticate user, call this function:

My_Form_Element_Uploadify::bypassSession();

Usually before:
if (Zend_Auth::getInstance()->hasIdentity()) {}

TODO

Overwrite these functions and populate them with correct data when ZFUE is in ues:
$form->getElement(‘my_file’)->getFileSize();
$form->getElement(‘my_file’)->getMime;
Allow to setup Uploadify ‘scriptData’ option.
Multiple file upload.

Download

ZFUE.v.1.0.zip – 6. 4. 2010

ZFUE GIT repository with working example

note: it’s first time i am using GIT so every help would be appreciate. also if someone would like to contribute, email me. (email is on contact page)

35 thoughts on “Zend Framework Uploadify Extension

  1. mits

    Hi,

    I have the same error like @Tom.
    $form->getElement(‘file’)->isUploadify() – return false

    When I change line:
    protected $_isUploadify = true;

    in My_Form_Element_Uploadify then I respone error (after upload):
    info: 301
    type: “HTTP”

  2. Pankaj

    Could you please provide steps to integrate uploadify with Zend framework 1.10?

    I am using Zend 1.10

    so please help me with this as i need to upload multiple files and save them to Temp folder.

    Please help me..

    Regards,
    Pankaj

  3. gondo Post author

    hi, if its version 1.0 or higher, this should work.
    uploading multiple files wasn’t integrated yet, but you are more than happy to contribute.

  4. Tom

    @gondo: Thank you for your help but I think I have to fix this by my own and I also have nearly copy&past the code from you to my project but it still doesnt work. I also tried it with using different JQuery Versions but it doesnt work. Always the same error: “File was not uploaded”…

    @mits: Have you found a solution yet?

  5. Sems

    Hello i have installed everything problem is don’t know where to handle files i am using multi files example is handling image on submit. I can not understand when to handle files and where ? when i handle on submit only one file is in form other files are in folder i have selected but for not continue names of files so out of control how many files are uploaded and names. Then i try to handle files one at the time in same controller -> action but end up with nothing. Can someone help me to figure that out. Thanks very match.

  6. gondo Post author

    @sems: hi. this example shows how to handle just one file. in theory it should work for multiple files as well with some adjustments, but i’ve never needed that so i’ve not tried that.

    @all: main reason for above code is to demonstrate the idea behind integrating Uplodify with ZF. it includes working example (or at least for me), but, as whole ZF, you ll have to understand how it works and adjust it to your needs.

  7. Luciano

    Very good integration with Zend, but I’m having a little problem, I need to get the name of the file you’ve uploaded and save to a database, you can give me a hand?

  8. gondo Post author

    @Luciano: hi. it was some time ago since i last time worked with this extension. but the main idea for this is, to behave like and extension of default Zend_Form_Element_File so you should be abe to get the file name as you would do it with Zend_Form_Element_File by calling getFileName() function.

  9. kroupy

    I am reallly fascinated on this zend form element… really nice job you have done here. It would be interesting if somebody could write an zend form element class for uploadifiy that could be used in AJAX form submit. sorry for my english

  10. Daniel

    How to determine the filepath / filename in onComplete if the rename filter is active?

    onComplete: function(event, queueID, fileObj, response, data)

    fileObj.filePath is the path BEFORE the rename filter renamed the file.

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>