Click here to Skip to main content
15,891,248 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Below code allowing xlsx with "All Files(*.*)". How to restrict in Chrome Browser?

<input #myInput id="files" type="file" (change)="incomingfile($event)" placeholder="Upload file" accept=".xlsx">


What I have tried:

Below Code i tried.

<input #myInput id="files" type="file"(change)="incomingfile($event)" placeholder="Upload file" accept=".xlsx">
Posted
Updated 8-Jul-19 5:52am
Comments
DaveAuld 8-Jul-19 11:30am    
HAve you tried also setting the mime type in the accept? See this https://stackoverflow.com/questions/4328947/limit-file-format-when-using-input-type-file

1 solution

Well, that's how the browser behaves.
you can still restrict the file to be submitted via a basic JQuery/JavaScript validation:

var ext = $('#files').val().split('.').pop().toLowerCase();
if(ext !== 'xls' && ext !== 'xlsx') {
    alert('Please upload excel file only.');
    return false;
}

Javascript version:
JavaScript
var fileName = document.getElementById('files').value.toLowerCase();
if(!fileName.endsWith('.xlsx') && !fileName.endsWith('.xls')){
    alert('Please upload excel file only.');
    return false;
}
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900