UberUploadCropper is a jQuery plugin with brings together Fine Uploader, jQuery Impromptu, and Jcrop to upload and crop multiple images. This utility queues up the images in Impromptu using states, and you can traverse to each uploaded image and resize each.

In the previous version there was a bug preventing multiple images from being cropped. This is now resolved! The new version brings updated libraries and introduced a few bindable events:

  • uberSingleUploadComplete: function(event, responseJson) – called after each upload. responseJson is the response from the server upload script.
  • uberAllUploadsComplete: function(event, imgData) – called after all uploads complete. imgData is an array of each responseJson.
  • uberOnComplete: function(event, imgData, cropResponse) – called after the crop is complete and the prompt has closed. imgData is an array of responses from the upload. cropResonse is the response from the server crop script.

Also, when passing the options in you should now pass in grouped options. This way there is no overlap between plugins. Here is a quick example:

$('#UploadImages').uberuploadcropper({
	// fineuploader settings within this object
	fineuploader: {
		request	: { 
			endpoint: 'upload.php' 
		},						
		validation: {
			allowedExtensions: ['jpg','jpeg','png','gif']
		}
	},
	// impromptu settings within this object
	impromptu: {
		classes: 'myclass'
	},
	// jcrop settings within this object
	jcrop: {
		aspectRatio : 1, 
		allowSelect : false, //can reselect
		allowResize : false, //can resize selection
		setSelect   : [ 0, 0, 200, 200 ] //these are the dimensions of the crop box x1,y1,x2,y2
	},
	// uber settings sit in the base object
	folder          : 'uploads/', // only used in uber, not passed to server
	cropAction      : 'crop.php', // server side request to crop image
	onComplete      : function(e,imgs,data){ 
		console.log(imgs);
	}
});

The following is a short video of it in action (This is a video from the previous version, which could only upload one at the time).

It should be noted that the examples provided are just that, examples. You will need to do some handy work customizing the styles and the server side uploads. I have commented the code to try and point you in the correct direction. The examples are in php, however it should be pretty straight forward to implement in any language. (See the Fine Uploader serverside folder)

If you want to become more familiar with jQuery Impromptu so you can create more advanced prompts like UberUploadCropper I highly recommend the ebook “Impromptu From I to U”. It covers using buttons, states, forms, asynchronous behaviors, and more.

buy PDF + Code

buy PDF Only

You can find UberUploadCopper on Github. There you can post any issues or send pull requests. Before posting issues on uploading be sure to check that your upload directories are writable, check your error logs, and examine your network requests in firebug/web console. Hope you enjoy!

Related posts:

  1. UberUploadCropper V2 – Upload, Crop, No Flash
  2. UberUploadCropper 0.4 – Multi Image Upload and Crop Fix
  3. UberUploadCropper – jQuery Upload and Crop Plugin
  4. UberUploadCropper 0.2 With Example
  5. Uber Update