CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Rorschach
Rorschach

Reputation: 3812

Uploading image and displaying it small with javascript

So, I've got this working javascript and it loads an image that a user uploads to the HTML on the screen displaying it.

But, it displays the image without a max height or width so it moves buttons on the page to where they can't be seen or pressed. This includes the submit button if the image uploaded is big enough.

So, is there some way to make the 'uploaded' image display really small: like max 30px in height?

$(function(){
    $('#user_avatar').change(function(e){
        var files = event.target.files;
        var image = files[0];
        for (var i = files.length - 1; i >= 0; i--) {
            var reader = new FileReader();
            var file = files[i];
            reader.onload = function(file) {
              var img = new Image();
              img.src = file.target.result;
              $('#inputpic').attr('src', file.target.result);
            }
            reader.readAsDataURL(image);
        };
    });
});

I have tried adding:

  theimage = getElementById('inputpic')
  theimage.style.height='10px';

But this had no effect.

EDIT 1

html.slim that the JS talks to:

= image_tag('temp.png', id: "inputpic", class: 'tiny_image_display')

SCSS that I made:

.tiny-image-display {
  max-height: 30px;
}

Upvotes: 0

Views: 74

Answers (2)

Rupert
Rupert

Reputation: 1639

$(function(){
    $('#user_avatar').change(function(e){
        var files = event.target.files;
        var image = files[0];
        for (var i = files.length - 1; i >= 0; i--) {
            var reader = new FileReader();
            var file = files[i];
            reader.onload = function(file) {
              var img = new Image();
              img.src = file.target.result;
              img.height = "30";
              $('#inputpic').attr('src', file.target.result);
            }
            reader.readAsDataURL(image);
        };
    });
});

Upvotes: 0

Mike Cluck
Mike Cluck

Reputation: 32511

You can set this in CSS very easily:

#inputpic {
  max-height: 30px;
}

Upvotes: 1

Related Questions