Check Mime Type in jQuery before file upload after changing the extension

Question

I have been trying to implement 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.

Does this answer your question? [How to check file MIME type with javascript before upload?](https://stackoverflow.com/questions/18299806/how-to-check-file-mime-type-with-javascript-before-upload) — Nico Haase, Nov 11 '21 at 12:37
Also, please do not use irrelevant tags. If you want to check anything in your browser, PHP looks unrelated to me — Nico Haase, Nov 11 '21 at 12:37
@NicoHaase: I have tried the link solutions. But the issue is the code that i wrote works for two time and then it starts allowing all type of files — Roger, Nov 12 '21 at 05:49
What hdoes that mean? What have you tried to resolve why it wonly works twice? What changes in the meantime? — Nico Haase, Nov 12 '21 at 06:54
@NicoHaase: I have tried to call the whole code from a function. but it seems due to 'const' the function doesnot work. I tried other codes also but nothing seems to work. It works twice means, it checks the file mime two times and after that it stops checking. Like I am trying to upload an excel file instead of image file. It will check the first two times and block. But after that it allows all types . — Roger, Nov 12 '21 at 09:59
What do you mean by "due to const"? There is no "const" in the code you've shared — Nico Haase, Nov 12 '21 at 10:23
Sorry My Mistake. I was trying another code which has 'const' instead of var — Roger, Nov 12 '21 at 10:25

Roger · Answer 1 · 2021-11-17T11:45:38.543

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

The HTML part of my code

<div id="myfile_mydrive" class="fileupload">
   <div class="fileinput-button btn btn-success btn-sm">
      <i class="fa fa-paperclip"></i>
      <span>Browser Files </span >
      <input type="file" id="myfiles" name="myfiles">
   </div>
   <table role="presentation" class="table table-striped">
     <tbody class="files"></tbody>
   </table>
 </div>

As you can see the issue I faced earlier was:-

'on' change was not firing up the '.fileupload' function.
The 'mime' check was not functioning properly as the values of 'mime' results were not getting cleared.

Therefore, you may see the workaround is 'add' function under the 'fileupload'

Hope that clarifies any doubt about the solution.

Check Mime Type in jQuery before file upload after changing the extension

1 Answers1