type="file" – File Upload Input

Technical Deep Dive & Specifications

The <input type="file"> Element Anatomy

The file input is a void HTML element (<input>) whose type attribute is set to "file". When clicked, the browser sends an asynchronous system call to the host operating system (Windows File Explorer, macOS Finder, Linux GNOME/KDE file chooser, Android Storage Access Framework, or iOS Document Picker) to open the native file selection dialog.

<label for="avatar-upload">Choose your profile picture:</label>
<input 
  type="file" 
  id="avatar-upload" 
  name="avatar" 
  accept="image/png, image/jpeg"
>

The DOM File API Hierarchy: FileList, File, and Blob

When a user selects one or more files, the DOM element’s files property is populated with a FileList object. Understanding the prototype chain is essential for modern web engineering:

+-------------------------------------------------------------+
|                           Blob                              |
|  - size: number (bytes)                                     |
|  - type: string (MIME type)                                 |
|  - slice(start, end, contentType): Blob                     |
|  - arrayBuffer(): Promise<ArrayBuffer>                      |
|  - text(): Promise<string>                                  |
|  - stream(): ReadableStream                                 |
+-------------------------------------------------------------+
                              ▲
                              │ inherits from
+-------------------------------------------------------------+
|                           File                              |
|  - name: string (filename without path)                     |
|  - lastModified: number (UNIX timestamp ms)                 |
|  - webkitRelativePath: string (if directory upload)        |
+-------------------------------------------------------------+
                              ▲
                              │ indexed inside
+-------------------------------------------------------------+
|                         FileList                            |
|  - length: number                                           |
|  - item(index): File                                        |
|  - [index]: File (array-like indexing)                      |
+-------------------------------------------------------------+

1. Blob (Binary Large Object)

A Blob represents immutable, raw binary data. It does not necessarily correspond to a file on a disk (it could be generated in memory from a canvas or WebAudio stream). It provides byte-level operations such as .slice(start, end) for chunking, .text() for decoding text, and .arrayBuffer() for binary manipulation.

2. File

The File interface extends Blob with specific filesystem metadata:

• file.name: The base filename (e.g., "invoice.pdf"). For security, path information (like "C:\Users\John\Desktop\") is stripped.
• file.size: Size of the file in bytes (e.g., 1048576 for 1 MB).
• file.type: The MIME type reported by the OS or deduced by the browser (e.g., "application/pdf", "image/webp"). If unknown, it defaults to an empty string "".
• file.lastModified: The last modification date as milliseconds elapsed since the UNIX epoch (January 1, 1970 00:00:00 UTC).

3. FileList

An array-like list containing File objects.

• It has a .length property and item indexing (files[0] or files.item(0)).
• It is read-only; you cannot push or splice directly onto input.files.
• Modern browsers support iteration via for...of or Array.from(input.files).

Mobile Device Hardware Integration: The capture Attribute

On mobile devices (iOS Safari, Android Chrome), the capture attribute specifies that the browser should immediately invoke native hardware capture devices (camera or microphone) rather than opening a generic document chooser.

<!-- Instant Document/ID Card Scanner on Mobile -->
<input 
  type="file" 
  id="id-capture" 
  name="id_card" 
  accept="image/*" 
  capture="environment"
>

Note: The capture attribute is ignored on desktop operating systems where hardware routing is managed by browser permission prompts (WebRTC).

The Browser File Security Sandbox

Web security dictates two strict principles regarding file inputs:

1. Value Read Sandboxing (Fake Path): When querying input.value in JavaScript, modern browsers return C:\fakepath\filename.ext instead of the real filesystem path. This prevents malicious scripts from fingerprinting the user's username, directory hierarchy, or operating system structure.
2. Programmatic Write Restriction: JavaScript cannot programmatically assign a string path to input.value (e.g., input.value = "C:/passwords.txt" throws a security DOMException). The only way to programmatically set input.files is via the DataTransfer API during explicit drag-and-drop or clipboard interactions.

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Line 46–49 (<input type="file" id="file-picker">): Renders the browser's native file selection button and file name indicator.
• Line 55 (filePicker.addEventListener('change', ...)): Listens to the change event, which fires only after the user confirms a file selection from the OS dialog.
• Line 56 (const fileList = event.target.files;): Retrieves the FileList collection attached to the input element.
• Line 63 (const file = fileList[0];): Accesses the first File instance from the FileList collection.
• Line 66–68: Calculates human-readable kilobyte (KB) or megabyte (MB) units using binary 1024 divisors.
• Line 72 (filePicker.value): Demonstrates the browser sandbox: shows C:\fakepath\<filename> instead of the actual local directory.
• Line 76 (new Date(file.lastModified)): Converts the millisecond timestamp into a human-readable localized date string.
• Line 81 (metaDisplay.textContent = JSON.stringify(...)): Formats and renders the extracted file metadata into the output code block.

Expected Browser Render Output

+-------------------------------------------------------------+
| Native File Inspector                                       |
| Select any file from your computer to inspect its DOM File  |
| properties.                                                 |
|                                                             |
| Choose a File:                                              |
| [ Choose File ] photo.jpg                                   |
|                                                             |
| +---------------------------------------------------------+ |
| | {                                                       | |
| |   "DOM input.value (Sandboxed)": "C:\\fakepath\\photo.jpg",|
| |   "File.name": "photo.jpg",                             | |
| |   "File.size (Bytes)": "204800 bytes (200.00 KB)",      | |
| |   "File.type (MIME)": "image/jpeg",                     | |
| |   "File.lastModified (Epoch)": 1714567890123,           | |
| |   "File.lastModifiedDate": "5/1/2026, 2:30:15 PM",      | |
| |   "Blob Prototype Inheritance": "File"                  | |
| | }                                                       | |
| +---------------------------------------------------------+ |
+-------------------------------------------------------------+