HTML | DOM Input FileUpload required Property

Last Updated : 29 Aug, 2022

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>