How to check file MIME type with javascript before upload

Question

I have read this and this questions which seems to suggest that the file MIME type could be checked using javascript on client side  Now  I understand that the real validation still has to be done on server side  I want to perform a client side checking to avoid unnecessary wastage of server resource   To test whether this can be done on client side  I changed the extension of a JPEG test file to  png and choose the file for upload  Before sending the file  I query the file object using a javascript console   document getElementsByTagName  input   0  files 0     This is what I get on Chrome 28 0      File  webkitRelativePath      lastModifiedDate  Tue Oct 16 2012   10 00 00 GMT 0000  UTC   name   test png   type   image png   size    500055       It shows type to be image png which seems to indicate that the checking is done based on file extension instead of MIME type  I tried Firefox 22 0 and it gives me the same result  But according to the W3C spec  MIME Sniffing should be implemented   Am I right to say that there is no way to check the MIME type with javascript at the moment  Or am I missing something

User · Accepted Answer

You can easily determine the file MIME type with JavaScript's FileReader before uploading it to a server. I agree that we should prefer server-side checking over client-side, but client-side checking is still possible. I'll show you how and provide a working demo at the bottom.

Check that your browser supports both File and Blob. All major ones should.

if (window.FileReader && window.Blob) {
    // All the File APIs are supported.
} else {
    // File and Blob are not supported
}

Step 1:

You can retrieve the File information from an <input> element like this (ref):

<input type="file" id="your-files" multiple>
<script>
var control = document.getElementById("your-files");
control.addEventListener("change", function(event) {
    // When the control has changed, there are new files
    var files = control.files,
    for (var i = 0; i < files.length; i++) {
        console.log("Filename: " + files[i].name);
        console.log("Type: " + files[i].type);
        console.log("Size: " + files[i].size + " bytes");
    }
}, false);
</script>

Here is a drag-and-drop version of the above (ref):

<div id="your-files"></div>
<script>
var target = document.getElementById("your-files");
target.addEventListener("dragover", function(event) {
    event.preventDefault();
}, false);

target.addEventListener("drop", function(event) {
    // Cancel default actions
    event.preventDefault();
    var files = event.dataTransfer.files,
    for (var i = 0; i < files.length; i++) {
        console.log("Filename: " + files[i].name);
        console.log("Type: " + files[i].type);
        console.log("Size: " + files[i].size + " bytes");
    }
}, false);
</script>

Step 2:

We can now inspect the files and tease out headers and MIME types.

✘ Quick method

You can naïvely ask Blob for the MIME type of whatever file it represents using this pattern:

var blob = files[i]; // See step 1 above
console.log(blob.type);

For images, MIME types come back like the following:

image/jpeg
image/png
...

Caveat: The MIME type is detected from the file extension and can be fooled or spoofed. One can rename a .jpg to a .png and the MIME type will be be reported as image/png.

✓ Proper header-inspecting method

To get the bonafide MIME type of a client-side file we can go a step further and inspect the first few bytes of the given file to compare against so-called magic numbers. Be warned that it's not entirely straightforward because, for instance, JPEG has a few "magic numbers". This is because the format has evolved since 1991. You might get away with checking only the first two bytes, but I prefer checking at least 4 bytes to reduce false positives.

Example file signatures of JPEG (first 4 bytes):

FF D8 FF E0 (SOI + ADD0)
FF D8 FF E1 (SOI + ADD1)
FF D8 FF E2 (SOI + ADD2)

Here is the essential code to retrieve the file header:

var blob = files[i]; // See step 1 above
var fileReader = new FileReader();
fileReader.onloadend = function(e) {
  var arr = (new Uint8Array(e.target.result)).subarray(0, 4);
  var header = "";
  for(var i = 0; i < arr.length; i++) {
     header += arr[i].toString(16);
  }
  console.log(header);

  // Check the file signature against known types

};
fileReader.readAsArrayBuffer(blob);

You can then determine the real MIME type like so (more file signatures here and here):

switch (header) {
    case "89504e47":
        type = "image/png";
        break;
    case "47494638":
        type = "image/gif";
        break;
    case "ffd8ffe0":
    case "ffd8ffe1":
    case "ffd8ffe2":
    case "ffd8ffe3":
    case "ffd8ffe8":
        type = "image/jpeg";
        break;
    default:
        type = "unknown"; // Or you can use the blob.type as fallback
        break;
}

Accept or reject file uploads as you like based on the MIME types expected.

Demo

Here is a working demo for local files and remote files (I had to bypass CORS just for this demo). Open the snippet, run it, and you should see three remote images of different types displayed. At the top you can select a local image or data file, and the file signature and/or MIME type will be displayed.

Notice that even if an image is renamed, its true MIME type can be determined. See below.

Screenshot

