Remove 'All Files' option from HTML file input

Question

I am using <input type="file"> to upload audio files.

To do that I am using accept="audio/*". Because of this, the browser's file-select dialog shows only audio files by default. However, there is an option called "All Files" in that dialog box that I don't want.

(note - Any solution in Javascript , jQuery and AngularJs is also welcome)

How can I disable/remove the "All Files" option?

Answer 1

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?

Answer 2

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.