Difference in File object between Firefox and Chrome

There occurs a difference in the File object received from the same HTML input element between Chrome and Firefox. I am using Angular on the front-end.

My HTML Input Element

<input type="file" accept=".csv" (change)=onSelectFile($event) />

My Typescript Code

onSelectFile(event: any) {
    event.preventDefault();
    const file = event.target.files[0];
    console.log(file)
}

The output of the above Typescript Code on Mozilla Firefox 89.0.1 (64-bit)

File { name: "Facility (5).csv", lastModified: 1624430723623, webkitRelativePath: "", size: 125, type: "text/csv" }

The output of the same Typescript Code on Google Chrome 91.0.4472.114 (Official Build) (64-bit)

File { name: "Facility (5).csv", lastModified: 1624430723623, webkitRelativePath: "", size: 125, , type: "", lastModifiedDate: Wed Jun 23 2021, 12:15:23 GMT+0530 (India Standard Time) }

As can be seen from the above console logs, the File object returns different parameters in different browsers. The type of the file is available in firefox as text/csv but not in chrome.

I have subsequent logic that depends upon the type of the file inputted/imported here. So, I need the type to have the file type on every browser. Please help.

(Note: I also want this work on Safari, but haven't tested it yet.)