Uploaded file has empty type and fails allowedMimeTypes check

[JGhignatti]

Hi,

I'm having a problem on a specific case. I'm running: "@angular/core": "^6.1.9" Windows 10 Home, 64 bits and MacOS Mojave

I have an uploader provider declared as

export function provideUploader() {
  return new FileUploader({
    url: `${env.API}/upload`,
    allowedMimeType: GlobalVariables.FILE_TYPES_DOCS
  });
}

where `FILE_TYPES_DOCS is

FILE_TYPES_DOCS: [
        'image/png',
        'image/gif',
        'image/jpeg',
        'application/pdf',
        'application/vnd.openxmlformats-officedocument.presentationml.presentation',
        'application/vnd.openxmlformats-officedocument.presentationml.slide',
        'application/vnd.openxmlformats-officedocument.presentationml.slideshow',
        'application/vnd.openxmlformats-officedocument.presentationml.template',
        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
        'application/vnd.openxmlformats-officedocument.spreadsheetml.template',
        'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
        'application/vnd.openxmlformats-officedocument.wordprocessingml.template',
        'application/msword',
        'application/vnd.ms-word.document.macroenabled.12',
        'application/vnd.ms-word.template.macroenabled.12',
        'application/vnd.ms-excel',
        'application/vnd.ms-powerpoint',
        'text/plain'
    ]

and then on my component

providers: [{provide: FileUploader, useFactory: provideUploader}]

When I run it on my Macbook, it works just fine for everything, but when I try to upload a .doc file from the Windows environment nothing happens. Debugging it I found a couple things.

First is that the file uploaded hits the mim type check with empty type, so the check will always return false and nothing will happen.

Then I found this issue and thought that it was my problem (later to find that on my windows env I do have Office). This led me to change my uploader provider to

export function provideUploader() {
  return new FileUploader({
    url: `${env.API}/upload`,
    allowedFileType: ['image', 'doc', 'pdf', 'xls', 'ppt']
  });
}

which didn't work as well.

Need help with that, why is the type only empty on my windows? Thx.

[Aditya0149]

I am facing the same issue with PSD files.

[reddevilzee]

type is recognized by the machine that we are using. I faced the same issue with my macOS since i do not have old versions of MsOffice, yet my users when they ran the app in their windows machine, it recognized old versions and succeeded in uploading. i was succesful in uploading DOCX, XLSX

[apesteguy]

Hey ! I have the same issue with compressed files: every .zip/.tar/.7z files. As @JGhignatti explained: file type from FileUploader are not populated when uploading compressed file. I could not find a way to solve the problem using allowedMimeType. So here is my workaround:

First I define my uploader:

  `this.uploader = new FileUploader({

  url: '/api-upload',
  isHTML5: true,
  method: 'POST',
  headers: [{ name: 'X-Requested-With', value: 'XMLHttpRequest' }],
  filters: [
    {
      name: 'fileTypeAllowed',
      // Alert when a file extension is not compressed
      fn: function (item , options) {
        let itemType = item.name.substring(item.name.lastIndexOf('.')+1, item.name.length) || item.name;
        let fileTypesAllowed = ["7z","gz","zip","rar"];
        if (!fileTypesAllowed.includes(itemType)) {
          return this.queue.onWhenAddingFileFailed;
        } else {
          return this.queue;
        }

      }
    }
  ]

});`

Then I am using the onWhenAddingFileFailed method to alert user about the error:

` onAddingFileFailed() {

this.uploader.onWhenAddingFileFailed = (item: any, filter: any, options: any) => {

  switch (filter.name) {

    case 'fileTypeAllowed':
        this.fileErrorDetail = {

          file: item.name,
          error: `File type not allowed`

        }
        break;
    default: {
      console.log('Invalid upload');
      break;
     }

  }

};

}

`

This solution is working but it is really not a clean one. Don't you have another solution ?

[milanhlinak]

@JGhignatti I had the same problem.

Go to Registry Editor (regedit) -> HKEY_CLASSES_ROOT -> .doc. Right click on .doc and select New -> String Value and enter Value name = "Content Type" and Value data = "application/msword".

Repeat the same steps also for HKEY_CLASSES_ROOT -> .docx, but in this case add Value data = "application/vnd.openxmlformats-officedocument.wordprocessingml.document".

[gwendanielle]

@JGhignatti I had the same problem.

Go to Registry Editor (regedit) -> HKEY_CLASSES_ROOT -> .doc. Right click on .doc and select New -> String Value and enter Value name = "Content Type" and Value data = "application/msword".

Repeat the same steps also for HKEY_CLASSES_ROOT -> .docx, but in this case add Value data = "application/vnd.openxmlformats-officedocument.wordprocessingml.document".

thanks for this, this solved my problem.

[nikolaskomodromos]

Hello, I have the same issue with Google Chrome only. When I try to upload a specific Word document using Firefox the type is correct but in Google Chrome type is empty. The solution that you are suggesting is not solid on my application. The reason is that i can fix it on my PC but other users will still getting errors because the type it will be empty an empty string. Is there any solution to fix that?