Photo by Helena Lopes from Pexels
Code below:
Photo by Helena Lopes from Pexels
Code below:
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<!-- Font awesome for fa icons --> | |
<script src="https://use.fontawesome.com/fe459689b4.js"></script> | |
<!-- Including styles.css file --> | |
<link rel="stylesheet" type="text/css" href="./styles.css" /> | |
<title>File upload with preview</title> | |
</head> | |
<body> | |
<h1>Upload image with a preview</h1> | |
<div class="profile-picture"> | |
<h1 class="upload-icon"> | |
<i class="fa fa-plus fa-2x" aria-hidden="true"></i> | |
</h1> | |
<input | |
class="file-uploader" | |
type="file" | |
onchange="upload()" | |
accept="image/*" | |
/> | |
</div> | |
<!-- Including scripts.js file --> | |
<script src="./scripts.js"></script> | |
</body> | |
</html> |
function upload() { | |
const fileUploadInput = document.querySelector('.file-uploader'); | |
/// Validations /// | |
if (!fileUploadInput.value) { | |
return; | |
} | |
// using index [0] to take the first file from the array | |
const image = fileUploadInput.files[0]; | |
// check if the file selected is not an image file | |
if (!image.type.includes('image')) { | |
return alert('Only images are allowed!'); | |
} | |
// check if size (in bytes) exceeds 10 MB | |
if (image.size > 10_000_000) { | |
return alert('Maximum upload size is 10MB!'); | |
} | |
/// Display the image on the screen /// | |
const fileReader = new FileReader(); | |
fileReader.readAsDataURL(image); | |
fileReader.onload = (fileReaderEvent) => { | |
const profilePicture = document.querySelector('.profile-picture'); | |
profilePicture.style.backgroundImage = `url(${fileReaderEvent.target.result})`; | |
} | |
// upload image to the server or the cloud | |
} |
body { | |
margin: 50px; | |
} | |
.file-uploader { | |
/* make it invisible */ | |
opacity: 0; | |
/* make it take the full height and width of the parent container */ | |
height: 100%; | |
width: 100%; | |
cursor: pointer; | |
/* make it absolute positioned */ | |
position: absolute; | |
top: 0%; | |
left: 0%; | |
} | |
.upload-icon { | |
position: absolute; | |
top: 45%; | |
left: 50%; | |
transform: translate(-50%, -50%); | |
/* initial icon state */ | |
opacity: 0; | |
transition: opacity 0.3s ease; | |
color: #ccc; | |
-webkit-text-stroke-width: 2px; | |
-webkit-text-stroke-color: #bbb; | |
} | |
.profile-picture { | |
opacity: 0.75; | |
height: 250px; | |
width: 250px; | |
position: relative; | |
overflow: hidden; | |
/* default image */ | |
background: url('https://qph.cf2.quoracdn.net/main-qimg-f32f85d21d59a5540948c3bfbce52e68'); | |
background-position: center; | |
background-repeat: no-repeat; | |
background-size: cover; | |
-webkit-background-size: cover; | |
-moz-background-size: cover; | |
-o-background-size: cover; | |
-webkit-box-shadow: 0 8px 6px -6px black; | |
-moz-box-shadow: 0 8px 6px -6px black; | |
box-shadow: 0 8px 6px -6px black; | |
} | |
/* toggle icon state */ | |
.profile-picture:hover .upload-icon { | |
opacity: 1; | |
} |