Ajax upload, Jcrop and hidden divs

Ajax upload, Jcrop and hidden divs

Working on the same project as mentioned in a previous post, Using the Loader class in AS3, I came across an issue using a Ajax upload script and the jQuery image cropping plugin, Jcrop.

The form had an image within a hidden div, as I didn't want to display the image until the user had uploaded an image. Upon the Ajax upload script onComplete function being successful, Jcrop would be invoked and the image div would be displayed.

var uploader = new qq.FileUploader({
	allowedExtensions: ['jpg', 'jpeg', 'png'],
	element: document.getElementById('file-uploader'),
	action: '/FileUpload.ashx?id=' + $('#contestantId').val(),
	onComplete: function(id, fileName, responseJSON) {
		$('#imgupload').attr('src', responseJSON.url).load(function() {
			$(this).Jcrop({
                        	onSelect: updateCoords,
                        	boxHeight: 200,
                            	aspectRatio: 23 / 28
                        });
                        $('#workingImage').val(responseJSON.file);
                        $('#image-div').show();
                        $('#file-uploader').hide();
		});
	}
});

This worked fine in Firefox, but would fail in Internet Explorer. The issue seemed to be that the image div was hidden until the upload was successful.

This was overcome by not having the image div hidden, and creating a 1x1.gif file to be the image placeholder.

var uploader = new qq.FileUploader({
	allowedExtensions: ['jpg', 'jpeg', 'png'],
	element: document.getElementById('file-uploader'),
	action: '/FileUpload.ashx?id=' + $('#contestantId').val(),
	onComplete: function(id, fileName, responseJSON) {
		$('#imgupload').attr('src', responseJSON.url).load(function() {
			$(this).Jcrop({
                        	onSelect: updateCoords,
                        	boxHeight: 200,
                            	aspectRatio: 23 / 28
                        });
                        $('#workingImage').val(responseJSON.file);
                        $('#file-uploader').hide();
		});
	}
});