HTML DOM Input FileUpload Object

The HTML DOM input FileUpload Object represents the <input< element with type=”file” of an HTML document.

Let’s see how to create input FileUpload object −

Syntax

Following is the syntax −

var fileUploadBtn = document.createElement(“INPUT”);
fileUploadBtn.setAttribute(“type”,”file”);

Properties

Following are the properties of HTML DOM input fileupload Object −

Property	Explanation
accept	It returns and modify the value of the accept attribute of an input file upload button.
autofocus	It returns and modify whether an input file upload button should automatically get focused or not on page load.
disabled	It returns and modify the default value of an input file upload button.
defaultValue	It returns and modify the value of the accept attribute of an input file upload button.
files	It returns a filelist object which refers to all the files which are selected by an input file upload button.
forms	It returns the reference of the form which enclose the file upload input button.
multiple	It returns and modify whether the user can select multiple files or not.
name	It returns and modify the value of the name attribute of an input file upload button.
required	It returns and modify the value of the required attribute of an input file upload button.
type	It returns and modify the value of the type attribute of an input file upload button.
value	It returns and modify the content of the value attribute of an input file upload button.

Example

Let us see an example of HTML DOM input file upload object −

<!DOCTYPE html>
<html>
<head>
<style>
   body{
      text-align:center;
   }
   .btn{
      background-color:lightblue;
      border:none;
      height:2rem;
      border-radius:50px;
      width:60%;
      margin:1rem auto;
      display:block;
   }
</style>
</head>
<body>
<h1>DOM Fileupload Object Example</h1>
<button onclick="createFileBtn()" class="btn">Click me to create an input file upload button</button>
<script>
   function createFileBtn() {
      var fileUploadBtn = document.createElement("INPUT");
      fileUploadBtn.setAttribute("type", "file");
      document.body.appendChild(fileUploadBtn);
   }
</script>
</body>
</html>

Output

This will produce the following output −

HTML DOM Input FileUpload Object

Click on “blue” button to create a file upload button.

HTML DOM Input FileUpload Object