How can I remove 'All Files' option from HTML file input

Question

I am using to upload custom files.

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

How can I disable/remove the "All Files" option? I there any way through JavaScript or jQuery?

short answer - **no**, this window is rendered by browser and OS, you cannot change it — monkeyinsight, Jan 13 '22 at 13:50
Whether you can change it or not, you still need to verify that the file is one of the right types on the server, as generally anyone can modify what's on the front end and send whatever they want to the backend — ControlAltDel, Jan 13 '22 at 13:53

score 4 · Accepted Answer · answered Jan 13 '22 at 13:50

Limiting accepted file types I believe you're referring to a user's file input popup and you want to limit it over there. For example, if your file input lets users upload a profile picture, you probably want them to select web-compatible image formats, such as JPEG or PNG.

Acceptable file types can be specified with the accept attribute, which takes a comma-separated list of allowed file extensions or MIME types. Some examples:

accept="image/png" or accept=".png" — Accepts PNG files. accept="image/png, image/jpeg" or accept=".png, .jpg, .jpeg" — Accept PNG or JPEG files. accept="image/*" — Accept any file with an image/* MIME type. (Many mobile devices also let the user take a picture with the camera when this is used.) accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" — accept anything that smells like an MS Word document. Here's a sample code for you from Mozilla Dev Docs.

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="profile_pic">Choose file to upload</label>
    <input type="file" id="profile_pic" name="profile_pic"
          accept=".jpg, .jpeg, .png">
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

Please Note You can't disable All files from the popup you can only allow certain file types to be accepted.

How can I remove 'All Files' option from HTML file input

1 Answers1