Expected output of demo

_x000D_

// Return the first few bytes of the file as a hex string_x000D_
function getBLOBFileHeader(url, blob, callback) {_x000D_
  var fileReader = new FileReader();_x000D_
  fileReader.onloadend = function(e) {_x000D_
    var arr = (new Uint8Array(e.target.result)).subarray(0, 4);_x000D_
    var header = "";_x000D_
    for (var i = 0; i < arr.length; i++) {_x000D_
      header += arr[i].toString(16);_x000D_
    }_x000D_
    callback(url, header);_x000D_
  };_x000D_
  fileReader.readAsArrayBuffer(blob);_x000D_
}_x000D_
_x000D_
function getRemoteFileHeader(url, callback) {_x000D_
  var xhr = new XMLHttpRequest();_x000D_
  // Bypass CORS for this demo - naughty, Drakes_x000D_
  xhr.open('GET', '//cors-anywhere.herokuapp.com/' + url);_x000D_
  xhr.responseType = "blob";_x000D_
  xhr.onload = function() {_x000D_
    callback(url, xhr.response);_x000D_
  };_x000D_
  xhr.onerror = function() {_x000D_
    alert('A network error occurred!');_x000D_
  };_x000D_
  xhr.send();_x000D_
}_x000D_
_x000D_
function headerCallback(url, headerString) {_x000D_
  printHeaderInfo(url, headerString);_x000D_
}_x000D_
_x000D_
function remoteCallback(url, blob) {_x000D_
  printImage(blob);_x000D_
  getBLOBFileHeader(url, blob, headerCallback);_x000D_
}_x000D_
_x000D_
function printImage(blob) {_x000D_
  // Add this image to the document body for proof of GET success_x000D_
  var fr = new FileReader();_x000D_
  fr.onloadend = function() {_x000D_
    $("hr").after($("<img>").attr("src", fr.result))_x000D_
      .after($("<div>").text("Blob MIME type: " + blob.type));_x000D_
  };_x000D_
  fr.readAsDataURL(blob);_x000D_
}_x000D_
_x000D_
// Add more from http://en.wikipedia.org/wiki/List_of_file_signatures_x000D_
function mimeType(headerString) {_x000D_
  switch (headerString) {_x000D_
    case "89504e47":_x000D_
      type = "image/png";_x000D_
      break;_x000D_
    case "47494638":_x000D_
      type = "image/gif";_x000D_
      break;_x000D_
    case "ffd8ffe0":_x000D_
    case "ffd8ffe1":_x000D_
    case "ffd8ffe2":_x000D_
      type = "image/jpeg";_x000D_
      break;_x000D_
    default:_x000D_
      type = "unknown";_x000D_
      break;_x000D_
  }_x000D_
  return type;_x000D_
}_x000D_
_x000D_
function printHeaderInfo(url, headerString) {_x000D_
  $("hr").after($("<div>").text("Real MIME type: " + mimeType(headerString)))_x000D_
    .after($("<div>").text("File header: 0x" + headerString))_x000D_
    .after($("<div>").text(url));_x000D_
}_x000D_
_x000D_
/* Demo driver code */_x000D_
_x000D_
var imageURLsArray = ["http://media2.giphy.com/media/8KrhxtEsrdhD2/giphy.gif", "http://upload.wikimedia.org/wikipedia/commons/e/e9/Felis_silvestris_silvestris_small_gradual_decrease_of_quality.png", "http://static.giantbomb.com/uploads/scale_small/0/316/520157-apple_logo_dec07.jpg"];_x000D_
_x000D_
// Check for FileReader support_x000D_
if (window.FileReader && window.Blob) {_x000D_
  // Load all the remote images from the urls array_x000D_
  for (var i = 0; i < imageURLsArray.length; i++) {_x000D_
    getRemoteFileHeader(imageURLsArray[i], remoteCallback);_x000D_
  }_x000D_
_x000D_
  /* Handle local files */_x000D_
  $("input").on('change', function(event) {_x000D_
    var file = event.target.files[0];_x000D_
    if (file.size >= 2 * 1024 * 1024) {_x000D_
      alert("File size must be at most 2MB");_x000D_
      return;_x000D_
    }_x000D_
    remoteCallback(escape(file.name), file);_x000D_
  });_x000D_
_x000D_
} else {_x000D_
  // File and Blob are not supported_x000D_
  $("hr").after( $("<div>").text("It seems your browser doesn't support FileReader") );_x000D_
} /* Drakes, 2015 */

_x000D_

img {_x000D_
  max-height: 200px_x000D_
}_x000D_
div {_x000D_
  height: 26px;_x000D_
  font: Arial;_x000D_
  font-size: 12pt_x000D_
}_x000D_
form {_x000D_
  height: 40px;_x000D_
}

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>_x000D_
<form>_x000D_
  <input type="file" />_x000D_
  <div>Choose an image to see its file signature.</div>_x000D_
