HTML | DOM Input FileUpload accept Property

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 Beginner
          </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>
          Beginner for Beginner
      </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>


Output: 

Before Click:

  

After Click: 

 

Supported Browsers:

  • Google Chrome 1+
  • Mozilla Firefox 1+
  • Edge 12+
  • Opera 11+
  • Safari 1+