HTML | DOM Input FileUpload accept Property

Last Updated : 29 Aug, 2022

The DOM Input FileUpload accept Property in HTML DOM is used to set or return the value of the accept attribute of the file upload button. The accept attribute specifies the types of files which are acceptable by that the server.

Syntax:

Return the accept property:

fileuploadObject.accept

Set the accept property:

fileuploadObject.accept="audio/*, video/*, image/*, MIME_type"

Property Values:

audio/* : All sound files are acceptable
video/* : All video files are acceptable
image/* : All image files are acceptable
MIME_type : A valid MIME type, with no parameters.

Return Value: It returns the string value which represent the type of the accepted file.

Example-1: Return the accepted file type.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        h1 {
            color: green;
        }
    </style>
</head>
<body>
    <center>
        <h1>
              Geeeks for Geeks
          </h1>
        <p>Select a file to upload:
            <input type="file" 
                   id="myFile" 
                   size="50"
                   accept="video/*">
        </p>
        <button onclick="myFunction()">
            File type
        </button>
        <p id="demo"></p>
        <script>
            function myFunction() {
              
                var gfg =
                    document.getElementById(
                      "myFile").accept;
              
                document.getElementById(
                  "demo").innerHTML = gfg;
            }
        </script>
    </center>
</body>
</html>

Output:

Before Click:

After Click:

Examples: Set the accepted file type.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        h1 {
            color: green;
        }
    </style>
</head>
<body>
    <center>
      <h1>
          Geeks for Geeks
      </h1>
      <p>Select a file to upload:
            <input type="file" 
                   id="myFile" 
                   size="50"
                   accept="video/*">
        </p>
        <button onclick="myFunction()">
              File type
          </button>
        <p id="demo"></p>
        <script>
            function myFunction() {
              
                var gfg = 
                    document.getElementById(
                      "myFile").accept = 
                    "audio/*,video/*";
              
                document.getElementById(
                  "demo").innerHTML = gfg;
            }
        </script>
    </center>
</body>
</html>