CODEWITHSUNDEEP
javascript
MEHDI SAOUDI
MEHDI SAOUDI

Reputation: 83

File Type and Size Validation while Uploading it using JavaScript

I am using JavaScript on an HTML form to check the size and type of images before they load.

I am using the following code: JS test.html

    <!DOCTYPE html> 
<html> 
<head> 
    <title> 
        File Type Validation while 
        Uploading it using JavaScript 
    </title> 
    <style> 
        h1 { 
            color: green; 
        } 
          
        body { 
            text-align: center; 
        } 
    </style> 
</head>
<body>
<h1> MyForm</h1>
<h3>  
        Validation of file type and size whileuploading using JavaScript?  
    </h3> 
    <!-- File input field 1 -->
    <p>Upload an Image 1</p> 
    <input type="file" id="image1"
        onchange="return TypeValidation1(); SizeValidation1();" />
     <!-- File input field 2-->
    <p>Upload an Image 2</p> 
    <input type="file" id="image2"
        onchange="return TypeValidation2(); SizeValidation2();" />
    <!-- Script TypeValidation file 1 -->
     <script> 
        function TypeValidation1() { 
            var fileInput =  
                document.getElementById('image1');   
            var filePath = fileInput.value; 
            // Allowing file type 
            var allowedExtensions =  
                    /(\.jpg|\.jpeg|\.png|\.gif)$/i; 
            if (!allowedExtensions.exec(filePath)) { 
                alert('Invalid file type'); 
                fileInput.value = ''; 
                return false; 
            }  
        } 
        </script>
         <!-- Script TypeValidation file 2 -->   
    <script> 
        function TypeValidation2() { 
            var fileInput =  
                document.getElementById('image2');   
            var filePath = fileInput.value; 
            // Allowing file type 
            var allowedExtensions =  
                    /(\.jpg|\.jpeg|\.png|\.gif)$/i;  
            if (!allowedExtensions.exec(filePath)) { 
                alert('Invalid file type'); 
                fileInput.value = ''; 
                return false; 
            }  
        } 
        </script>
    <!-- Script SizeValidation file 1 -->
<script>
function SizeValidation1() {  
        const fi = document.getElementById('image1'); 
        // Check if any file is selected. 
        if (fi.files.length > 0) { 
            for (const i = 0; i <= fi.files.length - 1; i++) { 
  
                const fsize = fi.files.item(i).size; 
                const file = Math.round((fsize / 1024)); 
                // The size of the file. 
                if (file >= 4096) { 
                    alert( 
                      "File too Big, please select a file less than 4mb"); 
                } 
            } 
        } 
    } 
    </script>   
        <!-- Script SizeValidation file 2 -->
<script>
function SizeValidation2() {  
        const fi = document.getElementById('image2'); 
        // Check if any file is selected. 
        if (fi.files.length > 0) { 
            for (const i = 0; i <= fi.files.length - 1; i++) { 
                const fsize = fi.files.item(i).size; 
                const file = Math.round((fsize / 1024)); 
                // The size of the file. 
                if (file >= 4096) { 
                    alert( 
                      "File too Big, please select a file less than 4mb"); 
                } 
            } 
        } 
    }    
    </script> 
</body>  
</html>

The code checks the type of images but it cannot check the size. even for the implementation of two scripts on a single "OnChange" event, I don't know if it is well-written. help please know that I am a beginner in javaScript.

Upvotes: 0

Views: 1369

Answers (1)

Jonas Lysdahl
Jonas Lysdahl

Reputation: 36

There are two combined reasons for this:

  1. You return on the first of the two functions in the onchange. This stops javascript from calling SizeValidation1(). Therefore the code in SizeValidation1 is never called.

You use:

<input type="file" id="image1" onchange="return TypeValidation1(); SizeValidation1();" />

instead use:

<input type="file" id="image1" onchange="TypeValidation1(); SizeValidation1();" />
  1. In the for-loop you use 'const' to define i. This should be 'var' since you in the next run of the loop vil override the value of i.

You use:

for (const i = 0; i <= fi.files.length - 1; i++) {

Instead use:

for (var i = 0; i <= fi.files.length - 1; i++) {

I hope this will be of help to you. Have a great day :-)

Upvotes: 2

Related Questions