Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Input FileUpload Object
The HTML DOM Input FileUpload Object represents an <input> element with type="file" in an HTML document. This object provides properties and methods to interact with file upload elements programmatically, allowing developers to create, modify, and access file input controls dynamically.
Creating a FileUpload Object
You can create a FileUpload object dynamically using JavaScript's createElement() method −
Syntax
var fileUploadBtn = document.createElement("INPUT");
fileUploadBtn.setAttribute("type", "file");
Alternatively, you can access an existing file input element using −
var fileUploadBtn = document.getElementById("fileId");
// or
var fileUploadBtn = document.getElementsByTagName("input")[0];
Properties
The HTML DOM Input FileUpload Object supports the following properties −
| Property | Description |
|---|---|
| accept | Sets or returns the value of the accept attribute, specifying file types the server accepts |
| autofocus | Sets or returns whether the file upload button should automatically get focus when the page loads |
| disabled | Sets or returns whether the file upload button is disabled |
| defaultValue | Sets or returns the default value of the file upload button |
| files | Returns a FileList object representing the list of selected files |
| form | Returns a reference to the form that contains the file upload button |
| multiple | Sets or returns whether the user can select multiple files |
| name | Sets or returns the value of the name attribute |
| required | Sets or returns whether the file upload field must be filled before submitting the form |
| type | Returns the type of form element (always "file" for file upload inputs) |
| value | Returns the path or name of the selected file (read-only for security reasons) |
Creating a FileUpload Button Dynamically
Following example demonstrates how to create a file upload button dynamically using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>DOM FileUpload Object Example</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
}
.btn {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
margin: 10px;
}
.btn:hover {
background-color: #45a049;
}
#fileContainer {
margin: 20px;
padding: 20px;
border: 2px dashed #ccc;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>DOM FileUpload Object Example</h1>
<button onclick="createFileBtn()" class="btn">Create File Upload Button</button>
<div id="fileContainer"></div>
<script>
function createFileBtn() {
var fileUploadBtn = document.createElement("INPUT");
fileUploadBtn.setAttribute("type", "file");
fileUploadBtn.setAttribute("id", "dynamicFile");
fileUploadBtn.setAttribute("name", "uploadedFile");
var container = document.getElementById("fileContainer");
container.innerHTML = "<p>File Upload Control:</p>";
container.appendChild(fileUploadBtn);
}
</script>
</body>
</html>
The output displays a button that, when clicked, creates a file upload input element −
DOM FileUpload Object Example [Create File Upload Button] File Upload Control: [Choose File] No file chosen
Working with FileUpload Properties
Following example demonstrates how to set and retrieve various properties of a FileUpload object −
<!DOCTYPE html>
<html>
<head>
<title>FileUpload Properties Example</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
max-width: 600px;
margin: 0 auto;
}
.property-demo {
margin: 15px 0;
padding: 15px;
border: 1px solid #ddd;
border-radius: 5px;
background-color: #f9f9f9;
}
button {
background-color: #008CBA;
color: white;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
margin: 5px;
}
button:hover {
background-color: #007B9A;
}
#output {
margin-top: 10px;
padding: 10px;
background-color: #e7f3ff;
border-radius: 4px;
}
</style>
</head>
<body>
<h1>FileUpload Object Properties</h1>
<div class="property-demo">
<input type="file" id="myFile" name="document" accept=".pdf,.doc,.txt" multiple required>
<br><br>
<button onclick="showProperties()">Show Properties</button>
<button onclick="toggleDisabled()">Toggle Disabled</button>
<button onclick="changeAccept()">Change Accept (Images Only)</button>
</div>
<div id="output"></div>
<script>
function showProperties() {
var fileInput = document.getElementById("myFile");
var output = document.getElementById("output");
output.innerHTML = "<h3>Current Properties:</h3>" +
"<strong>Name:</strong> " + fileInput.name + "<br>" +
"<strong>Accept:</strong> " + fileInput.accept + "<br>" +
"<strong>Multiple:</strong> " + fileInput.multiple + "<br>" +
"<strong>Required:</strong> " + fileInput.required + "<br>" +
"<strong>Disabled:</strong> " + fileInput.disabled + "<br>" +
"<strong>Type:</strong> " + fileInput.type + "<br>" +
"<strong>Value:</strong> " + (fileInput.value || "No file selected");
}
function toggleDisabled() {
var fileInput = document.getElementById("myFile");
fileInput.disabled = !fileInput.disabled;
showProperties();
}
function changeAccept() {
var fileInput = document.getElementById("myFile");
fileInput.accept = ".jpg,.png,.gif";
showProperties();
}
</script>
</body>
</html>
This example shows how to interact with FileUpload properties dynamically. The output displays the current property values and allows you to modify them −
Current Properties: Name: document Accept: .pdf,.doc,.txt Multiple: true Required: true Disabled: false Type: file Value: No file selected
Accessing Selected Files
The files property returns a FileList object containing information about selected files −
<!DOCTYPE html>
<html>
<head>
<title>FileList Example</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
max-width: 600px;
margin: 0 auto;
}
#fileInfo {
margin-top: 15px;
padding: 15px;
background-color: #f0f8ff;
border-radius: 5px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h1>File Selection Information</h1>
<input type="file" id="fileSelector" multiple onchange="displayFileInfo()">
<div id="fileInfo">Select files to see their information...</div>
<script>
function displayFileInfo() {
var fileInput = document.getElementById("fileSelector");
var fileInfo = document.getElementById("fileInfo");
var files = fileInput.files;
if (files.length === 0) {
fileInfo.innerHTML = "No files selected.";
return;
}
var info = "<h3>Selected Files (" + files.length + "):</h3>";
for (var i = 0; i < files.length; i++) {
var file = files[i];
info += "<div style='margin: 10px 0; padding: 10px; border: 1px solid #ddd;'>";
info += "<strong>File " + (i + 1) + ":</strong><br>";
info += "<strong>Name:</strong> " + file.name + "<br>";
info += "<strong>Size:</strong> " + file.size + " bytes<br>";
info += "<strong>Type:</strong> " + (file.type || "Unknown") + "<br>";
info += "<strong>Last Modified:</strong> " + new Date(file.lastModified).toLocaleString();
info += "</div>";
}
fileInfo.innerHTML = info;
}
</script>
</body>
</html>
When files are selected, the output displays detailed information about each file −
Selected Files (2): File 1: Name: document.pdf Size: 245760 bytes Type: application/pdf Last Modified: 12/15/2023, 2:30:45 PM File 2: Name: image.jpg Size: 102400 bytes Type: image/jpeg Last Modified: 12/14/2023, 10:15:22 AM
Common Use Cases
The FileUpload object is commonly used for −
Form validation − Checking if required files are selected before form submission
File type restriction − Using the
acceptattribute to limit allowed file typesMultiple file selection − Enabling users to select multiple files simultaneously
File information display − Showing file names, sizes, and types before upload
Dynamic file controls − Creating file input elements programmatically based on user interactions
Conclusion
The HTML DOM Input FileUpload Object provides comprehensive control over file input elements, allowing developers to create, modify, and interact with file upload controls dynamically. Its properties enable validation, customization, and information retrieval, making it essential for building interactive file upload interfaces in web applications.
397 Views
