Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM Input FileUpload accept Property

  • Difficulty Level : Basic
  • Last Updated : 19 Mar, 2019

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.






<!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.




<!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
  • Mozilla Firefox
  • Edge
  • Opera
  • Safari

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :