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
JavaScript WebAPI File File.name Property
The JavaScript File WebAPI file.name property returns only the name of the file without the path. This property is read-only and provides access to the filename when working with file inputs or drag-and-drop operations.
Syntax
file.name
Return Value
Returns a string containing the name of the file without any path information. The name includes the file extension if present.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>File.name Property Example</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
padding: 20px;
}
.result {
font-size: 18px;
font-weight: 500;
color: #333;
margin: 15px 0;
padding: 10px;
background-color: #f0f0f0;
border-radius: 5px;
}
.file-input {
margin: 10px 0;
padding: 5px;
}
</style>
</head>
<body>
<h1>JavaScript file.name Property</h1>
<div class="result">No file selected</div>
<input type="file" class="file-input" multiple />
<p>Upload one or more files to see their names</p>
<script>
const resultEle = document.querySelector(".result");
const fileInput = document.querySelector(".file-input");
fileInput.addEventListener("change", (event) => {
const files = event.target.files;
if (files.length === 0) {
resultEle.innerHTML = "No file selected";
return;
}
let output = "<strong>Selected Files:</strong><br>";
for (let i = 0; i < files.length; i++) {
output += `${i + 1}. ${files[i].name}<br>`;
}
resultEle.innerHTML = output;
});
</script>
</body>
</html>
Output
When you select files using the file input, the result will display:
Selected Files: 1. document.pdf 2. image.jpg 3. script.js
Key Points
- The
nameproperty is read-only - It returns only the filename, not the full path for security reasons
- The property includes the file extension
- Works with both single and multiple file selections
- Available on File objects obtained from file inputs or drag-and-drop operations
Browser Compatibility
The file.name property is supported in all modern browsers and is part of the File API specification. It works reliably across Chrome, Firefox, Safari, and Edge.
Conclusion
The file.name property provides a secure way to access filenames in web applications. Use it when you need to display or process file names without exposing the user's file system paths.
129 Views
