Click here to Skip to main content
14,325,352 members
Rate this:
Please Sign up or sign in to vote.
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

Rate this:
Please Sign up or sign in to vote.

Solution 1

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:
var fileName = document.getElementById('files').value.toLowerCase();
if(!fileName.endsWith('.xlsx') && !fileName.endsWith('.xls')){
    alert('Please upload excel file only.');
    return false;
}
   

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




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100