The multiple Attribute for Multiple Files

Technical Deep Dive & Specifications

The multiple Attribute Syntax

The multiple attribute is a boolean attribute. When present on <input type="file">, it signals to the operating system's native file chooser that multi-selection is permitted.

<input 
  type="file" 
  id="gallery-upload" 
  name="gallery_photos[]" 
  accept="image/*" 
  multiple
>

Backend Naming Convention: In PHP and many server frameworks, appending square brackets [] to the input name (e.g., name="photos[]") instructs the server to automatically aggregate submitted files into an indexed array.

The FileList Interface vs JavaScript Arrays

The DOM property input.files returns a FileList object. A FileList is an Array-like Object, meaning:

• It has a numerical .length property.
• Elements can be accessed via bracket index (files[0]) or .item(0).
• It is NOT an Array instance: Array.isArray(input.files) evaluates to false.
• It does not inherit array methods like .map(), .filter(), .reduce(), .slice(), or .forEach() in older legacy specs.
• It is strictly read-only: attempting input.files.push(file) or input.files[0] = newFile fails silently or throws a TypeError.

+-----------------------------------------------------------------------------+
|                          CONVERTING FileList TO ARRAY                       |
+-----------------------------------------------------------------------------+
| Method 1: Spread Operator (ES6+)                                            |
|   const filesArray = [...input.files];                                      |
|                                                                             |
| Method 2: Array.from()                                                      |
|   const filesArray = Array.from(input.files);                               |
|                                                                             |
| Method 3: Iteration via for...of (Modern WHATWG spec supports iterators)    |
|   for (const file of input.files) { console.log(file.name); }               |
+-----------------------------------------------------------------------------+

Solving the Selection Override Quirk with DataTransfer

When a user selects 2 files, then realizes they forgot a third and clicks the file input again, the browser wipes the first 2 files and replaces input.files with only the third file.

To allow users to accumulate files incrementally and delete individual files from a staging list, we use the DataTransfer API:

// 1. Initialize a DataTransfer container
const dataTransfer = new DataTransfer();

// 2. Add files to the container
dataTransfer.items.add(file1);
dataTransfer.items.add(file2);

// 3. Assign the accumulated FileList directly back to the input
fileInput.files = dataTransfer.files;

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Line 66 (<input type="file" id="batch-input" multiple ...>): The multiple attribute enables OS multi-selection.
• Line 77 (let fileQueue = [];): The in-memory JavaScript array holding accumulated File objects across multiple user selections.
• Line 79–89 (batchInput.addEventListener('change', ...)): Converts event.target.files into a true Array via Array.from() and appends unique files to fileQueue.
• Line 92–95 (function removeFile(index)): Deletes a specific file from the array via fileQueue.splice(index, 1) when the user clicks the "Remove" button.
• Line 98–101 (const dt = new DataTransfer(); ... batchInput.files = dt.files;): Crucial step: syncs the updated fileQueue back to the native input.files so traditional form submissions include all queued items.
• Line 119–123: Calculates total aggregate byte size and renders metric summaries in MB or KB.

Expected Browser Render Output

+-------------------------------------------------------------+
| Multi-File Staging Queue                                    |
| Select multiple files repeatedly.                           |
|                                                             |
| [ Choose Files ] 3 files                                    |
|                                                             |
| Staged Upload Queue (3)                                     |
| • 📄 diagram.png (142.3 KB)                    [ Remove ]   |
| • 📄 proposal.pdf (890.1 KB)                   [ Remove ]   |
| • 📄 team.jpg (450.0 KB)                       [ Remove ]   |
| ─────────────────────────────────────────────────────────── |
| Total Aggregate Size:                               1.45 MB |
+-------------------------------------------------------------+