JavaScript Mime Type
MIME (Multipurpose Internet Mail Extensions) is a media type that points to the document type and extensions and portrays the capability of a file.
Technically, we send multiple HTTP requests to the server on loading a webpage or any content in a web browser. And based on the validity of the requests, the server sends corresponding responses to the clients, aka us.
In our local PC, we do have the file name, and its extensions appeared. But the files do not carry the same identity when the browser handles the same data or sends it via a request.
Sometimes there is a default mime type added when sent, or sometimes it requires us to add up through raw codes.
The mime type has a basic construction like Type/SubType. Here, the type denotes the file’s characteristics if it is a text, image, or other files.
The subtype carries the extensions. The browser handles a file sent via request without any mime type.
It resolves the issue by often setting the mime type to text/plain.
This article will examine how we can visualize the mime type for the requests and the responses. So, let’s jump to the code and preview it for a better understanding.
MIME Type in the Case of JavaScript
There is a valid range of mime types and often updated per developers’ urge to improve the experience. In the case of JavaScript, the default or most commonly used mime type is text/javascript.
Also, we have different mime types for JSON and other conventions.
Here, in the code below, we will fetch a URL, and if the request gets accepted by the server, we will get a response. In this regard, we will check the mime type of the document sent via the request and the mime type for the data received with the response.
Code Snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="btn()">Mime</button>
<p id="mime"></p>
<script id="sc" src="mime.js"></script>
</body>
</html>
var mime = document.getElementById('mime')
function getData() {
url = 'https://dummy.restapiexample.com/api/v1/employee/1'
params = {
headers: {'Content-Type': 'application/json'}
} fetch(url, params)
.then((response) => {
return response.text();
})
.then((data) => {mime.innerHTML = data})
}
function btn() {
getData();
}
Output:
As can be seen, when we clicked the Mime button, the request went to fetch data from the given URL. While it was sent to fetch it took the HTML as text/html and the JavaScript as text/javascript.
But when we received the response, the data was in a JSON format; thus, the response header had it written in application/json. This is how we can view the mime types in JavaScript.
Also, there is a package named mime-types, and you can install it on your local PC with the command.
npm install mime-types
And later, you can do mime.getType to view the detail on a certain document or file. The following redirection will lead you to the documentation in mime.
