How to integrate uploadify in Zend Framework 1.9.6


A detailed tutorial will show you how to integrate Zend Framework version 1.9.6 with jQuery Uploadify version 2.1.0. The tutorial covers all the basic aspects of the process from installing the framework on a multi zend applications with the same library/separate configurations system to integrating the jQuery Uploadify into your website. The uploads will be made in a secure folder, outside the public area of your server from where you can manipulate the files as you wish.

In a previous post, i talked about integrating the script jQuery Uploadify into the CakePHP framework. Today, i will show you how to integrate it into Zend Framework 1.9.6.
Our goal is simple: create a new zend application that uses a common library, gets its configuration files from a custom location and integrate it with Uploadify

Application folders & the public files

First of all, you will need to download the Zend Framework. You can download it from the Zend site here. In this tutorial, i will work with the 1.9.6 version of the framework.

We will now create our directory structure for the framework.

  • Create a folder in /var/www/public_html/uploadify/ named public.
  • Create two folders in /var/www/ named application and library.
  • Inside the library folder, create a new folder named 1.9.6. Inside this folder, add your Zend library folder, so you would have /var/www/library/1.9.6/Zend.

In your public folder add a file named index.php with the following contents:

[file]http://phpdev.ro/wp-content/code_snippets/how-to-integrate-uploadify-in-zend-framework-1-9-6/1.php[/file]

Add a new file called .htaccess here with the following contents:
[file]http://phpdev.ro/wp-content/code_snippets/how-to-integrate-uploadify-in-zend-framework-1-9-6/2.php[/file]
Create a folder named scripts and a folder named images. Inside the scripts put the jQuery library, the jQuery.uploadify.v2.1.0.min.js, the swfobject.js and create a new file named scripts.js.

Inside the scripts.js add the following lines.

[file]http://phpdev.ro/wp-content/code_snippets/how-to-integrate-uploadify-in-zend-framework-1-9-6/3.php[/file]

Inside the public folder put the uploadify.swf .

Inside the images folder put the cancel.png .

Now you are done with the public folder. On to the application..

The application config

The config file ( /configs/application.ini ) can have the default values.

[file]http://phpdev.ro/wp-content/code_snippets/how-to-integrate-uploadify-in-zend-framework-1-9-6/4.php[/file]

The application controller

Create a new file in your controllers folder named UploadifyController.php with the following contents:

[file]http://phpdev.ro/wp-content/code_snippets/how-to-integrate-uploadify-in-zend-framework-1-9-6/5.php[/file]

Create a folder in your APPLICATION_PATH named uploads and make it writable by PHP (ex: chmod 0777).

What have we done so far?
Now, we basically have an application that displays a nice empty page with the uploadify script included, have all the JS code in external files and JS variables that contain dynamic data (aka PHP variables) in our main layout.

The application views

Make sure you have the folder uploadify in your /views/scripts/ folder and inside it the files index.phtml and upload.phtml .

Inside the index.phtml make sure you have the following line somewhere (where you want to have the uploadify generated) :

[file]http://phpdev.ro/wp-content/code_snippets/how-to-integrate-uploadify-in-zend-framework-1-9-6/6.php[/file]

Inside your layout.phtml make sure you have the following code (stripped so it can be displayed properly):
[file]http://phpdev.ro/wp-content/code_snippets/how-to-integrate-uploadify-in-zend-framework-1-9-6/7.php[/file]

Conclusion

Now, everything should work. If you browse your application at example.com/uploadify/ you should see the uploadify button here.

If you have any problems implementing the tutorial, feel free to contact me via comments below and I’ll try to help you fix them.

$(document).ready(function() {
$(‘#upload_container’).uploadify({
‘uploader’ : uploadify_swf_file,
‘script’ : upload_php_file,
‘folder’ : upload_folder,
‘cancelImg’: upload_cancel_img,
‘auto’ : true,
‘onError’: function (event, queueID ,fileObj, errorObj) {
var msg;
if (errorObj.status == 404) {
alert(‘Could not find upload script. Use a path relative to: ‘+’;’);
msg = ‘Could not find upload script.’;
} else if (errorObj.type === “HTTP”)
msg = errorObj.type+”: “+errorObj.status;
else if (errorObj.type ===”File Size”)
msg = fileObj.name+’
;’+errorObj.type+’ Limit: ‘+Math.round(errorObj.sizeLimit/1024)+’KB’;
else
msg = errorObj.type+”: “+errorObj.text;
alert(msg);
$(“#fileUpload” + queueID).fadeOut(250, function() { $(“#fileUpload” + queueID).remove()});
return false;
},});
});

Source phpdev.ro

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s