Remove 'All Files' option from HTML file input

It possible now by using window.showOpenFilePicker present in File System Access API. Only issue is its only available in Chrome since October 2020.

  const files = await window.showOpenFilePicker({     
    
    types: [
          {
            description: 'Audio Files',
            accept: {
              'audio/*': ['.mp3','.wav'],//Extensions you want to allow
            },
          },
        ],
        excludeAcceptAllOption: true, // this hides all files option
        multiple: false,
});

API Specification: https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API

Note: This is not on a standards track.

I believe that this is outside the scope of the browser, and is more up to the OS. However, despite whatever the case is, I don't think that this is something that you should mess with anyway.

accept doesn't have the best support (although might not be an issue), but as you can see here: http://www.iana.org/assignments/media-types/media-types.xhtml#audio the sheer number of allowed types probably falls outside of the scope of your application anyway. The best thing you should do is perform server side validation, using accept purely as a client indicator.

Also, while it is an older answer, I think it is still relevant and valid: File input 'accept' attribute - is it useful?