Angular ng2-file-upload Input File Filter not working for PNG in Internet Explorer

Question

I am using the file uploader from ng2-file-upload with filetype restriction. However everytime i choose a png file with the Internet Explorer 11, it is not added into the queue. All the other allowed filetypes are working. Here is the code with the file Options:

let uploadOptions: FileUploaderOptions;
if (navigator.userAgent.match(/Trident.*rv\:11\./)) {
  uploadOptions = {
    url: uploadUrl,
    allowedFileType: ['xls', 'xlsx', 'doc', 'docx', 'pdf', 'gif', 'jpg', 'jpeg', 'png', 'odt', 'txt', 'ods'],
    maxFileSize: 10 * 1024 * 1024
  };
} else {
  uploadOptions = {
    url: uploadUrl,
    allowedMimeType: ['application/pdf',
      'application/vnd.ms-excel',
      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
      'application/msword',
      'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
      'application/vnd.oasis.opendocument.text',
      'application/vnd.oasis.opendocument.spreadsheet',
      'image/gif',
      'image/jpeg',
      'image/png'
    ],
    maxFileSize: 10 * 1024 * 1024
  };

}

this.uploader = new FileUploader(uploadOptions);
this.uploader.onCompleteAll = () => {
  this.editStateService.documentAdded('player', 'document');
  this.documentListUpdated.emit();
  this.uploader.clearQueue();
};

Anybody know how to get this working?

Answer 1

Please check this thread, the allowedFileTypes are actually not file extensions, it supports the following file type:

• application
• image
• video
• audio
• pdf
• compress
• doc
• xls
• ppt

Try to add image to the allowedFileTypes list.

Answer 2

After doing a little research I found that older versions IE would return a different set of MIME types for JPEG and PNG image formats. check for the following list:

• image/png
• image/x-png
• image/x-citrix-png
• image/x-citrix-jpeg
• image/pjpeg

Add to your allowedMimeType list : image/x-png