How to Build Image Size Validation using Vanilla JavaScript
Web developers can use vanilla JavaScript to build a variety of features. Using vanilla JavaScript can speed up the development process in web programming. This is because there are no external libraries and plugins required. For example, vanilla JS provides methods that can be used to put in place image size validation on websites. These methods are embedded in the JavaScript engine. In this article, I will show you step by step how to validate images using vanilla JavaScript.
Step 1: Create a folder and inside it create three files. These are index.html, styles.css, and script.js.
Step 2: Add the HTML boilerplate code and then add the Image upload title between the <title> tags.
<!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"><title>Image Upload</title></head><body></body></html>
Step 3: Link the styles.css file and the script.js file to the head section of the index.html.
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>Step 4: Create a div tag with a class called container inside the body section of the index.html.
<body>
<div class="container">
</div>
</body>Step 5: Add label, input, and span tag inside the container.
<body>
<div class="container">
<label for="imageuploadbutton" class="label">Upload Image Here</label>
<input type="file" id="imageuploadbutton" >
<span class="validation-message" ></span>
</div>
</body>The final index.html file should look like this
<!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"><title>Image Upload</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script></head><body>
<div class="container">
<label for="imageuploadbutton" class="label">Upload Image Here</label>
<input type="file" id="imageuploadbutton" >
<span class="validation-message" ></span>
</div>
</body></html>
Step 6: In the style.css, add container, label, and validation-message class styles.
.container{
padding-left: 30px;
padding-right: 30px;
padding-top: 15px;
padding-bottom: 15px;
display: flex;
flex-direction: column;
align-items: center;}.label {
color: navy;
font-size: larger;
font-weight: bold;
}.validation-message{
color: crimson;
font-size: smaller;
font-weight: normal;
}
Step 7: Now in the script.js create two variables called input and span. These will hold the HTML input and span tags.
let input = document.querySelector('input');
let span = document.querySelector('span');Step 8: Create an event listener in the input variable that will respond to file uploads.
let input = document.querySelector('input');let span = document.querySelector('span');input.addEventListener('', () => {})
Step 9: Inside the addEventlistener return statement, create a variable called files and an if statement to check the length of the files variable. This variable will hold any files that are uploaded.
input.addEventListener('change', () => {let files = input.files;if (files.length > 0) {}span.innerText = '';})
Step 10: Inside the if statement, add another if statement that will validate the file type
input.addEventListener('change', () => {let files = input.files;if (files.length > 0) { if (files[0].type != 'jpeg' || files[0].type != 'png' ) {
span.innerText = 'File Type must be jpeg or png';
return;
}}span.innerText = '';})
Step 11: Next add another if statement that will now validate the image size
input.addEventListener('change', () => {let files = input.files;if (files.length > 0) { if (files[0].type != 'jpeg' || files[0].type != 'png' ) {
span.innerText = 'File Type must be jpeg or png';
return;
} if (files[0].size > 500 * 1024) {
span.innerText = 'File Size Exceeds 500kb';
return;
}
}span.innerText = '';})
The final script.js file should look like this.
let input = document.querySelector('input');
let span = document.querySelector('span');input.addEventListener('change', () => {
let files = input.files;
if (files.length > 0) {
if (files[0].type != 'jpeg' || files[0].type != 'png' ) {span.innerText = 'File Type must be jpeg or png';return;} if (files[0].size > 500 * 1024) { span.innerText = 'File Size Exceeds 500kb'; return;}}span.innerText = '';})
Open the index file in a browser to run everything.
Conclusion
And there we have it. I hope you have found this useful. I will be back with more interesting articles. Thank you for reading.
Go to Mozilla Developer for more information on this.
More content at plainenglish.io
