Article Categories

Selected Reading

JavaScript WebAPI File File.type Property

Javascript Front End Technology Object Oriented Programming

The JavaScript File WebAPI file.type property returns the MIME type of a selected file. This property is essential for validating file types and handling different media formats in web applications.

Syntax

file.type

Return Value

Returns a string representing the MIME type of the file. If the type cannot be determined, it returns an empty string.

Example: Getting File Type

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File Type Property</title>
    <style>
        body {
            font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
            margin: 20px;
        }
        .result {
            font-size: 16px;
            margin: 15px 0;
            padding: 10px;
            background-color: #f0f0f0;
            border-radius: 5px;
        }
        input[type="file"] {
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <h1>JavaScript file.type Property</h1>
    <input type="file" class="fileInput">
    <div class="result">Select a file to see its type</div>
    
    <script>
        let resultEle = document.querySelector(".result");
        
        document.querySelector(".fileInput").addEventListener("change", (event) => {
            const file = event.target.files[0];
            
            if (file) {
                resultEle.innerHTML = `
                    <strong>File Name:</strong> ${file.name}<br>
                    <strong>File Type:</strong> ${file.type || 'Unknown'}<br>
                    <strong>File Size:</strong> ${file.size} bytes
                `;
            }
        });
    </script>
</body>
</html>

Common MIME Types

File Extension	MIME Type	Category
.txt	text/plain	Text
.jpg, .jpeg	image/jpeg	Image
.png	image/png	Image
.pdf	application/pdf	Document
.mp4	video/mp4	Video

File Type Validation Example

<!DOCTYPE html>
<html>
<head>
    <title>File Type Validation</title>
</head>
<body>
    <input type="file" id="imageUpload">
    <div id="message"></div>
    
    <script>
        document.getElementById('imageUpload').addEventListener('change', function(event) {
            const file = event.target.files[0];
            const messageDiv = document.getElementById('message');
            
            if (file) {
                const allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
                
                if (allowedTypes.includes(file.type)) {
                    messageDiv.innerHTML = `<span style="color: green;">Valid image file: ${file.type}</span>`;
                } else {
                    messageDiv.innerHTML = `<span style="color: red;">Invalid file type: ${file.type || 'Unknown'}</span>`;
                }
            }
        });
    </script>
</body>
</html>

Key Points

The file.type property is read-only
Returns an empty string if the MIME type cannot be determined
Commonly used for file validation before upload
MIME type is determined by the file extension, not the actual content

Conclusion

The file.type property provides a simple way to identify file types in web applications. Use it for validation and handling different media formats appropriately.

AmitDiwan

Updated on: 2026-03-15T23:18:59+05:30

160 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next