How To Validate Upload File Type Using Javascript

Websolutionstuff | Aug-03-2020 | Categories : Laravel PHP

This article will show us how to validate upload file type using javascript. Using this post we can easily check the selected file extension with allowed file extensions and we can restrict the user to upload only the allowed file types.

So, let's see file type validation in jquery or file upload type validation using javascript.

laravel also provides file type validation in the controller but it is server-side only which means we can receive validation messages after the form submits, here I will give you an example to check file type before submitting data in the form using javascript. Currently, we have checked only specific file extensions like ".txt", ".csv"  etc... or you can use all file types like "image/* ".

So, add the below code in the javascript.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>File upload type validation in javascript - websolutionstuff.com</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>  
</head>
<body>
  <h3 style="text-align: center;">File upload type validation in javascript - websolutionstuff.com</h3>
  <div class="col-md-6 col-md-offset-5"><br>
  <input type="file" name="file"  id="filesizecheck"><br>
  <span id="error-message" class="validation-error-label"></span>
  </div>
</body>
</html>
<script type="text/javascript">
  $(document).ready(function(){
    $('#filesizecheck').on('change',function(){
      myfiles = $(this).val();
      var ext = myfiles.split('.').pop();
      if(ext == "txt" || ext == "png"){
        $('#error-message').css("display","none");
      }else{
        $('#error-message').html("Only allow valid file inputs.");
        $('#error-message').css("display","block");
        $('#error-message').css("color","red");
      }
    });
  });
</script>

 

And you will get output like the below image.

file upload type validation

 


You might also like:

Recommended Post
Featured Post
Laravel 9 Two Factor Authentication Using Email
Laravel 9 Two Factor Authentic...

In this article, we will see laravel 9 two-factor authentication using email. Here, we will send the OTP code to em...

Read More

Dec-22-2022

Laravel 8 Inner Join Query Example
Laravel 8 Inner Join Query Exa...

In this tutorial we will learn about laravel 8 inner join query example. Also see how to join two tables in laravel 8. I...

Read More

Nov-24-2021

Laravel 9 Paypal Payment Gateway Integration
Laravel 9 Paypal Payment Gatew...

In this article, we will see laravel 9 paypal payment gateway integration. Here, we will learn how to integrate the...

Read More

Jan-17-2023

How To Convert HTML To PDF using JavaScript
How To Convert HTML To PDF usi...

In this example we will see how to convert html to pdf using javaScript. PDF file format is very useful to dow...

Read More

Aug-23-2021