W3cubDocs

/Web APIs

File: type property

Returns the media type (MIME) of the file represented by a File object.

Value

A string, containing the media type(MIME) indicating the type of the file, for example "image/png" for PNG images

Examples

HTML

html

<input type="file" id="filepicker" name="fileList" multiple />
<output id="output"></output>

JavaScript

js

const output = document.getElementById("output");
const filepicker = document.getElementById("filepicker");

filepicker.addEventListener("change", (event) => {
  const files = event.target.files;
  output.textContent = "";

  for (const file of files) {
    output.textContent += `${file.name}: ${file.type || "unknown"}\n`;
  }
});

Result

Note: Based on the current implementation, browsers won't actually read the bytestream of a file to determine its media type. It is assumed based on the file extension; a PNG image file renamed to .txt would give "text/plain" and not "image/png". Moreover, file.type is generally reliable only for common file types like images, HTML documents, audio and video. Uncommon file extensions would return an empty string. Client configuration (for instance, the Windows Registry) may result in unexpected values even for common types. Developers are advised not to rely on this property as a sole validation scheme.

Specifications

Specification
File API
# dfn-type

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
type 13 12 3.6 10 ≤15 8 ≤37 18 4 ≤14 8 1.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/File/type