<div class="custom-dropzone overflow-unset custom-drop"
ngx-dropzone
[accept]="'application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'"
[multiple]="false"
(change)="onFileDropped($event)"
style="overflow: unset;">
<ngx-dropzone-label>
<p>Drag & drop your Excel file here or click to browse</p>
</ngx-dropzone-label>
</div>
this is my html
onFileDropped(event:any) {
if (event.rejectedFiles.length > 0) {
this.spinner.hide();
this.globalService.showError('Invalid File Format. Supported file formats are xls,xlsx');
} else {
const acceptedFormats = [
'application/vnd.ms-excel', // .xls
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' // .xlsx
];
const isValid = event.addedFiles.every((file: File) => acceptedFormats.includes(file.type));
if (!isValid) {
this.globalService.showError('Invalid File Format. Supported file formats are xls, xlsx');
return;
}
console.log(event.addedFiles)
this.headerFiles = [];
this.headerImageSrc = [];
this.headerFiles.push(...event.addedFiles);
}
}
this is my component ts problem is when i excute code on chrome file drag& drop not working but click on dropzone and it open file explore but other browsers i tested firefox,edge are working fine with file drag & drop using same code block