File and FileReader

Web Development / Frontend / JavaScript DOM / Binary-Data

The File API lets users select files from their device. FileReader reads the contents — as text, data URL, or ArrayBuffer.

The `File` Object

A File is a Blob with additional metadata:

file.name          // "photo.jpg"
file.size          // 102400 (bytes)
file.type          // "image/jpeg"
file.lastModified  // timestamp

Getting Files from Input

<input type="file" id="file-input" multiple>

document.getElementById('file-input').addEventListener('change', function(e) {
  const files = e.target.files; // FileList
  for (const file of files) {
    console.log(file.name, file.size, file.type);
  }
});

Demo: File Input Info

HTML

<div>
<input type='file' id='file-input' multiple style='margin-bottom:8px;'>
<pre id='file-info' style='background:#f1f5f9;padding:12px;border-radius:6px;min-height:60px;'></pre>
</div>

JavaScript

document.getElementById('file-input').addEventListener('change', function(e) {
const out = document.getElementById('file-info');
const files = e.target.files;

if (files.length === 0) {
out.textContent = 'No files selected';
return;
}

let info = 'Selected ' + files.length + ' file(s):\\n';
for (const file of files) {
const sizeKB = (file.size / 1024).toFixed(1);
const date = new Date(file.lastModified).toLocaleDateString();
info += '\\n  ' + file.name + '\\n' +
'  Size: ' + sizeKB + ' KB\\n' +
'  Type: ' + (file.type || 'unknown') + '\\n' +
'  Modified: ' + date + '\\n';
}
out.textContent = info;
});

Live Output Window

Reading Files with FileReader

FileReader reads the content asynchronously:

const reader = new FileReader();

reader.onload = function(e) {
  console.log(e.target.result); // the file contents
};

reader.onerror = function(e) {
  console.error('Error reading file');
};

reader.readAsText(file);   // as string
reader.readAsDataURL(file); // as base64 data URL
reader.readAsArrayBuffer(file); // as ArrayBuffer

Demo: FileReader Methods

HTML

<div>
<input type='file' id='reader-file' style='margin-bottom:8px;'>
<div style='display:flex;gap:8px;margin-bottom:8px;'>
<button id='read-text'>Read as Text</button>
<button id='read-dataurl'>Read as Data URL</button>
</div>
<pre id='reader-out' style='background:#f1f5f9;padding:12px;border-radius:6px;min-height:60px;word-break:break-all;'></pre>
</div>

JavaScript

const fileInput = document.getElementById('reader-file');
const out = document.getElementById('reader-out');

function readFile(method) {
const file = fileInput.files[0];
if (!file) {
out.textContent = 'Please select a file first';
return;
}

const reader = new FileReader();

reader.onload = function(e) {
const result = e.target.result;
if (method === 'text') {
out.textContent = 'Text content (' + result.length + ' chars):\\n' + result;
} else {
out.textContent = 'Data URL (' + result.length + ' chars):\\n' + result.substring(0, 200) + '...';
}
};

reader.onerror = function() {
out.textContent = 'Error reading file';
};

if (method === 'text') reader.readAsText(file);
else reader.readAsDataURL(file);

out.textContent = 'Reading file...';
}

document.getElementById('read-text').onclick = () => readFile('text');
document.getElementById('read-dataurl').onclick = () => readFile('dataurl');

Live Output Window

Drag and Drop Files

Files can also be obtained via drag and drop:

dropZone.addEventListener('dragover', function(e) {
  e.preventDefault();
});

dropZone.addEventListener('drop', function(e) {
  e.preventDefault();
  const files = e.dataTransfer.files;
  // process files
});

Demo: Drag & Drop Files

HTML

<style>
#drop-zone { width: 100%; height: 150px; border: 2px dashed #6366f1; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: #f1f5f9; transition: all 0.3s; }
#drop-zone.dragover { background: #eef2ff; border-color: #4f46e5; transform: scale(1.02); }
</style>
<div id='drop-zone'>Drop files here</div>
<pre id='drop-info' style='background:#f1f5f9;padding:12px;border-radius:6px;'></pre>

JavaScript

const zone = document.getElementById('drop-zone');
const out = document.getElementById('drop-info');

zone.addEventListener('dragover', function(e) {
e.preventDefault();
this.classList.add('dragover');
});

zone.addEventListener('dragleave', function() {
this.classList.remove('dragover');
});

zone.addEventListener('drop', function(e) {
e.preventDefault();
this.classList.remove('dragover');
const files = e.dataTransfer.files;

if (files.length === 0) {
out.textContent = 'No files dropped';
return;
}

let info = 'Dropped ' + files.length + ' file(s):\\n';
for (const file of files) {
info += '\\n  ' + file.name + ' (' + (file.size / 1024).toFixed(1) + ' KB)';
}
out.textContent = info;
});

Live Output Window

FileReader Events

Event	When
`loadstart`	Read starts
`progress`	During read (for large files)
`load`	Read complete
`error`	Read failed
`abort`	Read cancelled
`loadend`	Read finished (success or fail)

Reading Images as DataURL

Display a user-selected image:

const reader = new FileReader();
reader.onload = function(e) {
  img.src = e.target.result; // data URL
};
reader.readAsDataURL(file);

Key Takeaways

File extends Blob — has name, size, type, lastModified
Get files from <input type="file"> or drag-and-drop
FileReader reads files as text, data URL, or ArrayBuffer
FileReader is async — use onload / onerror callbacks
For images, use readAsDataURL() and set as img.src
Modern alternative: file.text(), file.arrayBuffer(), file.stream()
Always handle onerror — files can fail to read (corrupted, permissions)