<div class="img-container">
<input type="file" id="avatar" name="avatar" accept="image/*" hidden>
<div class="img-area" data-img="">
<i class='bx bxs-cloud-upload icon'></i>
<h3>Upload Image</h3>
<p>Image size must be less than <span>2MB</span></p>
<img src="{{ asset($employee->getFirstMediaUrl('avatar')) }}" alt="no image">
</div>
<button type="button" class="select-image">Select Image</button>
</div>
/* Image css */
:root {
--blue: #0071FF;
--light-blue: #B6DBF6;
--dark-blue: #005DD1;
--grey: #f2f2f2;
}
.img-container {
max-width: 400px;
width: 100%;
background: #fff;
padding: 30px;
border-radius: 30px;
}
.img-area {
position: relative;
width: 100%;
height: 240px;
background: var(--grey);
margin-bottom: 30px;
border-radius: 15px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.img-area .icon {
font-size: 100px;
}
.img-area h3 {
font-size: 20px;
font-weight: 500;
margin-bottom: 6px;
}
.img-area p {
color: #999;
}
.img-area p span {
font-weight: 600;
}
.img-area img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 100;
}
.img-area::before {
content: attr(data-img);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .5);
color: #fff;
font-weight: 500;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
pointer-events: none;
opacity: 0;
transition: all .3s ease;
z-index: 200;
}
.img-area.active:hover::before {
opacity: 1;
}
.select-image {
display: block;
width: 100%;
padding: 16px 0;
border-radius: 15px;
background: var(--blue);
color: #fff;
font-weight: 500;
font-size: 16px;
border: none;
cursor: pointer;
transition: all .3s ease;
}
.select-image:hover {
background: var(--dark-blue);
}
$(function(){
const selectImage = document.querySelector('.select-image');
const inputFile = document.querySelector('#avatar');
const imgArea = document.querySelector('.img-area');
selectImage.addEventListener('click', function () {
inputFile.click();
})
inputFile.addEventListener('change', function () {
const image = this.files[0]
if(image.size < 2000000) {
const reader = new FileReader();
reader.onload = ()=> {
const allImg = imgArea.querySelectorAll('img');
allImg.forEach(item=> item.remove());
const imgUrl = reader.result;
const img = document.createElement('img');
img.src = imgUrl;
imgArea.appendChild(img);
imgArea.classList.add('active');
imgArea.dataset.img = image.name;
}
reader.readAsDataURL(image);
} else {
alert("Image size more than 2MB");
}
})
});