</form>_x000D_
<hr/>

_x000D_

User · Answer

If you just want to check if the file uploaded is an image you can just try to load it into  lt img gt  tag an check for any error callback   Example   var input   document getElementsByTagName  input   0   var reader   new FileReader     reader onload   function  e        imageExists e target result  function exists           if  exists                    Do something with the image file               else                   different file format                        reader readAsDataURL input files 0      function imageExists url  callback        var img   new Image        img onload   function     callback true          img onerror   function     callback false          img src   url

User · Answer

This is what you have to do  var fileVariable  document getElementsById  fileId   files 0     If you want to check for image file types then  if fileVariable type match  image         alert  its an image

User · Answer

For anyone who s looking to not implement this themselves  Sindresorhus has create a utility that works in the browser and has the header-to-mime mappings for most documents you could want   https   github com sindresorhus file-type  You could combine Vitim us s suggestion of only reading in the first X bytes to avoid loading everything into memory with using this utility  example in es6    import fileType from  file-type      or wherever you load the dependency  const blob   file slice 0  fileType minimumBytes    const reader   new FileReader    reader onloadend   function e      if  e target readyState     FileReader DONE        return         const bytes   new Uint8Array e target result     const   ext  mime     fileType fromBuffer bytes         ext is the desired extension and mime is the mimetype    reader readAsArrayBuffer blob

User · Answer

As stated in other answers  you can check the mime type by checking the signature of the file in the first bytes of the file   But what other answers are doing is loading the entire file in memory in order to check the signature  which is very wasteful and could easily freeze your browser if you select a big file by accident or not    x000D   x000D      x000D     Load the mime type based on the signature of the first bytes of the file x000D      param   File    file        A instance of File x000D      param   Function  callback  Callback with the result x000D      author Victor www vitim us x000D      date   2017-03-23 x000D      x000D  function loadMime file  callback    x000D       x000D        List of known mimes x000D      var mimes     x000D            x000D              mime   image jpeg   x000D              pattern   0xFF  0xD8  0xFF   x000D              mask   0xFF  0xFF  0xFF   x000D             x000D            x000D              mime   image png   x000D              pattern   0x89  0x50  0x4E  0x47   x000D              mask   0xFF  0xFF  0xFF  0xFF   x000D            x000D             you can expand this list  see https   mimesniff spec whatwg org  matching-an-image-type-pattern x000D         x000D   x000D      function check bytes  mime    x000D          for  var i   0  l   mime mask length  i  lt  l    i    x000D              if   bytes i   amp  mime mask i   - mime pattern i      0    x000D                  return false  x000D                x000D            x000D          return true  x000D        x000D   x000D      var blob   file slice 0  4     read the first 4 bytes of the file x000D   x000D      var reader   new FileReader    x000D      reader onloadend   function e    x000D          if  e target readyState     FileReader DONE    x000D              var bytes   new Uint8Array e target result   x000D   x000D              for  var i 0  l   mimes length  i lt l    i    x000D                  if  check bytes  mimes i    return callback  Mime      mimes i  mime      lt br gt  Browser     file type   x000D                x000D   x000D              return callback  Mime  unknown  lt br gt  Browser     file type   x000D            x000D         x000D      reader readAsArrayBuffer blob   x000D    x000D   x000D   x000D    when selecting a file on the input x000D  fileInput onchange   function     x000D      loadMime fileInput files 0   function mime    x000D   x000D            print the output to the screen x000D          output innerHTML   mime  x000D          x000D     x000D   lt input type  file  id  fileInput  gt  x000D   lt div id  output  gt  lt  div gt  x000D   x000D   x000D

User · Answer

As Drake states this could be done with FileReader  However  what I present here is a functional version  Take in consideration that the big problem with doing this with JavaScript is to reset the input file  Well  this restricts to only JPG  for other formats you will have to change the mime type and the magic number     lt form id  form-id  gt     lt input type  file  id  input-id  accept  image jpeg   gt   lt  form gt    lt script type  text javascript  gt        function                input-id   on  change   function event                var file   event target files 0               if file size gt  2 1024 1024                    alert  JPG images of maximum 2MB                        form-id   get 0  reset      the tricky part is to  empty  the input file here I reset the form                  return                             if  file type match  image jp                        alert  only JPG images                        form-id   get 0  reset      the tricky part is to  empty  the input file here I reset the form                  return                             var fileReader   new FileReader                fileReader onload   function e                    var int32View   new Uint8Array e target result                     verify the magic number                    for JPG is 0xFF 0xD8 0xFF 0xE0  see https   en wikipedia org wiki List of file signatures                  if int32View length gt 4  amp  amp  int32View 0   0xFF  amp  amp  int32View 1   0xD8  amp  amp  int32View 2   0xFF  amp  amp  int32View 3   0xE0                        alert  ok                       else                       alert  only valid JPG images                            form-id   get 0  reset      the tricky part is to  empty  the input file here I reset the form                      return                                               fileReader readAsArrayBuffer file                        lt  script gt    Take in consideration that this was tested on latest versions of Firefox and Chrome  and on IExplore 10   For a complete list of mime types see Wikipedia   For a complete list of magic number see Wikipedia

