# Drop image
Allows you to add a file input element that can receive an image drop and clicks with native elements. However, it needs some javascript to show the dropped image:
## Javascript
This is the javascript you need for multiple elements:
window.onload = function(){
[].forEach.call(document.querySelectorAll('.dropimage'), function(img){
img.onchange = function(e){
var inputfile = this, reader = new FileReader();
reader.onloadend = function(){
inputfile.style['background-image'] = 'url('+reader.result+')';
}
reader.readAsDataURL(e.target.files[0]);
}
});
};
## Hack it
Do you want round pictures? No problem, just do this:
.profile {
border-radius: 50%; /* Make it a circle */
padding-bottom: 100%; /* 100% height (ratio 1) */
}
To get this:
Make it smaller
.miniprofile {
border-radius: 50%; /* Make it a circle */
margin: 0 auto; /* Center horizontally */
width: 60%; /* 60% width */
padding-bottom: 60%; /* 60% height */
}