Javascript: Detect if there is an image in the file reader

Question

Is there a way to see if an image file is in the file reader in javascript?

Charlie · Accepted Answer · 2016-05-06 04:29:21Z

2

You can try to determine if the file is an image by checking few bytes at the beginning of the stream. You can find the header signature of images easily by googling it.

This is a simple way to detect the image type:

 reader.onload = function(e) {
      var buffer = reader.result;
      var int32View = new Int32Array(buffer);
      switch(int32View[0]) {
          case 1196314761: 
              file.verified_type = "image/png";
              break;
          case 944130375:
              file.verified_type = "image/gif";
              break;
          case 544099650:
              file.verified_type = "image/bmp";
              break;
          case -520103681:
              file.verified_type = "image/jpg";
              break;
          default:
                            file.verified_type = "unknown";
              break;
      }
        };

You can check few more bytes to give high accuracy to your results.

answered May 6, 2016 at 4:29

Charlie

24k12 gold badges65 silver badges97 bronze badges

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

1 Comment

dewd Over a year ago

getting an empty int32View for any file type Int32Array [] buffer: ArrayBuffer { byteLength: 0 } byteLength: 0 byteOffset: 0 length: 0

Collectives™ on Stack Overflow

Javascript: Detect if there is an image in the file reader

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related