How to detect file extension with javascript FileReader

Question

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]);
  }
}

Nothing hinders you to also read it, but it's not necessary for getting the name — Bergi
– Bergi, Commented Aug 3, 2014 at 20:43
Note that this is probably an XY problem: you really want to be checking the MIME type: stackoverflow.com/a/29672957/2691058 — toastrackengima
– toastrackengima, Commented Jun 17, 2020 at 8:53

Engin Üstün · Accepted Answer · 2014-08-02 14:47:27Z

48

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
        }
    }
}

answered Aug 2, 2014 at 14:47

Engin Üstün

1,12811 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dane O'Connor · Accepted Answer · 2014-08-02 14:13:04Z

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);

answered Aug 2, 2014 at 14:13

Dane O'Connor

77.8k41 gold badges122 silver badges174 bronze badges

1 Comment

LinusG. Over a year ago

I like regex a lot better than splitting strings, and dropping chars, etc.. Thanks for the suggestion!

Collectives™ on Stack Overflow

How to detect file extension with javascript FileReader

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related