Remove 'All Files' option from HTML file input
Asked Answered
M

2

61

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)

enter image description here

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

Menard answered 9/6, 2014 at 6:3 Comment(0)
M
39

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?

Mabuse answered 9/6, 2014 at 7:5 Comment(3)
so bottom line is, I can't disable 'All Files' ?Menard
Yep. But the more important answer is that you shouldn't.Mabuse
Absolutley right: This is an usability enhancement not a validation and also not a security feature. So don't really see a problem with that.Talbott
N
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.

Nisus answered 23/2, 2021 at 7:47 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.