Check file type when form submit?

Question

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.

Answer 1

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/

Answer 2

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.*');

}

Answer 3

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.');
    }        

Answer 4

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>

Answer 5

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