File API
The File API reads files selected by the user. Use FileReader to read contents as text, data URL, or ArrayBuffer.
HTML
Intermediate
4 min read
File API
Example
<input type="file" id="fileInput" accept="image/*">
<img id="preview" style="max-width:200px;">
<script>
document.getElementById("fileInput").addEventListener("change", function() {
const file = this.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = e => {
document.getElementById("preview").src = e.target.result;
};
reader.readAsDataURL(file);
});
</script> Pro Tip
Check file.type and file.size before reading to validate the selection.