24

I'm using javascript's FileReader and my customized function for reading an JPG-JPEG image, My problem is that how it's possible to detect the file extension through my code below and give error to user if the file is not JPG-JPEG:

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {
      alert('image has read completely!');
    }

    reader.readAsDataURL(input.files[0]);
  }
}
madhead
  • 31,729
  • 16
  • 153
  • 201
Baya
  • 310
  • 1
  • 2
  • 8

2 Answers2

47

You can try this, I changed your code as follows:

var fileTypes = ['jpg', 'jpeg', 'png', 'what', 'ever', 'you', 'want'];  //acceptable file types

function readURL(input) {
    if (input.files && input.files[0]) {
        var extension = input.files[0].name.split('.').pop().toLowerCase(),  //file extension from input file
            isSuccess = fileTypes.indexOf(extension) > -1;  //is extension in acceptable types

        if (isSuccess) { //yes
            var reader = new FileReader();
            reader.onload = function (e) {
                alert('image has read completely!');
            }

            reader.readAsDataURL(input.files[0]);
        }
        else { //no
            //warning
        }
    }
}
Engin Üstün
  • 1,118
  • 11
  • 18
5

There's not a direct interface to read the file extension. You have at least 2 options:

  • Use a regex to extract the extension from the filename
  • Use the content type of the file as your filter

For the extension method it'd be something like:

var extension = fileName.match(/\.[0-9a-z]+$/i);
Dane O'Connor
  • 75,180
  • 37
  • 119
  • 173