User · Answer

Short answer is no   As you note the browsers derive type from the file extension  Mac preview also seems to run off the extension  I m assuming its because its faster reading the file name contained in the pointer  rather than looking up and reading the file on disk   I made a copy of a jpg renamed with png   I was able to consistently get the following from both images in chrome  should work in modern browsers            JFIF     CREATOR  gd-jpeg v1 0  using IJG JPEG v62   quality   90  Which you could hack out a String indexOf  jpeg   check for image type   Here is a fiddle to explore http   jsfiddle net bamboo jkZ2v 1   The ambigious line I forgot to comment in the example  console log          m exec window atob  image src split      1          Splits the base64 encoded img data  leaving on the image Base64 decodes the image Matches only the first line of the image data   The fiddle code uses base64 decode which wont work in IE9  I did find a nice example using VB script that works in IE http   blog nihilogic dk 2008 08 imageinfo-reading-image-metadata-with html  The code to load the image was taken from Joel Vardy  who is doing some cool image canvas resizing client side before uploading which may be of interest https   joelvardy com writing javascript-image-upload

User · Answer

Here is an extension of Roberto14 s answer that does the following   THIS WILL ONLY ALLOW IMAGES  Checks if FileReader is available and falls back to extension checking if it is not available   Gives an error alert if not an image  If it is an image it loads a preview     You should still do server side validation  this is more a convenience for the end user than anything else  But it is handy    lt form id  myform  gt       lt input type  file  id  myimage  onchange  readURL this     gt       lt img id  preview  src     alt  Image Preview    gt   lt  form gt    lt script gt  function readURL input        if  window FileReader  amp  amp  window Blob            if  input files  amp  amp  input files 0                 var reader   new FileReader                reader onload   function  e                    var img   new Image                    img onload   function                         var preview   document getElementById  preview                        preview src   e target result                                         img onerror   function                          alert  error                        input value                                              img src   e target result                                reader readAsDataURL input files 0                                else           var ext   input value split               ext   ext ext length-1  toLowerCase                  var arrayExtensions     jpg     jpeg    png    bmp    gif            if  arrayExtensions lastIndexOf ext     -1                alert  error                input value                             else               var preview   document getElementById  preview                preview setAttribute  alt    Browser does not support preview                                    lt  script gt

User · Answer

Here is a Typescript implementation that supports webp  This is based on the JavaScript answer by Vitim us   interface Mime     mime  string    pattern   number   undefined           tslint disable number-literal-format    tslint disable no-magic-numbers const imageMimes  Mime               mime   image png       pattern   0x89  0x50  0x4e  0x47               mime   image jpeg       pattern   0xff  0xd8  0xff               mime   image gif       pattern   0x47  0x49  0x46  0x38               mime   image webp       pattern   0x52  0x49  0x46  0x46  undefined  undefined  undefined  undefined  0x57  0x45  0x42  0x50  0x56  0x50            You can expand this list  see https   mimesniff spec whatwg org  matching-an-image-type-pattern       tslint enable no-magic-numbers    tslint enable number-literal-format  function isMime bytes  Uint8Array  mime  Mime   boolean     return mime pattern every  p  i    gt   p    bytes i      p      function validateImageMimeType file  File  callback   b  boolean    gt  void      const numBytesNeeded   Math max    imageMimes map m   gt  m pattern length      const blob   file slice 0  numBytesNeeded      Read the needed bytes of the file    const fileReader   new FileReader       fileReader onloadend   e   gt        if   e     fileReader result  return       const bytes   new Uint8Array fileReader result as ArrayBuffer        const valid   imageMimes some mime   gt  isMime bytes  mime         callback valid           fileReader readAsArrayBuffer blob         When selecting a file on the input fileInput onchange        gt      const file   fileInput files  amp  amp  fileInput files 0     if   file  return     validateImageMimeType file  valid   gt        if   valid          alert  Not a valid image file                       x000D   x000D   lt input type  file  id  fileInput  gt  x000D   x000D   x000D

[javascript] How to check file MIME type with javascript before upload?

Step 1:

Step 2:

Demo

Examples related to javascript

Examples related to html

Examples related to file-upload

Examples related to mime-types