Resizing image preview not working

Question

Working JSFiddle before attempting to implement: http://jsfiddle.net/qa9m7t33/

After attempting to implement: http://jsfiddle.net/z1k538sm/

I found how to resize an image however I believe this was not an example for being it prior upload and I am pretty new to this. What I believe is wrong is the variable;'

var width = e.target.result.width(); // Current image width
var height = e.target.result.height(); // Current image height

I am also having the problem with centering my text in the upload field.

Updated Fiddle: http://jsfiddle.net/m5jLf259/

Answer 1

Not exactly a Js answer to this but adding a line-height CSS to the element

#file {
    line-height: 37px;
}

will get the job done, I guess if you want it to be jQuery you could do

$('#file').css('line-height',$('#file').height() + 'px');

As for the first part of your problem I couldn't make out a question, sorry.

Edit: for the first part try this:

var wrapper = $('<div/>').css({height:0,width:0,'overflow':'hidden'});
var fileInput = $(':file').wrap(wrapper);

fileInput.change(function(){
    readURL(this);
})

$('#file').click(function(){
    fileInput.click();
}).show();

function readURL(input) {
    $('#blah').hide();
    if (input.files && input.files[0]) {
        var goUpload = true;
        var uploadFile = input.files[0];
        if (!(/\.(gif|jpg|jpeg|tiff|png)$/i).test(uploadFile.name)) {
            $('#file').effect( "shake" );
            $('#file').text('You must select an image file only');
            setTimeout(function() { $('#file').text('Choose file');},5000);
            goUpload = false;
        }
        if (uploadFile.size > 2000000) { // 2mb
            //common.notifyError('Please upload a smaller image, max size is 2 MB');
            $('#file').text('Please upload a smaller image, max size is 2 MB');
            setTimeout(function() { $('#file').text('Choose file');},5000);
            goUpload = false;
        }
        if (goUpload) {
            $('#file').text("Uploading "+uploadFile.name);
            var reader = new FileReader();
            reader.onload = function (e) {
                var img = new Image;
                img.onload = function() {
                    var maxWidth = 100; // Max width for the image
                var maxHeight = 100; // Max height for the image
                var ratio = 0; // Used for aspect ratio
                var width = this.width; // Current image width
                var height = this.height; // Current image height

                // Check if the current width is larger than the max
                if (width > maxWidth) {
                    ratio = maxWidth / width; // get ratio for scaling image
                    $('#blah').css("width", maxWidth); // Set new width
                    $('#blah').css("height", height * ratio); // Scale height based on ratio
                    height = height * ratio; // Reset height to match scaled image
                }



                // Check if current height is larger than max
                if (height > maxHeight) {
                    ratio = maxHeight / height; // get ratio for scaling image
                    $('#blah').css("height", maxHeight); // Set new height
                    $('#blah').css("width", width * ratio); // Scale width based on ratio
                    width = width * ratio; // Reset width to match scaled image
                }
                $('#blah').attr('src', this.src).show();
                $('#file').text(uploadFile.name);

                };
                img.src = reader.result;

            }
            reader.readAsDataURL(uploadFile);
        }
    }
}

You shouldn't have the part where it says:

 47           var width = uploadFile.width(); // Current image width
 48           var height = uploadFile.height(); // Current image height

twice because you're just undoing your work from the previous IF.

Also it seems the FileReader() is unable to get the image size properties so instead have FileReader, create an image Object, and then make the image Object's onload do all the work.