File Type and Size Validation while Uploading it using JavaScript

Question

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.

swap this line of code const fsize = fi.files.item(i).size; with const fsize = fi.files[i].size — full-stack
– full-stack, Commented Aug 13, 2020 at 19:28
@full-stack I made the change, but the code still checks the type and not the size. — MEHDI SAOUDI
– MEHDI SAOUDI, Commented Aug 13, 2020 at 19:37

Jonas Lysdahl · Accepted Answer · 2020-08-13 23:03:20Z

2

There are two combined reasons for this:

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();" />

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 :-)

edited Aug 13, 2020 at 23:03

answered Aug 13, 2020 at 21:42

Jonas Lysdahl

363 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

File Type and Size Validation while Uploading it using JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related