1

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;
}
bittersour
  • 937
  • 2
  • 11
  • 32
  • Would you check this link, which shows the steps for file uploads. https://stackoverflow.com/questions/47936183/angular-file-upload – Sarath Mohandas Jan 25 '21 at 05:26

1 Answers1

0

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://learn.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: ""
​
mss
  • 1,423
  • 2
  • 9
  • 18
  • I get this output File: [object FileList] – bittersour Jan 25 '21 at 05:36
  • @bittersour ok, try to iterate the files in for loop and print each files object inside it and also try to print Files[0], you will see all the property of the object, see my updated code for reference – mss Jan 25 '21 at 05:38
  • I can see File {name: "file-sample_100kB.docx", lastModified: 1611307693950, lastModifiedDate: Fri Jan 22 2021 17:28:13 GMT+0800 (Singapore Standard Time), webkitRelativePath: "", size: 111303, …} lastModified: 1611307693950. But the type is empty for .docx and .xlsx type – bittersour Jan 25 '21 at 05:51
  • I think I am able to get the file extension by files.item(0).name.substr(files.item(0).name.lastIndexOf('.')+1 – bittersour Jan 25 '21 at 05:57
  • @bittersour nice ,here you go. one thing I would suggest though, that in accept type use the standard mime type for .xlsx and .docx, then maybe you can get the correct file type printed, updating the answer – mss Jan 25 '21 at 06:00
  • i updated the accept attribute. If i do files[0].type, it is still empty though for .docx and .xlsx. Hmm... – bittersour Jan 25 '21 at 06:07
  • @bittersour so I tried this, I am getting different output, see my updated code – mss Jan 25 '21 at 06:36
  • could it be because on my machine i do not have ms office installed? – bittersour Jan 25 '21 at 06:40
  • @bittersour I am not sure, but I think this should not be the reason because my own system is ubuntu linux. – mss Jan 25 '21 at 06:42
  • @bittersour try to remove accept attribute and see if it works – mss Jan 25 '21 at 06:43
  • hmm i tried removing accept attribute but still same. Maybe i will go with files.item(0).name.substr(files.item(0).name.lastIndexOf('.')+1. Thanks for the help! :) – bittersour Jan 25 '21 at 06:51
  • @bittersour Not a problem :> – mss Jan 25 '21 at 06:59