phpDevelopment | Blog - Bringing you the best of the webdevelopement ecosphere

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:

define('DS',DIRECTORY_SEPARATOR);

/**
* If you followed the tutorial example paths then the following paths
* would be like : /var/www/public_html/uploadify/../../
*/
define('LIBRARY_PATH',
	realpath(dirname(__FILE__) .
	'..' . DS . '..' . DS .
	'library' . DS . '1.9.6')
);
define('APPLICATION_PATH',
	realpath(dirname(__FILE__) .
	'..' . DS . '..' . DS .
	'application' ));

define('APPLICATION_ENV','production');

$paths = array(
	LIBRARY_PATH,
	get_include_path()
);

set_include_path(implode(PATH_SEPARATOR, $paths));

/** Zend_Application */
require_once 'Zend/Application.php';

$application = new Zend_Application(
	APPLICATION_ENV,
	APPLICATION_PATH . '/configs/application.ini'
);
$application->bootstrap();
$application->run();

Add a new file called .htaccess here with the following contents:

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^.*$ index.php [NC,L]

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.

$(document).ready(function() {
	$('#upload_container').uploadify({
		'uploader' : uploadify_swf_file,
		'script'   : upload_php_file,
		'folder'   : upload_folder,
		'cancelImg': upload_cancel_img,
		'auto'     : true
	});
});

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.

[production]
phpSettings.display_startup_errors = 0
phpSettings.display_errors = 0

bootstrap.path = APPLICATION_PATH "/Bootstrap.php";
bootstrap.class = "Bootstrap";

resources.frontController.controllerDirectory = APPLICATION_PATH
"/controllers";

resources.layout.layout = "layout";
resources.layout.layoutPath = APPLICATION_PATH "/layouts/scripts";

resources.view.encoding = "UTF-8";
resources.view.basePath = APPLICATION_PATH "/views/";

[testing : production]
phpSettings.display_startup_errors = 1
phpSettings.display_errors = 1

[development : production]
phpSettings.display_startup_errors = 1
phpSettings.display_errors = 1

The application controller

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

/**
 * @name UploadifyController
 * @desc The controller to serve the main page for our upload example.
 *
 * @author Andrei
 * @filesource application/controllers/UploadifyController.php
 * @version 1.0.0
 */

Class UploadifyController extends Zend_Controller_Action
{

	public function indexAction(){}

	public function uploadAction()
	{
		if (! empty ( $_FILES ))
		{
			$tempFile = $_FILES ['Filedata'] ['tmp_name'];
			$targetFile = APPLICATION_PATH . DS . 'uploads'
			. DS . $_FILES ['Filedata'] ['name'];

			move_uploaded_file ( $tempFile, $targetFile );
			echo "1";
		}
		else
		{
			echo 'No files sent';
		}
	}
}

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) :

< div id = "upload_container" >< /div >

Inside your layout.phtml make sure you have the following code (stripped so it can be displayed properly):

< script
	type="text/javascript"
	src="< ?php
		echo $this->baseUrl('/js/swfobject.js');
		?>">

< script
	type="text/javascript"
	src="< ?php
		echo $this->baseUrl('/js/jquery.uploadify.v2.1.0.min.js');
		?>">

< script type="text/javascript">
	var uploadify_swf_file = '
		< ?php
			echo $this->baseUrl(
				'/uploadify_files/uploadify.swf'
			);
		?>
	';
	var upload_php_file    = '
		< ?php
			echo $this->url(
					array(
						'controller' => 'uploadify',
						'action' => 'upload'
					)
			);
		?>
	';
	var upload_folder      = '
		< ?php
			echo $this->baseUrl(
				'/uploads/'
			);
		?>';
	var upload_cancel_img  = '
		< ?php
			echo $this->baseUrl(
				'/uploadify_files/cancel.png'
			);
		?>';
< /script>
< script
	type="text/javascript"
	src="< ?php echo $this->baseUrl('/js/script.js'); ?>">

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.