zipfile.BadZipFile: Bad magic number for central directory - python-3.x

Question

I am trying to read an excel file in the backened (flask) sent from the frontend (angularjs). However, I am getting the error
File "/var/task/pandas/util/_decorators.py", line 296, in wrapper
return func(*args, **kwargs)
File "/var/task/pandas/io/excel/_base.py", line 304, in read_excel
io = ExcelFile(io, engine=engine)
File "/var/task/pandas/io/excel/_base.py", line 867, in __init__
self._reader = self._engines[engine](self._io)
File "/var/task/pandas/io/excel/_openpyxl.py", line 480, in __init__
super().__init__(filepath_or_buffer)
File "/var/task/pandas/io/excel/_base.py", line 351, in __init__
self.book = self.load_workbook(filepath_or_buffer)
File "/var/task/pandas/io/excel/_openpyxl.py", line 491, in load_workbook
return load_workbook(
File "/mnt/accesspoint/openpyxl/reader/excel.py", line 315, in load_workbook
reader = ExcelReader(filename, read_only, keep_vba,
File "/mnt/accesspoint/openpyxl/reader/excel.py", line 124, in __init__
self.archive = _validate_archive(fn)
File "/mnt/accesspoint/openpyxl/reader/excel.py", line 96, in _validate_archive
archive = ZipFile(filename, 'r')
File "/var/lang/lib/python3.8/zipfile.py", line 1269, in __init__
self._RealGetContents()
File "/var/lang/lib/python3.8/zipfile.py", line 1364, in _RealGetContents
raise BadZipFile("Bad magic number for central directory")
zipfile.BadZipFile: Bad magic number for central directory
What is the problem that's causing this?
Angularjs html
<nz-card nzTitle="Upload File" bordered={false} style="flex: 1 1 auto;">
<nz-upload
[nzCustomRequest]="handleUpload"
(nzChange)="handleChange($event)"
>
<p class="ant-upload-drag-icon"><i nz-icon nzType="inbox"></i></p>
<p class="ant-upload-text">
Click or drag CSV/Excel a file to this area to upload
</p>
</nz-upload>
</nz-card>
Angularjs component
handleUpload = (item: any) => {
const formData = new FormData();
formData.append(item.name, item.file);
const headers = new HttpHeaders();
headers.set('Content-Type', 'multipart/form-data');
var upload = this.httpClient.post(this.SERVER_URL, formData,{headers: headers}).subscribe(
(res) => {
console.log("success");
}
Flask python
def upload():
file = request.files['file']
print("request", file)
df = pd.read_excel(file, index_col=0, engine='openpyxl')
print(df)
Logs (before the error message)
request <FileStorage: 'sample_excel.xlsx' ('application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')>
I have also tried reading it using with
with open(file, 'rb') as f
But with that I get an error stating TypeError: expected str, bytes or os.PathLike object, not FileStorage
Any help would be greatly appreciated!!