JFC and SwfUpload

In previous article I’ve described how add AjaxFileUpload to jQuery File Commander, now it’s time to describe how to add SwfUpload which allow to smoothly add uploads queue and progress bar. I use simply demo as base from SwfUpload in version 2.2.0.1 but there is no limits to use any upload library.

Ok, let’s see how to do that. The main problem was to add additional parameter during posting process where we store upload path. It was achieved by using addFileParam method in SwfUpload object. Next problem to solve was to refresh panels with files when upload is finished. To do that I used two callbacks from swf upload which fired my functions, one when file was put to upload queue and another one when upload is complete.

Now is good moment to show how it was done. At first we need to add upload form like this:

<table cellpadding="0" cellspacing="0" class='table'>
<tr>
<th>SwfUpload</th>
</tr>
<tr>
<td>
<div class="fieldset flash" id="fsUploadProgress">
<span class="legend">Upload Queue</span>
</div>
<div id="divStatus">0 Files Uploaded</div>
<div>
<span id="spanButtonPlaceHolder"></span>
<input id="btnCancel" type="button" value="Cancel All Uploads" onclick="swfu.cancelQueue();" disabled="disabled" style="margin-left: 2px; font-size: 8pt; height: 29px;" />
<a href='javascript:;' onclick="swfu.startUpload()">START UPLOAD</a>
</div>
</td>
</tr>
<tr>
<td>Current path: <span id="currentPath">/</span></td>
</tr>
</table>

Next step is to add JS initialisation code. To show current upload path I use two callback functions from JFC: onLoadTab to know when user change folder and onTabGetFocus to get upload path when user switch to new tab.

Here is a list of options used in example:

	var options = {
		// BACKEND
		'paths' : {
			'imgPath':		"/fc/img/ext-ico/",
			'urlPrefix':	"/files",
			'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':		'/',
		'rightPath':	'/',

		// EVENTS
		'callbacks': {
			'onTabLoad'			: function(/*FCFolderView*/ tab) {
				$('#currentPath').html(tab.getCurrentPath());
			},
			'onTabGetFocus'		: function(/*FCFolderView*/ tab) {
				$('#currentPath').html(tab.getCurrentPath());
			}
		}
	};

After creating JFC we need to create SwfUpload. I used one of examples available on SwfUpload page as a base and adopted it to my needs.

To set upload path for chosen files we need to set two handlers from SwfUploader :
- file_queued_handler – fired when file is added to queue, and this is good moment to add upload path to this file as additional POST parameter so server know where to store file. As you see below I store upload path which should be reloaded after upload complete in body element. This path it is used later when upload is finished to refresh files in JFC.

function fileQueued(file) {
	try {
		var progress = new FileProgress(file, this.customSettings.progressTarget);
		progress.setStatus("Pending... "+jFileCommander.getCurrentActivePath());
		progress.toggleCancel(true, this);
		file.reloadPath = jFileCommander.getCurrentActivePath();
		swfu.addFileParam(file.id, 'path', jFileCommander.getCurrentActivePath());
		$('body').data("file-"+file.id, jFileCommander.getCurrentActivePath());
	} catch (ex) {
		this.debug(ex);
	}
};

- upload_success_handler – fired when upload has been finished so we can reload JFC tabs which displays folders where files was uploaded, now we retrieve path where files was uploaded from body element (stored in when files was queued).

function uploadSuccess(file, serverData) {
	try {
		var progress = new FileProgress(file, this.customSettings.progressTarget);
		progress.setComplete();
		var path = $('body').data("file-"+file.id);
		progress.setStatus("Complete. "+path);
		console.log('complete file id = '+file.id+' path='+path);
		progress.toggleCancel(false);
		jFileCommander.doReloadCurrentView(path);

	} catch (ex) {
		this.debug(ex);
	}
};

Hope it will help all of you needed upload functionality with JFC. To see all these puzzles working together just go to example of jQuery File Commander with SwfUpload.

Here is a list of JavaScript files to download which were used in example:

Of course don’t forget to add jQuery and JFC to your page ;) .

If something is still unclear please ask here.

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

Comments are closed.