Basic jQueryUI function for image uploader - jquery-ui

Question

I've been trying to wrap my head around a very basic Javascript/jQuery task.
I've made a basic image uploader with the following HTML:
div class="button one"></div>
<div class="button two"></div>
<div class="size ui-widget-content">
<img src="" alt="" />
<input type='file' name='userFile'>
</div>
<div class="button three"></div>
This is the code I've got so far, from the jQueryUI plugin:
$( ".size" ).resizable( {
grid: [60, 24],
ghost: true,
aspectRatio: //ratio function here ,
stop: function( event , ui) {
var height = $(".size").css( "height" );
var width = $(".size").css( "width" );
$( ".size img" ).css( { width : width, height: height })
}
});
$( ".size > input" ).change(function() {
var filename = $('input[type=file]').val().replace(/C:\\fakepath\\/i, '');
var height = $(".size").css( "height" );
var width = $(".size").css( "width" );
$( ".size img" ).css( { width : width, height: height } );
$( ".size img" ).attr("src" , filename);
$( ".size img" ).attr("alt", filename );
$( ".three" ).show();
var fr = new FileReader;
fr.onload = function() { // file is loaded
var img = new Image;
img.onload = function() {
var maxWidth = 960;
var maxHeight = maxWidth * (img.height/img.width);
$( ".size, .size img" ).css( { width : img.width, height: img.height, "max-height": maxHeight , "max-width": maxWidth});
};
img.src = fr.result; // is the data URL because called with readAsDataURL
};
fr.readAsDataURL(this.files[0]); // I'm using a <input type="file"> for demonstrating
});
What I want to do is the following:
I'm trying to upload an image from my harddrive onto the page.
So far, so good.
I've used the jQueryUI Resizable function so that I can resize the image. This works perfectly.
The problem however, is that I dont know how to get the right image ratio into the Resizable function. I need this function so that my image will keep its original aspect ratio when I start resizing it.
Basically, I need to get a value from the $( ".size > input" ).change function into the aspectRatio property of the $( ".size" ).resizable function
Any ideas on how to do this?
----------------------EDIT-----------------------------------------------
I've tried #Frédéric Hamidi's solution but it doesnt work either.
I've editted the code to:
$(".size").resizable("option", "start", function( event , ui){
$(".size").resizable("option", "aspectRatio", 3 / 4);
});
But this doesnt work either. The Firebug console says:
Uncaught Error: cannot call methods on resizable prior to initialization; attempted to call method 'option'

Answer 1

You can set the aspectRatio property in your change handler, after the widget has been initialized, through the setter form of the widget's option() method.
$(".size > input").change(function() {
// Your current code...
$(this).parent().resizable("option", "aspectRatio", yourComputedAspectRatio);
});