dc/ng2-file-upload
4
0
Fork 0
Code Issues 395 Pull Requests 27 Packages Projects Releases 4 Wiki Activity

Uploaded file has empty type and fails allowedMimeTypes check #1061

New Issue
Open
opened 2018-11-23 15:16:41 +00:00 by JGhignatti · 6 comments
JGhignatti commented 2018-11-23 15:16:41 +00:00 (Migrated from github.com)
Copy Link

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.
documents-bug-1

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.

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. ![documents-bug-1](https://user-images.githubusercontent.com/27514735/48950066-1d56ff00-ef21-11e8-9ced-59a7a6a5ac33.png) Then I found [this issue](https://github.com/valor-software/ng2-file-upload/issues/661) 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.
👍 1
Aditya0149 commented 2018-12-07 10:45:21 +00:00 (Migrated from github.com)
Copy Link

I am facing the same issue with PSD files.

I am facing the same issue with PSD files.
reddevilzee commented 2018-12-11 21:08:02 +00:00 (Migrated from github.com)
Copy Link

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

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 commented 2019-08-08 10:38:57 +00:00 (Migrated from github.com)
Copy Link

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 ?

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 ?
👍 3
milanhlinak commented 2019-08-24 14:31:13 +00:00 (Migrated from github.com)
Copy Link

@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".

@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".
👍 4
gwendanielle commented 2020-10-06 05:06:38 +00:00 (Migrated from github.com)
Copy Link

@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.

> @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 commented 2021-06-25 11:57:44 +00:00 (Migrated from github.com)
Copy Link

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?

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?
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
bug
dependencies
Pull requests that update a dependency file
 duplicate
enhancement
greenkeeper
help wanted
in progress
invalid
need to reproduce
question
status: pending
wontfix
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
allan medjedovic root sabhas
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: dc/ng2-file-upload#1061
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?