My application was working fine on IE browser, but while migrating it to chrome I am facing a certain issue, in IE whenever we click on select file button then browse and select a file, after that when we click again on select file button we can see the value of selected file is shown in file name that is shown in the dialog box, but in case of chrome on clicking the button the second time, file name value that was selected before is not shown, is there any way to fix this.

I have gone through many pages but everywhere it is mentioned that we cannot do anything with file select option due to security reasons. Is there any workaround in this case, as I am not trying to upload the file, just wanted to show the file name which was previously selected. This is already happening in IE browser not sure how to enable it in EDGE/Chrome.

<label for="avatar">Choose a profile picture:</label>
<input type="file" id="avatar" name="avatar">

In the above code when we click on choose file and select a file it gets selected, when we click on choose file the next time, In IE browser the name of already selected file is shown in file name but the same thing is not happening in edge/chrome.