Last Updated on March 4, 2026 by Laura Coronel
Modern web applications often need to work with files directly in the browser. Common use cases include previewing images before upload, reading text files for parsing, or processing binary data client-side before sending it to a server.
The FileReader API makes this possible by allowing JavaScript to read the contents of files selected by a user through an <input type="file"> element or other file-based interactions. FileReader works asynchronously, so large files can be processed without blocking the UI.
In this article, you’ll learn how the FileReader API works and how to use it to:
- Read text files
- Preview image files
- Work with binary data safely and efficiently
Contents
How the FileReader API Works
The FileReader API provides a way to read the contents of File and Blob objects. These objects are most commonly obtained from a file input element.
All FileReader operations are asynchronous. Instead of returning values directly, FileReader emits events when reading is complete or if an error occurs.
To get started, create a new FileReader instance:
const reader = new FileReader();
Reading Text Files
The readAsText() method reads the contents of a file and returns it as a string. This is useful for handling plain text files such as .txt, .csv, or .json.
Example: Displaying the Contents of a Text File
HTML
<input type="file" id="fileInput" />
<pre id="fileDisplayArea"></pre>
JavaScript
const fileInput = document.getElementById("fileInput");
const fileDisplayArea = document.getElementById("fileDisplayArea");
fileInput.addEventListener("change", () => {
const file = fileInput.files[0];
if (!file) return;
if (!file.type.startsWith("text/")) {
fileDisplayArea.textContent = "File not supported.";
return;
}
const reader = new FileReader();
reader.onload = () => {
fileDisplayArea.textContent = reader.result;
};
reader.onerror = () => {
fileDisplayArea.textContent = "Error reading file.";
};
reader.readAsText(file);
});
When the file finishes loading, its contents are available on reader.result.
Reading Image Files
To preview images in the browser, you can use the readAsDataURL() method. This reads the file and converts it into a Base64-encoded data URL that can be used as the src of an <img> element.
Example: Previewing an Image File
HTML
<input type="file" id="imageInput" />
<div id="imagePreview"></div>
JavaScript
const imageInput = document.getElementById("imageInput");
const imagePreview = document.getElementById("imagePreview");
imageInput.addEventListener("change", () => {
const file = imageInput.files[0];
if (!file) return;
if (!file.type.startsWith("image/")) {
imagePreview.textContent = "File not supported.";
return;
}
const reader = new FileReader();
reader.onload = () => {
imagePreview.innerHTML = "";
const img = document.createElement("img");
img.src = reader.result;
img.alt = "Image preview";
imagePreview.appendChild(img);
};
reader.readAsDataURL(file);
});
This approach works well for small to medium-sized images. For very large files, using URL.createObjectURL() may be more memory-efficient.
Working with Binary Data
For binary file processing, such as handling images, audio, or custom file formats, the recommended approach is readAsArrayBuffer().
const reader = new FileReader();
reader.onload = () => {
const buffer = reader.result;
// Process the ArrayBuffer
};
reader.readAsArrayBuffer(file);
An ArrayBuffer can be used with typed arrays or other APIs that expect raw binary data.
Aborting a Read Operation
If you need to stop reading a file—for example, when dealing with very large files—you can cancel the operation using abort().
reader.abort();
Error Handling and Edge Cases
Always assume file reading may fail due to:
- Permission issues
- Unsupported file types
- Corrupted files
- Interrupted reads
Listen for the error event and provide clear feedback to the user.
reader.onerror = () => {
console.error("FileReader error:", reader.error);
};
Security and Browser Limitations
For security reasons:
- Browsers only allow access to files explicitly selected by the user
- JavaScript cannot read arbitrary files from the user’s file system
- File contents are sandboxed to the current page
These restrictions protect user privacy and should be considered when designing file-based workflows.
Browser Support
The FileReader API is supported in all modern browsers. Rather than checking browser versions, use feature detection to ensure availability.
if (!window.FileReader) {
console.log("FileReader API is not supported in this browser.");
}
Summary
The FileReader API provides a reliable, browser-native way to read files directly on the client side. Whether you’re displaying text, previewing images, or processing binary data, FileReader enables responsive, interactive file handling without relying on server uploads.
By combining feature detection, proper error handling, and modern best practices, you can safely integrate file reading into your web applications while keeping the user experience fast and intuitive.
A very well written article. Your examples were simple enough to not distract from the technique you were demonstrating, but not so simple as to not be useful.
Your explanations were complete yet concise.
I love this kind of documentation!
Is it possible to read a local csv file directly from a folder (the same folder as the main html page) instead of the upload functionality?
Hi Peter,
Unfortunately not as you cannot directly access the user’s filesystem.
Matt
[readAsBinaryString|https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsBinaryString] was deprecated in the draft and never became part of the standard FileReader web API.
業界最高峰のブランドコピー 激安、コピーブランド、スーパーコピーブランド(N級品)通販専門店!ブランドコピー,コピーブランド,スーパーコピーブランド,ブランドコピー 激安,偽物ブランド、偽物のバッグ、腕時計、財布など激安で買える！全部のスーパーコピー販売品物のなかで私達のブランド激安が一番有名です http://www.msnbrand.com/brand-copy-IP-24.html
スーパーコピーブランド 代引き安心老舗当店は海外高品質のブランドコピー 代引き,スーパーコピー 代引き通販人気老舗です。2015新作 ルイヴィトン コピー代引き、シャネル コピー代引き、 http://www.ooobag.com/index.html
100%実物写真ですし、品質が完璧です!”スーパーコピーブランド財布激安 偽物財布激安コピー ルイヴィトン財布偽物,偽物財布コピーエルバーキンコピースーパーコピー財布ブランド財布コピーブランドコピー激安バレンシアガ スーパーコピー激安ロレックス スーパーコピー時計ブランド財布激安 偽物財布激安コピー ルイヴィトン財布偽物,偽物財布コピーブランド激安市場-jck35販売:ブランド財布コピー,激安ブランド,財布コピー,偽ブランド,偽 ブランド財布,偽物ブランド財布,ブランドコピー,ヴィトンコピー,ルイヴィトン財布偽物, シャネル財布コピー,グッチ財布コピー,エルメス財布偽物,D&G 財布コピー,ボッテガ 財布 .2013年新作スーパーコピーロレックス,スーパーコピーロレックス時計通販スーパー コピー品その他の世界一流ロレックススーパーコピー時計品を扱っています。 ホームページをクリックして商品をご覧下さい.ロレックスコピー,業界No.1人気スーパーコピーロレックス腕時計専門販売ロレックスコピー（ROLEXスーパーコピー）のロレックス レプリカ販売専門店です。すべての商品は品質2年無料保証です,ロレックス デイトジャスト 偽物,人気満点ロレックス コピーn級品新作大特集 http://www.eevance.com/index.html
ブランドコピーの専門店スーパーコピー豊富に揃えております、最も手頃ず価格だお気に入りの商品を購入。弊社フクショー(FUKUSHOW）ブランド腕時計、雑貨、小物最新作！エルメス バーキンスーパーコピー時計N品のみ取り扱っていまずのて、2年品質保証。エルメス食器,スーパーコピーブランド激安販売シャネル 財布スーパーコピー,スーパーコピーブランド 財布激安販売エルメス スーパーコピー,スーパーコピーブランド激安販売売スーパーコピーロレックス スーパーコピー,スーパーコピーROLEX激安販売IWC スーパーコピー,スーパーコピーIWC時計激安販売エルメス時計スーパーコピー,スーパーコピーhermes時計激安販売ボッテガ ヴェネタスーパーコピー,スーパーコピーブランド財布激安販売スーパーコピー時計スーパーコピーブランドバッグ時計コピー激安販売 http://www.newkakaku.net/guz1.htm
スーパーコピー腕時計,ロレックスコピー,ブライトリングコピー,ボーム&メルシエコピー時計コピー業界最高峰スーパーコピー時計通販専門！7年以上の販売実績を 持つ時計コピー老舗！時計コピーであれば何でも揃えられます コピー時計 時計スーパーコピー通販専門店！時計コピー時計販売通販！ コピー時計スーパー コピー等の 最高級のレプリカコピー時計を販売ロレックスコピー，ガガミラノコピー ，IWCコピー ，オメガコピー ，フェラーリコピー ，フランクミュラーコピー ，ベル&ロスコピー ，各種のブランドはコピーを表しますコピーを表して、時計をコピーして、スーパーコピーは代 金引換払いにして、スーパーはブランドをコピーして、スー パーは時計をコピーして代金引換払いにして、スーパーは時 計をコピーして、スーパーは腕時計をコピーして、ブランド はスーパーマーケットを表してコピーして、ブランドのスー パーマーケットはコピーして、ブランドはコピーを表して、 腕時計はコピーします ,ボーム&メルシエコピー時計コピー業界最高峰スーパーコピー時計通販専門！7年以上の販売実績を 持つ時計コピー老舗！時計コピーであれば何でも揃えられます コピー時計 時計スーパーコピー通販専門店！時計コピー時計販売通販！ コピー時計スーパー コピー等の 最高級のレプリカコピー時計を販売ロレックスコピー，ガガミラノコピー ，IWCコピー ，オメガコピー ，フェラーリコピー ，フランクミュラーコピー ，ベル&ロスコピー ，各種のブランドはコピーを表しますコピーを表して、時計をコピーして、スーパーコピーは代 金引換払いにして、スーパーはブランドをコピーして、スー パーは時計をコピーして代金引換払いにして、スーパーは時 計をコピーして、スーパーは腕時計をコピーして、ブランド はスーパーマーケットを表してコピーして、ブランドのスー パーマーケットはコピーして、ブランドはコピーを表して、 腕時計はコピーします http://www.wtobrand.com/he1.html
BVLGARI(バッグ?財布?小物)CHLOE(バッグ?財布、小物）偽物ブランド,激安,コピー?ルイヴィトンバッグ,偽物?ルイヴィトン財布,コピーバッグ,ブランドバッグ,偽物バッグ,偽物シャネルバッグ,偽物エルメスバッグ,偽物グッチバッグ,偽物財布,コピー財布,時計の專門店 http://www.msnbrand.com/brand-copy-IP-12.html
スーパーコピーブランド弊社は安心と信頼のスーパーコピーブランド (N級品)専門店です!全国送料無料!日本一流品質のスーパーコピー時計、ブランド財布コピー、ブランドバッグコピー新作最新入荷!ロレックススーパーコピー,ウブロ スーパーコピー,ブランド時計 コピー,ブランド スーパーコピー,コピーブランド 通販,スーパーコピー 財布その他の世界一流ブランドコピーを取り扱っています。商品は全て最高な材料と優れた技術で造られて、正規と比べて、品質が無差別です！人気時計コピー、N級ブランドコピーのお求めはぜひ当店へ。弊社は正規品と同等品質のブランドコピー品を低価でお客様に提供します
エルメス ボリードスーパーコピー.ブランド直営店.ブランド,エルメス激安通販,業界で最高な品質に挑戦します！”ブランドN級品ブランドコピー 代引き,スーパーコピー時計,ブランドN級品,楽天コピーブランド,,偽物ブラン日本最大級の最高のスーパーコピーブランド財布激安代引き販売店,スーパーコピー時計の激安老舗.！国内No.1時計コピー工房,アフターサービスも自ら製造したスーパーコピー時計なので、技術力でお客様に安心のサポー トをご提供させて頂きます。スーパーコピー 代引きN品をご 購入の方は、こちらへ.弊社は正規品と同等品質のコピー品を低価で お客様に提供します!すべての商品は品質2年無料保証です。100%実物写真ですし、品質が完璧です!”スーパーコピーブランド財布激安 偽物財布激安コピー ルイヴィトン財布偽物,偽物財布コピー http://www.brandiwc.com/brand-3-copy-0.html
スーパーコピーブランドショップ有名ブランド品の輸入業、卸売り業、インターネット小売販売N級,,S級 ヴィトン、シャネル、グッチ、財布、バッグ。 高級腕時計ROLEX 、OMEGA 、CARTIER 、 BVLGARI、是非ご覧下さい。2015超人気腕時計、LOUIS VUITTON新品の大量入荷!商品の数量は多い、品質はよい、価格は低い、現物写真！本当の意味でのハイレプがほしい方にお勧めです。経営方針: 品質を重視、納期も厳守、信用第一は当社の方針です。
スーパーコピー商品、ブランドコピ ー財布、偽物バッグコピー財布コピーN 級品、ブ ランドスーパーコピー商 品、グッチ財布コピー,ミュウミュウ 財布激安。ブランドスーパーコ ピー銀座、ランドスーパーコピー財布。ブラ ンドスーパーコピー代引き、ブランドスーパーコピー専門店、ご購入する度、ご安心とご満足の届けることを旨にしておりますよろしくお願いします ありがとうございます http://www.ooobag.com/index.html
スーパーは時計をコピーしますブランド偽物、偽物ブランド、ルイヴィトンコピー、 ロレックスコピー、シャネルコピー、グッチコピー、エルメスコピー、 ボッテガヴェネタコピー、 バーバリーコピー、ミュウミュウコピー、トリーバーチコピー、バレンシアガコピー、ディオールコピー、ブルガリコピー、ブラダコピー、 ドルチェ＆ガッバーナコピー、オメガコピー、フランク ミュラーコピー、gagaコピー。古驰拷贝, 靴/サンダル,サングラスコピー
エルバーキンコピーエルメスバーキン30コピーエルメス ボリード47,エルメス バッグ 名前,エルメス ネクタイ ピンク エルメス クラッチバッグ,エルメス バッグ コピー,エルメス バーキン コピー エルメス 財布 ダミエ オークション,エルメス ヨーロッパ,エルメス エールライン エルメス クラッチ激安通販、高い品質、送料無料。バーキン25コピー、バーキン30コピー、バーキン35コピー、バーキン40コピーなど世界中有名なブランドレプリカを格安で通販しております。N級品スーパーコピーブランドは ブランドスーパーコピー超N品エルメスバッグ,エルメス バーキン25 , バーキン30.バーキン35.バーキン40. エルメス(HERMES) ケリー http://www.bestevance.com/Hermes-1/index.htm
ブランドN級品ブランドコピー 代引き,スーパーコピー時計,ブランドN級品,楽天コピーブランド,,偽物ブラン日本最大級の最高のスーパーコピーブランド財布激安代引き販売店,スーパーコピー時計の激安老舗.！国内No.1時計コピー工房,アフターサービスも自ら製造したスーパーコピー時計なので、技術力でお客様に安心のサポー トをご提供させて頂きます。スーパーコピー 代引きN品をご 購入の方は、こちらへ.弊社は正規品と同等品質のコピー品を低価で お客様に提供します!すべての商品は品質2年無料保証です。
高品質2015シャネル スーパーコピー激安專門店弊社は海外大好評を博くシャネル コピー激安老舗です,2015高品質シャネル バッグ コピー,シャネル 靴 コピー,シャネル 財布 コピー品の品質はよくて、激安の大特価でご提供します。 http://www.gowatchs.com/brand-208.html
Hi there, іts fastidious piedce of writing οn tɦе topic ߋf media print, աе ɑll
be aware ߋf media іѕ a ɡreat source
oof data.
Ⲏere іѕ my blog dream аbout
aliens, http://www.humanrightsdefence.org/index.php/articles-sp-724795164/265-universal-declaration-Of-human-rights-english.html?name=Dann&email=danncrooks@aol.com&website=http://www.Rahasia-mimpi.web.id&address=WN&latitude=&longitude=&parent=0&task=commentSave&pageItemId=54&hitcount=0,
This doesn’t seem working in IE.
Any idea why?
Thank you.
Maybe because it is not HTML5 browser?
Dear,its upload .html extensions file as well.please verify it.
What if I want to read local .txt file directly without the choose file button, what should I do?
You cannot directly access the user’s filesystem. You can only read files that are explicitly passed to your application through an interactive element such as a file input or drag and drop area.
I get that you cant access the harddrive, but what about a relative path? as when you load an image? seems like there has to be a way to read a file relative to the javascript file “locally”?
Well the JavaScript file is on the server, so no problem to read a file relative to that. The point is that you can only access files on the user’s system (which is what we’re referring to here as “local”) if the user has specifically selected them – for obvious security reasons.
1: var reader = new FileReader();
2: reader.onload = function(e) {
3: var dataURL = reader.result;
4: }
5: reader.readAsDataURL(file);
Why doesn’t line 5 read: reader.readAsDataURL(dataURL) ??
If your not using dataURL why reference it at all?
If this method is changing the interpetation of the data I have already stored in dataURL can I call other methods after the fact?
eg.
var myBits = reader.result
reader.readAsDataURL(file);
doSomething with myBits
reader.readAsArrayBuffer(file);
doSomething different with myBits now that it has been transformed.
Just seems like a terrible notation to move the file into a variable, and then perform actions on the “file” instead of the variable instead. if file=myVar couldn’t you call readAs on either of them?
1: var reader = new FileReader();
2: reader.onload = function(e) {
3: var dataURL = reader.result;
4: }
5: reader.readAsDataURL(file);
This is very confusing. At line 3 what does the variable “dataUrl” hold? An arrayBuffer? or a base64?
Is reader.readAsDataURL a function? does it have a return value? Does line 5 change the value of file? or dataURL or both. and if so wot!
he variable dataURL holds base64 and reader.readAsDataURL() is a method that returns base64 of input filelist object blob
Hello everyone, it’s my first visit at this website, and piece of writing is really fruitful for me, keep up posting these types of posts.|
1. In Text reader html tag not closed
2. Use .innerHTML instead of .innerText
Sorry:
1. In Text reader text.html tag ‘PRE’ not closed
2. Use .innerHTML instead of .innerText
how can I preserve the File object across browser restarts? My scenario is that when the user picks the file, the browser is offline. At some later time, the user goes online and I want to read the previously picked file to upload it to a server.
This is a awesome feature in HTML5. But not support for IE9 🙁
I want to display raw image data (YUV, RGB…). I can read it from a file using filereader with readAsArrayBuffer() API. But how do I display it? I am using Javascript and HTML along with NaCL and I’m a newbie in this.
How can we pass this value back to server..I am trying to do this for any type of file but not able to capture the data in blob in controller. ANy help???
What are you using on the server-side? (Ruby, PHP, etc)
Some other docs that are pretty useful: http://www.javascripture.com/FileReader
Awesome! Thanks 🙂
thanks so much. let find moments to meditate, relax is play game with me. it’s great to play the tai game ban ca an xu in the gioi giai tri mobi and Forget tired after working hard learning