My custom upload script allows users to easily select images for upload by clicking or dragging them into the designated box. A preview of the chosen image should appear, and this functionality works smoothly in Firefox and Chrome. However, I've encountered an issue with Safari. Since my client primarily uses Safari, it's crucial for me to ensure that this feature works seamlessly on that browser as well.
I'm curious as to why the script doesn't seem to function properly in Safari.
Here is the corresponding HTML code:
<form method='post' enctype='multipart/form-data' action='#'>
<div style="height: 200px;">
<div class="droparea spot logoupload">
<div class="instructions"><img class="previewlogo" src="http://wmemusic.com/wme/admin/img/loginlogo.jpg" alt="Click or Drag image here to add login logo"/>
</div>
<input type="file" class="droparea spot logoupload" name="logo" onchange="readURL(this);"/>
</div>
</div>
</form>
The CSS styling being applied is as follows:
.droparea {
position:relative;
text-align: center;
min-height:100px;
margin:0;
}
.droparea div, .droparea input {
position: absolute;
top:0;
right:2px;
width: 100%;
height: 100%;
}
.droparea input {
cursor: pointer;
opacity: 0;
}
.droparea .instructions {
border: 2px dashed #ddd;
max-height:200px;
height:auto;
min-height:100px;
overflow:hidden
}
.droparea .instructions.over {
border: 2px dashed #000;
background: #ffa;
}
#areas { width: 480px; }
div.spot {
margin: 5px auto;
}
.logoupload {width: 262px;
min-height: 100px;
height:auto;}
And here is the accompanying JavaScript snippet:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
var imgHeight = $(".previewlogo").height();
reader.onload = function(e) {
$('.previewlogo').attr('src', e.target.result)
$('.droparea').attr('style', 'height:', imgHeight, 'px;')
};
reader.readAsDataURL(input.files[0]);
}
}