jQuery File Commander v0.5 update

Just as some people was asked, I’ve added new improvements to JFC. Here is a short list what’s new in version 0.5:

  • added callback functions, now there are 5 callbacks:
    - onPanelGetFocus – fired after panel get focus,
    - onPanelLoseFocus – fired after panel lose focus,
    - onTabGetFocus – fired after tab get focus,
    - onTabLoseFocus – fired after tab lose focus,
    - onTabLoad – fired after tab content – files are loaded
  • changed tab view from table to div,
  • grouped parameters passed during creating JFC,
  • fixed few bugs (now rows are always equals even if files name are veeery long),
  • added upload examples,

Parameters used to create jQuery File Commander object:

var options = {
 // BACKEND PATHS
 'paths' : {
   'imgPath':		"/fc/img/ext-ico/",
   'lsPath':		"/fc/fc/ajax_ls",
   'copyPath':		"/fc/fc/ajax_copy",
   'movePath':		"/fc/fc/ajax_move",
   'delPath':		"/fc/fc/ajax_del",
   'renPath':		"/fc/fc/ajax_ren",
   'mkdirPath':	"/fc/fc/ajax_mkdir"
 },
 // FRONT END
 'height':	400,
 'leftPath':	false, // start with last visited folder
 'rightPath':	'/',   // start in / folder
 // EVENTS
 'callbacks': {
   'onPanelGetFocus'	: function(/*FCPanelView*/ panel) { console.log('onPanelGetFocus '+panel.getName()); },
   'onPanelLoseFocus'	: function(/*FCPanelView*/ panel) { console.log('onPanelLoseFocus '+panel.getName()); },
   'onTabGetFocus'	: function(/*FCFolderView*/ tab) { console.log('onTabGetFocus '+tab.getName()+" path= "+tab.getCurrentPath());  },
   'onTabLoseFocus'	: function(/*FCFolderView*/ tab) { console.log('onTabLoseFocus '+tab.getName()); }
   'onTabLoad'		: function(/*FCFolderView*/ tab) { console.log('onTabLoad '+tab.getName()); }
 }
};

Because I want to decouple upload code from file commander core I’ve made it quite separately. There are two examples which can be a good base to write your own upload, one is based on simply AjaxFileUpload library (http://www.phpletter.com/Our-Projects/AjaxFileUpload/) and other is based on very popular SwfUpload.

To make AjaxFileUpload working with JFC I’ve to slightly modify it code to add possibility to change upload path. Here is an example of how it works http://fc-demo.niepokoj.com/examples/jfc_with_ajax_upload. To add upload just download modified AjaxFileUpload and add the code below to JFC page.

function ajaxFileUpload() {
  $("#loading")
    .ajaxStart(function(){
    $(this).show();
    })
    .ajaxComplete(function(){
    $(this).hide();
  });
  var _uploadPath = jFileCommander.getCurrentActivePath();
  $.ajaxFileUpload ({
    url: '/examples/ajax_upload',
    secureuri: false,
    fileElementId: 'jfcFile',
    dataType: 'json',
    uploadPath: _uploadPath,
    success: function (data, status) {
      if(typeof(data.status) != 'undefined') {
        if(data.status != 'ok') {
          alert('ERROR MESSAGE! '+data.message);
        } else {
          $('#jfcFile').val('');
          jFileCommander.doReloadPath(_uploadPath);
        }
      }
    },
    error: function (data, status, e) {
      alert(e);
    }
  });
}

HTML code to add below JFC div tag:

	
SIMPLY AJAX UPLOAD
Upload path: ?
Upload

On server side there is needed to catch upload, it’s done via this function:

function ajax_upload() {
$path = $_POST['path'];
$path = $this->makePath($path, true, PATH_TO_FILES);
$result = array(
'status' => 'ok',
'message' => ""
);
if (!empty($_FILES['jfcFile']['error'])) {
$result['status'] = 'error';
$result['message'] = 'Error occurs';
} elseif (empty($_FILES['jfcFile']['tmp_name']) || $_FILES['jfcFile']['tmp_name'] == 'none') {
$result['message'] = 'No file was uploaded..';
$result['status'] = 'error';
} else {
$result['message'] = " File ".$_FILES['jfcFile']['name']." (".@filesize($_FILES['jfcFile']['tmp_name']).' bytes)';
$result['message'].= " uploaded successful to ".$path;
@move_uploaded_file($_FILES['jfcFile']['tmp_name'], $path.$_FILES['jfcFile']['name']);
}
echo json_encode($result);
die();
}

There is used function to correct paths (to increase security and avoiding to save outside PATH_TO_FILES constat which should point to directory on server where files are stored).

function makePath($path, $absolute, $pathToFiles) {

	// checking for more than 2 dots ..
	if (preg_match("/\.{3,}/", $path) > 0)
		return $pathToFiles;

	// normalize to be exactly like system default
	$path = strtr($path, "\\", DS);
	$path = strtr($path, "/", DS);

	$arr = explode(DS, $path);
	$arr2 = array();
	foreach ($arr as $a) {
		if (empty($a)) continue;
		if ($a === '..') {
			array_pop($arr2);
			continue;
		}
		array_push($arr2, $a);
	}
	// building path again
	$path = "";
	foreach ($arr2 as $a)
		$path .= $a.DS;

	if($absolute) {
		if($path == DS)
			$path = $pathToFiles;
		else
			$path = $pathToFiles.$path;
		# checking if path exist, if not then set to root path
		if(!file_exists($path))
			$path = $pathToFiles;
	}
	return $path;
}
Source code of modified AjaxFileUpload

Next article describing how to add SwfUpload will be soon.

Share and Enjoy:
  • Print
  • Wykop
  • Digg
  • LinkedIn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • Blogplay
  • Add to favorites

Comments are closed.