Hey there, I have a functioning JavaScript code that loads an image uploaded by the user onto the HTML page. However, the issue is that the image doesn't have a set maximum height or width, causing buttons on the page to move out of view and become inaccessible. Even the submit button disappears if the uploaded image is large enough.
Is there a way to make the displayed 'uploaded' image smaller, like setting a maximum height of 30px?
$(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 attempted to add this:
theimage = getElementById('inputpic')
theimage.style.height='10px';
However, this didn't have any effect.
EDIT 1
This is the html.slim file that the JS interacts with:
= image_tag('temp.png', id: "inputpic", class: 'tiny_image_display')
The following is the SCSS I created:
.tiny-image-display {
max-height: 30px;
}