Check Mime Type in jquery before file upload after changing the Extension

Question

I have been trying my head around various logics found on the internet. But the issue is that if I change the extension of any file it shows Okay. My code is as below:

    'use strict';
  $("#myfiles").on('change',function(){
    
    var files = $('#myfiles').get(0).files;
   
    if (files.length > 0) {
      var file = files[0];
      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);
        }
        alert(header);
        var type = 'unknown';
        switch (header) {
          case '89504e47':
            type = 'image/png';
            break;
          case '47494638':
            type = 'image/gif';
            break;
          case 'ffd8ffe0':
          case 'ffd8ffe1':
          case 'ffd8ffe2':
            type = 'image/jpeg';
            break;
          case '25504446':
            type = 'application/pdf';
            break;
        }
        //if(type=='image/jpeg') { alert('Its JPEG/JPG'); } else { alert('Its Not'); }
        //alert(type);

        if (type!=='image/png' && type!=='image/gif' && type!=='image/jpeg' && type!=='application/pdf' ) {
          alert("File Type Not Allowed");
        } else {
          $('#myfile_mydrive').fileupload({
            downloadTemplateId: 'template-download-gallery',
            uploadTemplateId: 'template-upload-gallery',
            paramName: 'files[]',
            url: 'mydrive-upload.php',
            dataType: 'json',
            autoUpload: true,
            maxNumberOfFiles: 10,
            acceptFileTypes: /(\.|\/)(pdf|doc|docx|xls|ppt|zip|gif|jpe?g|png)$/i
          });
          
        } 
      };
      fileReader.readAsArrayBuffer(file);
    }
  });

So I implemented the code above. But it shows okay for once or twice then it uploads the file even after showing that file type is not supported

Please help

Answer 1

Atlast found the work around. If anybody needs for mime check in blueimp jquery upload

      $('#myfile_mydrive').fileupload({
       add: function(e, data) {
       var uploadErrors = [];
       var control = document.getElementById("myfiles");
       control.addEventListener("change", function(event) {
        var files = event.target.files[0];
        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);
       var files = event.target.files[0];
       var fileReader = new FileReader();
       fileReader.onload = function(e) {
        var int32View = new Uint8Array(e.target.result);
        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);
        }
        if(header!=='89504e47' && header!=='47494638' && header!=='ffd8ffe0' && header!=='ffd8ffe1' && header!=='ffd8ffe2' && header!=='25504446') { // Check for jpg/jpeg/png/gif/pdf
          alert("File Type Mismatch");
          return;
        } else {
          data.submit();
        }        
      };
      fileReader.readAsArrayBuffer(files);
    },
    downloadTemplateId: 'template-download-gallery',
    uploadTemplateId: 'template-upload-gallery',
    paramName: 'files[]',
    url: 'mydrive-upload.php',
    dataType: 'json',
    autoUpload: false,
    maxNumberOfFiles: 10,
    acceptFileTypes: /(\.|\/)(pdf|gif|jpe?g|png)$/i,    
  });