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 · 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):

<form id="form-id">
  <input type="file" id="input-id" accept="image/jpeg"/>
</form>

<script type="text/javascript">
    $(function(){
        $("#input-id").on('change', function(event) {
            var file = event.target.files[0];
            if(file.size>=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>4 && int32View[0]==0xFF && int32View[1]==0xD8 && int32View[2]==0xFF && 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);
        });
    });
</script>

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

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

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

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

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

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

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

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  amp  amp  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  lt input gt  element like this  ref     lt input type  file  id  your-files  multiple gt   lt script gt  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  lt  files length  i              console log  Filename      files i  name           console log  Type      files i  type           console log  Size      files i  size     bytes             false    lt  script gt    Here is a drag-and-drop version of the above  ref     lt div id  your-files  gt  lt  div gt   lt script gt  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  lt  files length  i              console log  Filename      files i  name           console log  Type      files i  type           console log  Size      files i  size     bytes             false    lt  script gt      Step 2   We can now inspect the files and tease out headers and MIME types     x2718  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       x2713  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  lt  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       x000D   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  lt  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     lt img gt    attr  src   fr result   x000D         after     lt div gt    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     lt div gt    text  Real MIME type      mimeType headerString    x000D       after     lt div gt    text  File header  0x    headerString   x000D       after     lt div gt    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  amp  amp  window Blob    x000D       Load all the remote images from the urls array x000D    for  var i   0  i  lt  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  gt   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      lt div gt    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   lt script src  https   ajax googleapis com ajax libs jquery 1 9 1 jquery min js  gt  lt  script gt  x000D   lt form gt  x000D     lt input type  file    gt  x000D     lt div gt Choose an image to see its file signature  lt  div gt  x000D   lt  form gt  x000D   lt hr  gt  x000D   x000D   x000D

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

Examples related to javascript

Examples related to html

Examples related to file-upload

Examples related to mime-types