Syntax error JavaScript WebAPI File File.type Property

JavaScript WebAPI File File.type Property



The JavaScript File WebAPI file.type property indicated the media type of the file.

Following is the code for the File WebApi File.type property −

Example

 Live Demo

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
   font-size: 18px;
   font-weight: 500;
   color: red;
}
</style>
</head>
<body>
<h1>JavaScript file.type property</h1>
<div class="result"></div>
<input type="file" class="fileInput" />
<h3>Upload a file using the above input type to get its file type</h3>
<script>
let resultEle = document.querySelector(".result");
document
.querySelector(".fileInput")
.addEventListener("change", (event) => {
   resultEle.innerHTML +=
   "File name = " + event.target.files[0].name + "<br>";
   resultEle.innerHTML += "File type = " + event.target.files[0].type;
});
</script>
</body>
</html>

Output

On clicking the “Choose file” button −


Updated on: 2020-05-06T11:58:12+05:30

113 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements