Check file type when form submit?

I have the form having the follwing fields,

<form onsubmit="return checkcreateform()" action="/gallery/create" method="post" enctype="multipart/form-data">
   <label>Type:*</label>
    <label for="type-1">
     <input type="radio" checked="checked" value="1" id="type-1" name="type">Image
    </label>
   <br>
   <label for="type-2">
   <input type="radio" value="2" id="type-2" name="type">Video
   </label>  
   <label class="itemdetailfloatL required" for="file">File:*</label>
   <input type="hidden" id="MAX_FILE_SIZE" value="8388608" name="MAX_FILE_SIZE">
   <input type="file" tabindex="5" class="text-size text" id="file" name="file">
 <input type="submit" value="Create" id="submit" name="submit">
</form>

I want to validate before form submit. Here how can i validate if user select type as Image and upload video or select type as video and upload image ?

We can achieve this by javascript or jquery.Any quick way to validate this ?

Kindly help me on this.

38 thoughts on “Check file type when form submit?”

  1. First you should change your html like this:

    <input type="file" tabindex="5" class="text-size text" id="file" name="file" onchange="checkeExtension(this.value,"submit");">
    

    Then, you need a function like this:

    ///image 1 and video 2
    //you can extend file types
    var types= {
        'jpg' :"1",
        'avi' :"2",
        'png' :"1",
        "mov" : "2",
    }
    
    function checkeExtension(filename,submitId) {
        var re = /\..+$/;
        var ext = filename.match(re);
        var type = $("input[type='radio']:checked").val();
        var submitEl = document.getElementById(submitId);
    
        if (types[ext] == type) {
            submitEl.disabled = false;
            return true;
        } else {
            alert("Invalid file type, please select another file");
            submitEl.disabled = true;
            return false;
        }  
    }
    
    Reply
  2. Using files property on input:file you can loop through file objects and check type property

        $('#upload').on("change", function(){
     
             var  sel_files  = document.getElementById('upload').files;
             var len = sel_files.length;
     
             for (var i = 0; i < len; i++) {
    
                var file = sel_files[i];
             
                if (!(file.type==='application/pdf')) {
                continue;
                }
              }
    
          }); 
    <div class="modal">
      <form id="form-upload">
        <input type="file" name="upload" id="upload" multiple>
        <br/>
         
    </form>
    </div>
    Reply
  3. you can try this:

    function getFile(fieldId) {
        var fileInsert = document.getElementById(fieldId).value;
            fileName = fileName.split('/');
            fileName = fileName[fileName.length];
            extentions = fileName.split('.');
            extentions = extentions[extentions.length];
        return extentions;
    }
    

    You can use this function in your checkcreateform()

    Reply
  4. Instead of using onsubmit, use jQuery’s submit handler, and validate using some javascript like the following:

    function getExtension(filename) {
      var parts = filename.split('.');
      return parts[parts.length - 1];
    }
    
    function isImage(filename) {
      var ext = getExtension(filename);
      switch (ext.toLowerCase()) {
        case 'jpg':
        case 'gif':
        case 'bmp':
        case 'png':
          //etc
          return true;
      }
      return false;
    }
    
    function isVideo(filename) {
      var ext = getExtension(filename);
      switch (ext.toLowerCase()) {
        case 'm4v':
        case 'avi':
        case 'mpg':
        case 'mp4':
          // etc
          return true;
      }
      return false;
    }
    
    $(function() {
      $('form').submit(function() {
        function failValidation(msg) {
          alert(msg); // just an alert for now but you can spice this up later
          return false;
        }
    
        var file = $('#file');
        var imageChosen = $('#type-1').is(':checked');
        if (imageChosen && !isImage(file.val())) {
          return failValidation('Please select a valid image');
        } else if (!imageChosen && !isVideo(file.val())) {
          return failValidation('Please select a valid video file.');
        }
    
        // success at this point
        // indicate success with alert for now
        alert('Valid file! Here is where you would return true to allow the form to submit normally.');
        return false; // prevent form submitting anyway - remove this in your environment
      });
    
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <form action="/gallery/create" method="post" enctype="multipart/form-data">
      <label>Type:*</label>
      <label for="type-1">
         <input type="radio" checked="checked" value="1" id="type-1" name="type">Image
        </label>
      <label for="type-2">
       <input type="radio" value="2" id="type-2" name="type">Video
        </label> <br />
      <label class="itemdetailfloatL required" for="file">File:*</label>
      <input type="hidden" id="MAX_FILE_SIZE" value="8388608" name="MAX_FILE_SIZE">
      <input type="file" tabindex="5" class="text-size text" id="file" name="file">
      <br/>
      <input type="submit" value="Create" id="submit" name="submit">
    </form>

    tested in IE8, RockMelt (based on Chrome) and Firefox 7: http://jsfiddle.net/Ngrbj/4/

    Reply
  5. Every File type has a ‘type’ property, for example: ‘image/jpeg’, ‘audio/mp3’ and so on…

    This is an example for one way to check the type of the file by using the ‘match’ method (of strings):

    function getFileType(file) {
    
      if(file.type.match('image.*'))
        return 'image';
    
      if(file.type.match('video.*'))
        return 'video';
    
      if(file.type.match('audio.*'))
        return 'audio';
    
      // etc...
    
      return 'other';
    }
    

    You can also write it the boolean way:

    function isImage(
    
      return !!file.type.match('image.*');
    
    }
    
    Reply
  6. As already said, a file has a type property.
    You could compare the file type to a list of supported types like this:

    const validFileTypes = ['image/jpeg', 'image/jpg', 'image/png'];
    
    const fileTypeValid = (file, fileTypes) => {     
        return fileTypes.some((fileType) => fileType === file.type);
    }
    
    // ... call fileTypeValid with the two parameters
    
    Reply
  7. The answer provided works, but something that will run a little faster with a lot fewer lines for the validation code, using javascript array functions:

    var extensionLists = {}; //Create an object for all extension lists
    extensionLists.video = ['m4v', 'avi','mpg','mp4', 'webm'];  
    extensionLists.image = ['jpg', 'gif', 'bmp', 'png'];
    
    // One validation function for all file types    
    function isValidFileType(fName, fType) {
        return extensionLists[fType].indexOf(fName.split('.').pop()) > -1;
    }
    

    Then, the if statement in the submit code is just swapped with:

    if (imageChosen && !isValidFileType(file.val(), 'image')) {
            return failValidation('Please select a valid image');
        }
    else if (!imageChosen && !isValidFileType(file.val(), 'video')) {
            return failValidation('Please select a valid video file.');
        }        
    
    Reply

Leave a Comment