angular - input type=file for .docx and .xlsx

Question

I am implementing file upload function where I need to check for permitted file extension. Two permitted file extension are .docx, .xlsx. When I console log, it is not printing for the file extension if it is .docx and .xlsx.

<input type="file" id="file" formControlName="file" (change)="handleFileInput($event.target.files)" accept=".pdf,.docx,.xlsx,.png,.jpeg"/>

handleFileInput(files: FileList) {
    console.log('File type: ' + files.item(0).type);
    return null;
}

question from:https://stackoverflow.com/questions/65879314/input-type-file-for-docx-and-xlsx

Answer 1

try to print the parameter that you got in handleFileInput like below and see if you are getting the files

handleFileInput(files: FileList) {
    const n = files.length;
    for(let i = 0; i < n; ++i) {
        console.log(files[i]);
    }
    console.log(files);
    console.log('File type: ', files[0].type);
    return null;
}

for files, you can specify mime type that are standard for extensions like this in input element

<input type="file"
  accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">

for more info, please refer this
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept
for microsoft office files
https://docs.microsoft.com/en-us/previous-versions/office/office-2007-resource-kit/ee309278(v=office.12)?redirectedfrom=MSDN

after applying the meme type from above references I am getting this output for .xlsx

File
?
lastModified: 1610551870303
?
name: "ALL.xlsx"
?
size: 11503152
?
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
?
webkitRelativePath: ""
?

and for .docx

File
?
lastModified: 1608029273000
?
name: "aaa.docx"
?
size: 64618
?
type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
?
webkitRelativePath: ""
?