How can i restrict user from not selecting other file types using input type file with react and typescript?

Question

i want to restrict user from selecting files from select dialog other than .xml extensions.

i have code like below,

<input type='file' accept='.xml' onChange={handleselectedfile}/>

Now with this user can still change from .xml to All files and select the file.

How can i make sure or restrict user from selecting files other than .xml extension types.

could someone help me with this. thanks.

Does this answer your question? [Validation of file extension before uploading file](https://stackoverflow.com/questions/4234589/validation-of-file-extension-before-uploading-file) — goto1, Jun 03 '20 at 11:06
`React` is a UI library and there's nothing special about `TypeScript`, so you'd do it the same exact way as you'd do it with vanilla `JavaScript`. — goto1, Jun 03 '20 at 11:07

score 1 · Accepted Answer · answered Jun 03 '20 at 11:06

1

You can try to add a validation onChange

something like this for Javascript

var fileName = document.getElementById('file').value.toLowerCase();
if(!fileName.endsWith('.xml'){
    alert('You can upload xml files only.');
    return false;
}

answered Jun 03 '20 at 11:06

Vaisakh MA

84
1
9

How can i restrict user from not selecting other file types using input type file with react and typescript?

1 Answers1