# File API

The File API enables web applications to read files (and their contents) stored on the user's computer. This is typically done when a user selects files via an `<input type="file">` element or by drag-and-drop.

## 1. Accessing Files

Files are accessed using the `FileList` object, which is returned by the `files` property of an `<input>` element.

```html
<input type="file" id="fileInput" multiple>
```

```javascript
const fileInput = document.getElementById('fileInput');

fileInput.addEventListener('change', (event) => {
  const fileList = event.target.files;
  console.log(fileList); // A FileList object
  
  for (const file of fileList) {
    console.log(`Name: ${file.name}`);
    console.log(`Size: ${file.size} bytes`);
    console.log(`Type: ${file.type}`);
  }
});
```

## 2. The `FileReader` Object

To read the actual content of a file, you use the `FileReader` object. It works asynchronously and fires events when reading is complete.

### Reading Text

```javascript
const reader = new FileReader();

reader.onload = function(e) {
  const text = e.target.result;
  console.log(text);
};

reader.readAsText(file);
```

### Reading Images (Data URL)

Useful for previewing images before uploading.

```javascript
const reader = new FileReader();

reader.onload = function(e) {
  const img = document.createElement("img");
  img.src = e.target.result; // e.g., "data:image/jpeg;base64,..."
  document.body.appendChild(img);
};

reader.readAsDataURL(file);
```

## 3. Object URLs

An alternative to `FileReader` for previews is `URL.createObjectURL()`. It creates a temporary URL representing the file object. This is generally more efficient than reading the file into a base64 string.

```javascript
const objectURL = URL.createObjectURL(file);
const img = document.createElement("img");
img.src = objectURL;
document.body.appendChild(img);

// Clean up memory when done
img.onload = () => {
  URL.revokeObjectURL(objectURL);
};
```

[[programming/javascript/vanilla/javascript]]
[[programming/javascript/vanilla/typed-arrays]]
[[programming/javascript/vanilla/dom-manipulation]]