Open In App

HTML | DOM Input FileUpload accept Property

Improve
Improve
Like Article
Like
Save
Share
Report

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>


Output: 

Before Click:

  

After Click: 

 

Supported Browsers:

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


Last Updated : 29 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads