Last week I showed how to implement Jcrop into an application. In this tutorial – which also pulls from my experiences developing GetSimple – I implement the jQuery plugin Uploadify.

In this tutorial, we create a simple file upload script that also displays an unordered list of the files in the upload directory. The list of files refreshes via an ajax call every time Uploadify processes a queue.

Demo

View the demo or download the files

The Basic HTML

<h2>Uploadify Application Demo <span id="loader"><img src="img/loading.gif" alt="Loading..." /></span></h2>
<div id="sidebar">
	<!-- form to be replaced by uploadify -->
	<form id="mainftp" action="upload.php" method="post" enctype="multipart/form-data">
		<p><input type="file" name="file" id="file" /></p>
		<p><input type="submit" name="submit" value="Upload" /></p>
	</form>
</div>

<!-- whole div to be refreshed once uploadify is finished -->
<div id="allfiles" >
	<?php
		//list all files via function file included up top
		$handle = @opendir($src_folder) or die("Unable to open $src_folder");
		ListDir($handle,$src_folder);
	?>
</div>

The PHP

//folder where the files are stored at
//you may need to chmod this folder to 775 or 777 for it to work
$src_folder = 'files/';

//file that includes the function to list all files in ul
include("inc/file_list.php");

//if javascript is disabled, the ftp will still work
if (isset($_FILES["file"])) {
	if ($_FILES["file"]["error"] > 0) {
	  $error = 'Error Uploading!';
	} else {
    $count = '1';
    $file_loc = $path . $_FILES["file"]["name"];
    $base = $_FILES["file"]["name"];
    while ( file_exists($file_loc) ) {
		$file_loc = $path . $count.'-'. $_FILES["file"]["name"];
		$base = $count.'-'. $_FILES["file"]["name"];
		$count++;
	}
    move_uploaded_file($_FILES["file"]["tmp_name"], $file_loc);
	}
}

The jQuery

$('#mainftp').uploadify({
	'uploader' : 'js/uploadify/uploadify.swf',
	'script' : 'js/uploadify/uploadify.php',
	'multi' : true,
	'auto' : true,
	'height' : '32',
	'width' : '250',
	'buttonImg' : 'img/browse.png',
	'cancelImg' : 'img/cancel.png',
	'folder' : 'files/',
	onProgress: function() {
		$('#loader').show();
	},
	onAllComplete: function() {
		$('#loader').hide();
		$('#allfiles').load(location.href+" #allfiles>*","");
	}
});

Notes about this javascript:

• Uploadify was unzipped directly from the download on their site. To upgrade, simply replace the js/uploadify/ folder with the newer version.
• height and width are for the respective dimentions of your custom button image – the demo’s being in img/browse.png
• folder is the location where the files will be uploaded to. This is also the folder that should be listed on line #3 of the PHP code above in the $src_folder variable.
• $(‘#loader’).show(); and $(‘#loader’).hide(); start and stop the loading gif that many applications use now to show that something is being uploaded/processed.
• $(‘#allfiles’).load(location.href+” #allfiles>*”,”"); – replaces the whole div with the id of allfiles with and updated listing with the newly uploaded files in it

When creating the ‘image control panel’ for the latest version of GetSimple, I decided to integrate the wonderful Jcrop jQuery plugin into it. Amazingly, there are very few tutorials online that show the full extent of how to use Jcrop in real world situations. The only one I found that was of use was TalkInCode’s tutorial. I did start out using that example’s ImageManipulation class, but changed it slightly so that after submission, you are brought back to the original page instead of being shown the thumbnail.

Demo & Features

View the Demo or download the files.

Some of the more unique features of this demo are:

• The aspectRatio changes to 1:1 when ctrl-Q or command-Q is pressed
• The dimensions of the selected area are shown in an interesting way
• Stats on the thumbnail and the current image are displayed

The Basic HTML

The demo/download has some extra code for displaying the image stats & linking of the css, js and class files.

<!-- image for Jcrop -->
<img src="<?php echo $src_folder . $src; ?>" id="cropbox" />

<!-- selection dimentions -->
<div id="handw" class="toggle" >Selection Dimentions<br /><span id="picw"></span> x <span id="pich"></span></div>

<!-- form that Jcrop fills in -->
<form id="jcropform" action="image.php?i=<?php echo $src; ?>" method="post" onsubmit="return checkCoords();">
  <input type="hidden" id="x" name="x" />
  <input type="hidden" id="y" name="y" />
  <input type="hidden" id="w" name="w" />
  <input type="hidden" id="h" name="h" />
  <input type="submit" class="submit" value="Create Thumbnail" />
    <span class="small" ><em>ctrl-Q</em> or <em>command-Q</em> for square</span>
</form>

The PHP

//the name of the passed image
//example would be:   http://myapplication.com/image.php?i=photo.jpg
$src = $_GET['i'];

//folder where the images are
$src_folder = 'images/';

//folder where the thumbnails will be saved to
//you may need to chmod 775 or 777 this folder
$thumb_folder = 'images/thumbnails/'; 

if ($_SERVER['REQUEST_METHOD'] == 'POST'){

	require('inc/imagemanipulation.php');

	$objImage = new ImageManipulation($src_folder . $src);
	if ( $objImage->imageok ) {
		$objImage->setCrop($_POST['x'], $_POST['y'], $_POST['w'], $_POST['h']);
		$objImage->save($thumb_folder . 'thumbnail.' .$src);
	} else {
		echo 'Error!';
	}
}

The jQuery

function updateCoords(c) {
	$('#handw').show();
  $('#x').val(c.x);
  $('#y').val(c.y);
  $('#w').val(c.w);
  $('#h').val(c.h);
  $('#pich').html(c.h);
  $('#picw').html(c.w);
};

function checkCoords()
{
  if (parseInt($('#x').val())) return true;
  alert('Please select a crop region then press submit.');
  return false;
};

jQuery(document).ready(function() { 

	$(window).load(function(){
	var api = $.Jcrop('#cropbox',{
    onChange: updateCoords,
    onSelect: updateCoords,
    boxWidth: 500,
    boxHeight: 500
  });
  var isCtrl = false;
	$(document).keyup(function (e) {
		api.setOptions({ aspectRatio: 0 });
		api.focus();
		if(e.which == 17) isCtrl=false;
	}).keydown(function (e) {
		if(e.which == 17) isCtrl=true;
		if(e.which == 81 && isCtrl == true) {
			api.setOptions({ aspectRatio: 1 });
			api.focus();
		}
	});
});

});