Reading File Metadata Using jQuery – A Comprehensive Guide
Table of Contents
1️⃣ Introduction to File Metadata
2️⃣ Why Read File Metadata?
3️⃣ Understanding the File API in JavaScript
4️⃣ Setting Up the Development Environment
5️⃣ Creating the HTML Structure for File Upload
6️⃣ Implementing jQuery to Read File Metadata
7️⃣ Extracting Metadata (File Name, Size, Type, and Last Modified Date)
8️⃣ Displaying File Metadata on the Webpage
9️⃣ Validating File Metadata Before Upload
🔟 Handling Multiple File Selection
1️⃣1️⃣ Extracting Image Metadata (Width, Height, and EXIF Data)
1️⃣2️⃣ Working with Audio and Video File Metadata
1️⃣3️⃣ Enhancing UI with CSS and Animations
1️⃣4️⃣ Secure Handling of File Metadata
1️⃣5️⃣ Debugging Common Issues
1️⃣6️⃣ Conclusion
1️⃣ Introduction to File Metadata
What is File Metadata?
Metadata is information about a file, such as:
- 📄 File Name – The name of the file
- 🗂 File Type – MIME type (e.g.,
image/png,video/mp4) - 📏 File Size – Size in bytes or MB
- 📆 Last Modified Date – Timestamp of last modification
Example:
For an image file (photo.jpg), metadata may include:
✔ File Name: photo.jpg
✔ File Type: image/jpeg
✔ File Size: 2.5 MB
✔ Last Modified: March 20, 2024, 10:30 AM
2️⃣ Why Read File Metadata?
✔ Validate files before uploading (e.g., restrict file size, type)
✔ Provide real-time file information to users
✔ Enhance file preview features
✔ Improve security measures before sending files to the server
3️⃣ Understanding the File API in JavaScript
The JavaScript File API allows web applications to:
- Access file properties
- Read file contents
- Extract metadata
- Display file previews
Key Methods in the File API
| Method | Description |
|---|---|
File.name | Gets the file name |
File.size | Gets the file size (in bytes) |
File.type | Gets the MIME type |
File.lastModified | Gets last modified date |
URL.createObjectURL(file) | Creates a URL for file preview |
4️⃣ Setting Up the Development Environment
📂 Project Structure:
- 📜
index.html(Frontend UI) - 📜
style.css(Styling) - 📜
script.js(jQuery logic)
Include jQuery in index.html
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
5️⃣ Creating the HTML Structure for File Upload
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File Metadata Reader</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="container">
<h2>Select a File to Read Metadata</h2>
<input type="file" id="fileInput">
<div id="fileMetadata"></div>
</div>
<script src="script.js"></script>
</body>
</html>
6️⃣ Implementing jQuery to Read File Metadata
Listening for File Selection in script.js
$(document).ready(function(){
$("#fileInput").on("change", function(event){
let file = event.target.files[0]; // Get the first selected file
if (file) {
displayFileMetadata(file);
}
});
});
7️⃣ Extracting Metadata (File Name, Size, Type, and Last Modified Date)
function displayFileMetadata(file) {
let metadataHtml = `
<p><strong>File Name:</strong> ${file.name}</p>
<p><strong>File Type:</strong> ${file.type}</p>
<p><strong>File Size:</strong> ${(file.size / 1024 / 1024).toFixed(2)} MB</p>
<p><strong>Last Modified:</strong> ${new Date(file.lastModified).toLocaleString()}</p>
`;
$("#fileMetadata").html(metadataHtml);
}
8️⃣ Displaying File Metadata on the Webpage
✔ Selected file’s metadata will now be displayed dynamically inside #fileMetadata.
9️⃣ Validating File Metadata Before Upload
function validateFile(file) {
let allowedTypes = ["image/jpeg", "image/png", "application/pdf"];
let maxSize = 5 * 1024 * 1024; // 5MB
if (!allowedTypes.includes(file.type)) {
alert("Invalid file type: " + file.name);
return false;
}
if (file.size > maxSize) {
alert("File too large: " + file.name);
return false;
}
return true;
}
🔟 Handling Multiple File Selection
$("#fileInput").on("change", function(event){
let files = event.target.files;
let output = "";
for (let file of files) {
output += `
<p><strong>File Name:</strong> ${file.name}</p>
<p><strong>File Type:</strong> ${file.type}</p>
<p><strong>File Size:</strong> ${(file.size / 1024 / 1024).toFixed(2)} MB</p>
<p><strong>Last Modified:</strong> ${new Date(file.lastModified).toLocaleString()}</p>
<hr>
`;
}
$("#fileMetadata").html(output);
});
1️⃣1️⃣ Extracting Image Metadata (Width, Height, and EXIF Data)
function getImageMetadata(file) {
let img = new Image();
img.src = URL.createObjectURL(file);
img.onload = function() {
$("#fileMetadata").append(`
<p><strong>Image Width:</strong> ${img.width}px</p>
<p><strong>Image Height:</strong> ${img.height}px</p>
`);
};
}
1️⃣2️⃣ Working with Audio and Video File Metadata
function getMediaMetadata(file) {
let media = document.createElement("video");
media.src = URL.createObjectURL(file);
media.onloadedmetadata = function() {
$("#fileMetadata").append(`
<p><strong>Duration:</strong> ${media.duration.toFixed(2)} seconds</p>
`);
};
}
1️⃣3️⃣ Enhancing UI with CSS and Animations
.container {
text-align: center;
margin-top: 20px;
}
input {
margin-bottom: 20px;
}
#fileMetadata {
background: #f4f4f4;
padding: 10px;
border-radius: 5px;
max-width: 500px;
margin: auto;
}
1️⃣4️⃣ Secure Handling of File Metadata
✔ Prevent XSS Attacks – Avoid inserting metadata directly into HTML
✔ Sanitize File Names – Escape special characters
✔ Restrict File Access – Use secure server-side validation
1️⃣5️⃣ Debugging Common Issues
✔ File API not working? – Ensure browser supports it
✔ Metadata not displaying? – Use console.log(file) to inspect
✔ File size incorrect? – Convert bytes to MB correctly
🎯 We successfully implemented file metadata reading using jQuery and JavaScript File API! 🚀
✅ Supports name, type, size, last modified date
✅ Works with multiple file selection
✅ Handles image, audio, and video metadata
🔹 Next Steps: Integrate file previews and server-side validation!