JavaScript File Upload Size Validation

File uploads are a crucial feature of many websites, but allowing users to upload large files can slow down your site and lead to a poor user experience. In this guide, we'll walk you through the process of validating an uploaded file to ensure it's no larger than 2 MB using JavaScript. By implementing this validation, you'll enhance your site's performance and provide users with a seamless uploading experience.

Header Outline

  • Introduction
  • Understanding File Size Validation
  • Implementing File Size Check in JavaScript
  • Full Souce Code
  • Screenshot

Efficient file uploads play a significant role in user satisfaction. Large file uploads can consume bandwidth and server resources, leading to slower load times. By enforcing a file size limit, you can prevent potential issues and maintain a high-performing website.

Understanding File Size Validation

Before diving into the implementation, it's essential to understand why file size validation is crucial. Uploading excessively large files not only impacts your server but also tests the user's patience. Implementing validation ensures that users are aware of the size restrictions and helps them make necessary adjustments before uploading.

Implementing File Size Check in JavaScript

To restrict file sizes, you'll need to add a validation step using JavaScript. Here's a simplified 

example:


<script>

    function upload3() {
   
    var ads_space3_img = document.getElementById("ads_space3_img");
   
    var reader = new FileReader();
   
    reader.readAsDataURL(ads_space3_img.files[0]);
   
    reader.onload = function (e) {
   
    var image = new Image();
   
    image.src = e.target.result;
   
    image.onload = function () {
   
    var height = this.height;
   
    var width = this.width;
   
    var maxAllowedSize = 2 * 1024 * 1024;
   
    //alert(maxAllowedSize);
   
    var size = ads_space3_img.files[0].size;
   
    if(size > maxAllowedSize)
   
    {
   
    document.getElementById("submit").disabled = true;
   
    alert("File is greater than 2MB");
   
    return false;
   
    }
   
    };
   
    }
   
    }
   
</script>


In this sample javascript code was used for size validation, restricting uploads to 2 MB

Full Souce Code



<!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>Document</title>
</head>
<body>

    <input type="file" name="image[]" id="ads_space3_img" onchange="return upload3()"
required>
    <input type="submit" name="submit" value="Submit" id="submit" class="btn">


</body>

<script>

    function upload3() {
   
    var ads_space3_img = document.getElementById("ads_space3_img");
   
    var reader = new FileReader();
   
    reader.readAsDataURL(ads_space3_img.files[0]);
   
    reader.onload = function (e) {
   
    var image = new Image();
   
    image.src = e.target.result;
   
    image.onload = function () {
   
    var height = this.height;
   
    var width = this.width;
   
    var maxAllowedSize = 2 * 1024 * 1024;
   
    //alert(maxAllowedSize);
   
    var size = ads_space3_img.files[0].size;
   
    if(size > maxAllowedSize)
   
    {
   
    document.getElementById("submit").disabled = true;
   
    alert("File is greater than 2MB");
   
    return false;
   
    }
   
    };
   
    }
   
    }
   
</script>


</html>



Screenshot


JavaScript File Upload Size Validation


JavaScript File Upload Size Validation

User experience is paramount. Instead of a generic alert, consider using a more user-friendly approach, such as displaying an error message on the upload form. This offers immediate feedback and guides users towards successful uploads.

Conclusion

Efficiently validating and restricting file sizes during uploads is a simple yet impactful way to optimize your website's performance. By following these steps, you ensure a smoother user experience and prevent potential slowdowns caused by oversized file uploads.

In conclusion, validating uploaded file sizes to a maximum of 2 MB using JavaScript is an effective strategy to maintain your website's efficiency and provide users with a satisfying experience.