HTML | DOM Input FileUpload name Property

Last Updated : 29 Aug, 2022

The name property is used to set or return the value of the name attribute of a file upload button. The name attribute is used to identify form data after the submission to the server.

Syntax:

Return the name property:

fileuploadObject.name

Set the name property:

fileuploadObject.name=name

Property Values:

name: Specifies the name of the file upload button.

Return Value: It returns a string that represents file upload button name.

Examples-1: Return "name" property.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        h1 {
            color: green;
        }
    </style>
</head>
<body>
  <center>
    <h1>
          Geeks for Geeks
      </h1>
    <input type="file"
           id="myFile" 
           name="gfgFile">
    <p id="demo"></p>
    <button onclick="myFunction()">
        Click
    </button>
    <script>
        function myFunction() {
            var x =
                document.getElementById("myFile").name;
            document.getElementById("demo").innerHTML = x;
        }
    </script>
  </center>
</body>
</html>

Output:

Before:

After:

Examples-2: Set "name" property.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        h1 {
            color: green;
        }
    </style>
</head>
<body>
    <center>
    <h1>
          Geeks for Geeks
      </h1>
        <input type="file"
               id="myFile">
        <p id="demo"></p>
        <button onclick="myFunction()">
            Try it
        </button>
        <script>
            function myFunction() {
                var x =
                    document.getElementById(
                        "myFile").name = "new name";

                document.getElementById("demo").innerHTML = x;
            }
        </script>
    </center>
</body>
</html>