Open In App

HTML | DOM Input FileUpload required Property

Last Updated : 29 Aug, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

The Input FileUpload required Property is used to set or return whether a file in the file upload field must be selected/uploaded before submitting a form. This property reflects the HTML required attribute. 

Syntax:

  • Return the required property:
fileuploadObject.required
  • Set the required property:
fileuploadObject.required=true|false

Property Values: 

true: Return ‘true’ when the file upload field is required. 
false: It is the default value. It return ‘false’ when the file upload field is not required. 

Return Value: A Boolean value that displays the status of file upload required field. 

Examples-1: Return FileUpload required Property. 

HTML




<!DOCTYPE html>
<html>
<head>
    <title>
          Input FileUpload required Property
      </title>
    <style>
        h1 {
            color: green;
        }
    </style>
</head>
<body>
    <center>
        <h1>
              Geeks for Geeks
          </h1>
        <form action="/action_page.php">
            <input type="file"
                   id="myFile"
                   required>
            <br>
            <input type="submit"
                   value="Submit">
        </form>
        <p id="demo"></p>
        <button onclick="myFunction()">
              Try it
          </button>
        <script>
            function myFunction() {
                var x =
                    document.getElementById(
                      "myFile").required;
                document.getElementById("demo").innerHTML = x;
            }
        </script>
    </center>
</body>
</html>


Output: 

Before:

  

After:

  

 

Examples-2: Set FileUpload required Property 

HTML




<!DOCTYPE html>
<html>
<head>
    <title>
          Input FileUpload required Property
      </title>
    <style>
        h1 {
            color: green;
        }
    </style>
</head>
<body>
    <center>
        <h1>
              Geeks for Geeks
          </h1>
        <form action="/action_page.php">
            <input type="file"
                   id="myFile">
            <br>
            <input type="submit"
                   value="Submit">
        </form>
        <p id="demo"></p>
        <button onclick="myFunction()">
              Try it
          </button>
        <script>
            function myFunction() {
                var x =
                    document.getElementById(
                      "myFile").required = "true";
               
                document.getElementById("demo").innerHTML = x;
            }
        </script>
    </center>
</body>
</html>


Output: 

Before:

  

After:

  

Supported Browsers:

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


Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads