How to integrate Uber uploader in CakePHP 

Uber-Uploader

Uber-Uploader is a group of programs written in Perl, PHP and Javascript. It is intended to present a graphical representation of the status of a web based file upload in the form of a progress bar.

External Links

CakePHP

CakePHP is a free, open-source, rapid development framework for PHP. It’s a foundational structure for programmers to create web applications. Our primary goal is to enable you to work in a structured and rapid manner–without loss of flexibility.

CakePHP takes the monotony out of web development. We provide you with all the tools you need to get started coding what you really need to get done: the logic specific to your application. Instead of reinventing the wheel every time you sit down to a new project, check out a copy of CakePHP and get started with the real guts of your application.

Why We Need To Integrate CakePHP With Uber-Uploader

As mention above  Uber-Uploader is a group of programs written in Perl, PHP and Javascript.It is used to upload large volume video files.It also provide a very good GUI as progress bar and show some  informaton like Elapsed Time ,Est Time Left ,Percent Complete etc that helps user to keep patience while upload a large volum files.

Here is the some steps How to integrate uber uploader in cakePHP

1.Create a folder in Webroot/files and put all files in that folder
eg. i created ‘uploder’ in webroot/files than i created ‘html’ folder in ‘uploder’ folder

2.Set the $TEMP_DIR value in ‘ubr_upload.pl’ AND ‘ubr_ini.php’.
eg. $TEMP_DIR = ‘/xyz.com/html/tmp/ubr_temp/’;
eg. $TEMP_DIR = ‘/var/tmp/ubr_temp/’;
eg. $TEMP_DIR = ‘/usr/home/roger/ubr_temp/’;

3.Set the $_CONFIG['upload_dir'] value in ‘ubr_default_config.php’. It should be physical path
eg. $_CONFIG['upload_dir'] = ‘/XYZ.com/app/webroot/files/uploader/html/tmp/ubr_uploads’;
eg. $_CONFIG['upload_dir'] = ‘/var/www/html/ubr_uploads/’;
eg. $_CONFIG['upload_dir'] = ‘/usr/local/www/htdocs/ubr_uploads/’;
eg. $_CONFIG['upload_dir'] = $ENV{‘DOCUMENT_ROOT’} . ‘/ubr_uploads/’;

4.Set the correct path values for the scripts in ‘ubr_ini.php’.
eg. PATH_TO_UPLOAD_SCRIPT       = ‘../app/webroot/files/uploader/html/cgi-bin/ubr_upload.pl’;      // Path info
PATH_TO_LINK_SCRIPT         = ‘../app/webroot/files/uploader/html/ubr_link_upload.php’;        // Path info
PATH_TO_SET_PROGRESS_SCRIPT = ‘../app/webroot/files/uploader/html/ubr_set_progress.php’;       // Path info
PATH_TO_GET_PROGRESS_SCRIPT = ‘../app/webroot/files/uploader/html/ubr_get_progress.php’;       // Path info
PATH_TO_JS_SCRIPT           = ‘../app/webroot/files/uploader/html/ubr_file_upload.js’;         // Path info
PATH_TO_JQUERY              = ‘../app/webroot/files/uploader/html/jquery-1.3.1.min.js’;        // Path Info
PATH_TO_CSS_FILE            = ‘../app/webroot/files/uploader/html/ubr.css’;                    // Path info
DEFAULT_CONFIG              = ‘/XYZ.com/app/webroot/files/uploader/html/ubr_default_config.php’;     // Path info

5.Make ubr_pload.pl executable with the command chmod 755 ubr_pload.pl

6.Set the correct path for $_CONFIG['redirect_url']  in ‘ubr_default_config.php’

7.Set the correct path for $_CONFIG['path_to_upload'] and $_CONFIG['upload_dir'] in ‘ubr_default_config.php’.It is the Directory where the video get uplaod
eg. /home/xyz.com/app/webroot/files/uploader/html/tmp/ubr_uploads/

8.Make sure that both path ($_CONFIG['path_to_upload'] and $_CONFIG['upload_dir']) should be same.

9 Make sure that path for $TEMP_DIR in ubr_upload.pl should be same to $TEMP_DIR value in ‘ubr_ini.php

10.Now Create a action in controller and include the following code
eg  action “uploadvideo” in videos_controller

$this->set(“DEBUG_AJAX”,$DEBUG_AJAX);
$this->set(“PATH_TO_UPLOAD_SCRIPT”,$PATH_TO_UPLOAD_SCRIPT);

$this->set(“PATH_TO_JQUERY”,$PATH_TO_JQUERY);
$this->set(“PATH_TO_GET_PROGRESS_SCRIPT”,$PATH_TO_GET_PROGRESS_SCRIPT);
$this->set(“PATH_TO_SET_PROGRESS_SCRIPT”,$PATH_TO_SET_PROGRESS_SCRIPT);
$this->set(“PATH_TO_CSS_FILE”,$PATH_TO_CSS_FILE);
$this->set(“DEFAULT_CONFIG”,$DEFAULT_CONFIG);
$this->set(“MULTI_CONFIGS_ENABLED”,$MULTI_CONFIGS_ENABLED);
$this->set(“PATH_TO_LINK_SCRIPT”,$PATH_TO_LINK_SCRIPT);
$this->set(“PATH_TO_JS_SCRIPT”,$PATH_TO_JS_SCRIPT);
$this->set(“_CONFIG”,$_CONFIG);

$this->set(“CGI_UPLOAD_HOOK”,$CGI_UPLOAD_HOOK);
$this->set(“GET_PROGRESS_SPEED”,$GET_PROGRESS_SPEED);

$this->set(“DELETE_LINK_FILE”,$DELETE_LINK_FILE);
if($PHP_ERROR_REPORTING){ error_reporting(E_ALL); }

header(‘Content-type: text/html; charset=UTF-8′);
header(‘Expires: Mon, 26 Jul 1997 05:00:00 GMT’);
header(‘Last-Modified: ‘ . date(‘r’));
header(‘Cache-Control: no-store, no-cache, must-revalidate’);
header(‘Cache-Control: post-check=0, pre-check=0′, FALSE);
header(‘Pragma: no-cache’);

//Set config file
if($MULTI_CONFIGS_ENABLED){
// Put your multi config file code here
$config_file = ‘ubr_default_config.php’;
}
else{ $config_file = $DEFAULT_CONFIG; }

// Load config file
require $config_file;
//***************************************************************************************************************
// The following possible query string formats are assumed
//
// 1. No query string
// 2. ?about=1
//***************************************************************************************************************
if($DEBUG_PHP){ phpinfo(); exit(); }
elseif($DEBUG_CONFIG){ debug1($_CONFIG['config_file_name'], $_CONFIG); exit(); }
elseif(isset($_GET['about']) && $_GET['about'] == 1){
kak(“<u><b>UBER UPLOADER FILE UPLOAD</b></u><br>UBER UPLOADER VERSION =  <b>” . $UBER_VERSION . “</b><br>UBR_FILE_UPLOAD = <b>” . $THIS_VERSION . “</b><br>\n”, 1, __LINE__);
}

11. Now put the following code in CTP file(“uploadvideo.ctp” )

<style>
.debug {font:16px Arial; background-color:#FFFFFF; border:1px solid #898989; width:700px; height:100px; overflow:auto;}
.alert {font:18px Arial;}
.data {background-color:#b3b3b3; border:1px solid #898989; width:350px;}
.data tr td {background-color:#dddddd; font:13px Arial; width:35%;}
.bar1 {background-color:#b3b3b3; position:relative; text-align:left; height:20px; width:<?php print $_CONFIG['progress_bar_width']; ?>px; border:1px solid #505050;}
.bar2 {background-color:#000099; position:relative; text-align:left; height:20px; width:0%;}
</style>
<script language=”JavaScript” type=”text/JavaScript” src=”../app/webroot/files/uploader/html/jquery-1.3.1.min.js”></script>
<script language=”javascript” type=”text/javascript” src=”../app/webroot/files/uploader/html/ubr_file_upload.js”></script>
<script language=”javascript” type=”text/javascript”>
var upload_range = 1;
var path_to_link_script = “<?php print $PATH_TO_LINK_SCRIPT; ?>”;
var path_to_set_progress_script = “<?php print $PATH_TO_SET_PROGRESS_SCRIPT; ?>”;
var path_to_get_progress_script = “<?php print $PATH_TO_GET_PROGRESS_SCRIPT; ?>”;
var path_to_upload_script = “<?php print $PATH_TO_UPLOAD_SCRIPT; ?>”;
var multi_configs_enabled = <?php print $MULTI_CONFIGS_ENABLED; ?>;
var check_allow_extensions_on_client = <?php print $_CONFIG['check_allow_extensions_on_client']; ?>;
var check_disallow_extensions_on_client = <?php print $_CONFIG['check_disallow_extensions_on_client']; ?>;
<?php if($_CONFIG['check_allow_extensions_on_client']){ print “var allow_extensions = /” . $_CONFIG['allow_extensions'] . “$/i;\n”; } ?>
<?php if($_CONFIG['check_disallow_extensions_on_client']){ print “var disallow_extensions = /” . $_CONFIG['disallow_extensions'] . “$/i;\n”; } ?>
var check_file_name_format = <?php print $_CONFIG['check_file_name_format']; ?>;
<?php if($_CONFIG['check_file_name_format']){ print “var check_file_name_regex = /” . $_CONFIG['check_file_name_regex'] . “/;\n”; } ?>
<?php if($_CONFIG['check_file_name_format']){ print “var check_file_name_error_message = ‘” . $_CONFIG['check_file_name_error_message'] . “‘;\n”; } ?>
<?php if($_CONFIG['check_file_name_format']){ print “var max_file_name_chars = ” . $_CONFIG['max_file_name_chars'] . “;\n”; } ?>
<?php if($_CONFIG['check_file_name_format']){ print “var min_file_name_chars = ” . $_CONFIG['min_file_name_chars'] . “;\n”; } ?>
var check_null_file_count = <?php print $_CONFIG['check_null_file_count']; ?>;
var check_duplicate_file_count = <?php print $_CONFIG['check_duplicate_file_count']; ?>;
var max_upload_slots = <?php print $_CONFIG['max_upload_slots']; ?>;
var cedric_progress_bar = <?php print $_CONFIG['cedric_progress_bar']; ?>;
var cedric_hold_to_sync = <?php print $_CONFIG['cedric_hold_to_sync']; ?>;
var bucket_progress_bar = <?php print $_CONFIG['bucket_progress_bar']; ?>;
var progress_bar_width = <?php print $_CONFIG['progress_bar_width']; ?>;
var show_percent_complete = <?php print $_CONFIG['show_percent_complete']; ?>;
var show_files_uploaded = <?php print $_CONFIG['show_files_uploaded']; ?>;
var show_current_position = <?php print $_CONFIG['show_current_position']; ?>;
var show_current_file = <?php if($CGI_UPLOAD_HOOK && $_CONFIG['show_current_file']){ print “1″; }else{ print “0″; } ?>;
var show_elapsed_time = <?php print $_CONFIG['show_elapsed_time']; ?>;
var show_est_time_left = <?php print $_CONFIG['show_est_time_left']; ?>;
var show_est_speed = <?php print $_CONFIG['show_est_speed']; ?>;
var JQ = jQuery.noConflict();

JQ(document).ready(function(){
iniFilePage();
JQ(“#upfile_0″).bind(“keypress”, function(e){ if(e == 13){ return false; } });
//JQ(“#upfile_0″).bind(“change”, function(e){ addUploadSlot(1); });
JQ(“#upload_button”).bind(“click”, function(e){ //alert(valid.validate());
if(valid.validate())
linkUpload();
});
JQ(“#reset_button”).bind(“click”, function(e){ resetForm(); });
});
</script>

<script type=”text/javascript” src=”http://www.xyz.com/app/webroot/files/uploader/html/ubr_file_upload.js&#8221; ></script>
<link href=”http://www.xyz.com/app/webroot/files/uploader/html/ubr.css&#8221; type=”text/css” rel=”stylesheet” />

<!– Start Progress Bar –>
<div align=”center” id=”progress_bar” style=”display:none;”>
<div id=”upload_status_wrap” class=”ubrBar1″  style=”width:400px”>
<div id=”upload_status” class=”ubrBar2″></div>
</div>
<?php if($_CONFIG['show_percent_complete'] || $_CONFIG['show_files_uploaded'] || $_CONFIG['show_current_position'] || $_CONFIG['show_elapsed_time'] || $_CONFIG['show_est_time_left'] || $_CONFIG['show_est_speed']){ ?>
<br>
<table class=”ubrUploadData”>
<?php if($_CONFIG['show_percent_complete']){ ?>
<tr>
<td class=’ubrUploadDataLabel’>Percent Complete:</td>
<td class=’ubrUploadDataInfo’><span id=”percent_complete”>0%</span></td>
</tr>
<?php } ?>
<?php if($_CONFIG['show_files_uploaded']){ ?>
<tr>
<td class=’ubrUploadDataLabel’>Files Uploaded:</td>
<td class=’ubrUploadDataInfo’><span id=”files_uploaded”>0</span> of <span id=”total_uploads”></span></td>
</tr>
<?php } ?>
<?php if($_CONFIG['show_current_position']){ ?>
<tr>
<td class=’ubrUploadDataLabel’>Current Position:</td>
<td class=’ubrUploadDataInfo’><span id=”current_position”>0</span> / <span id=”total_kbytes”></span> KBytes</td>
</tr>
<?php } ?>
<?php if($CGI_UPLOAD_HOOK && $_CONFIG['show_current_file']){ ?>
<tr>
<td class=’ubrUploadDataLabel’>Current File Uploading:</td>
<td class=’ubrUploadDataInfo’><span id=”current_file”></span></td>
</tr>
<?php } ?>
<?php if($_CONFIG['show_elapsed_time']){ ?>
<tr>
<td class=’ubrUploadDataLabel’>Elapsed Time:</td>
<td class=’ubrUploadDataInfo’><span id=”elapsed_time”>0</span></td>
</tr>
<?php } ?>
<?php if($_CONFIG['show_est_time_left']){ ?>
<tr>
<td class=’ubrUploadDataLabel’>Est Time Left:</td>
<td class=’ubrUploadDataInfo’><span id=”est_time_left”>0</span></td>
</tr>
<?php } ?>
<?php if($_CONFIG['show_est_speed']){ ?>
<tr>
<td class=’ubrUploadDataLabel’>Est Speed:</td>
<td class=’ubrUploadDataInfo’><span id=”est_speed”>0</span> KB/s.</td>
</tr>
<?php } ?>
</table>
<?php } ?>
</div>
<!– End Progress Bar –>

<!– Start Upload Form –>
<form name=”form_upload” id=”form_upload” <?php if($_CONFIG['embedded_upload_results'] || $_CONFIG['opera_browser'] || $_CONFIG['safari_browser']){ print “target=\”upload_iframe\”"; } ?> method=”post” enctype=”multipart/form-data”  action=”#” style=”margin: 0px; padding: 0px;”>
<noscript><font color=’red’>Warning: </font>Javascript must be enabled to use this uploader.<br><br></noscript>
<!– Include extra values you want passed to the upload script here. –>
<!– eg. <input type=”text” name=”employee_num” value=”5″> –>
<!– Access the value in the CGI with $query->param(‘employee_num’); –>
<!– Access the value in the PHP finished page with $_POST_DATA['employee_num']; –>
<!– DO NOT USE “upfile_” for any of your values. –>
<div id=”upload_slots”><input type=”file” name=”upfile_0″ size=”90″ <?php if($_CONFIG['multi_upload_slots']){ ?>onChange=”addUploadSlot(1)”<?php } ?>  onkeypress=”return handleKey(event)” value=”"></div>
<br>
<input type=”button” id=”reset_button” name=”reset_button” value=”Reset” onClick=”resetForm();”>&nbsp;&nbsp;&nbsp;<input type=”button” id=”upload_button” name=”upload_button” value=”Upload” onClick=”linkUpload();”>
</form>
<!– End Upload Form –>
</div>
<div id=’ajax_div’><!– Used to store AJAX –></div>

12 Now you can run the code http://www.xyz.com/videos/uploadvideo

I hope this helps people looking for solution integrating Uber Uploader in Cake PHP. Leave comment in case of any issues.