How To Validate Upload File Type Using JavaScript

How To Validate Upload File Type Using JavaScript

Hello friends, Today we will How To Validate Upload File Type Using JavaScript. In this example we will learn how to check input type file in JavaScript. In this post we easily check the selected file extension with allowed file extensions using JavaScript.

Laravel provide file type validation in controller, but it is server side only it means we can received validation message after form submit,  we will give you example to check file type before submit data in form using JavaScript. Currently we have checking only specific file extension like “.txt” , “.csv”  etc… or you can use all file types such as “image/* “.

Read Also :  Laravel Livewire Change Event Example

So, copy my code and get out put as we discussed.

Read also : Space Not Allowed Validation in Laravel Example

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>File upload type validation in javascript - web-tuts.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 - web-tuts.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>

I hope you understand of upload file type validation using JavaScript and it can help you…

Read Also :  Laravel Arr has() function Example