Hello, I'm having an issue with the drag and drop functionality. I want to expand the size of the input to cover the entire parent div, but for some reason, the input is appearing below the drag and drop div. Can anyone assist me with this? https://i.stack.imgur.com/QTWfQ.png
I attempted to create a fiddle to troubleshoot the problem, but it was unsuccessful... Fiddle link
.uploader{
text-align: center;
padding: 1em 0;
margin: 1em 0;
color: #555;
border: 2px dashed #888;
border-radius: 7px;
cursor: default;
}
#filePhoto{
position: absolute;
opacity:0;
cursor:pointer;
}
<div onclick="$('#filePhoto').click()" class="uploader">
Click here or drag your images here for preview and set userprofile_picture data
<input type="file" size="32" name="userprofile_picture" id="filePhoto" />
</div>
var imageLoader = document.getElementById('filePhoto');
imageLoader.addEventListener('change', handleImage, false);
function handleImage(e) {
var reader = new FileReader();
reader.onload = function (event) {
$('#blah').attr('src', event.target.result);
}
reader.readAsDataURL(e.target.files[0]);
}