FileReader object

Find out what a FileReader object is and how to use it

ThisFileReaderThe object reads the contents of the file asynchronously.

It shows 4 reading methods that we can use to start the reading process:

  • readAsText()
  • readAsDataURL()
  • readAsArrayBuffer()
  • readAsBinaryString()

withabort()Method to stop any read operation.

Reading the file is asynchronous, and the object exposes some events that we can hook to track the progress of the operation:

  • onloadTriggered when the read ends successfully
  • onloadstartTriggered when starting to read
  • onprogressTriggered when reading is in progress
  • onloadendTriggered at the end of reading, successful or unsuccessful
  • onerrorTriggered when an error occurs
  • onabortTriggered when reading is aborted

After the read operation is complete,resultThe properties of FileReader contain the contents of the file.

ThiserrorThe attribute contains the error message (if an error occurs), andreadyStateContains operating status-0If no data is loaded,1Whether data is being loaded, and2If the loading is complete.

readAsText()

Load contentspotIn the text string.

In this example, we use that text and put it#contentThe internal HTML of the element:

//..file is available as a blob

const reader = new FileReader()

reader.onload = event => { const text = reader.result document.getElementById(‘content’).innerHTML = text }

reader.onerror = (e) => { console.error(e) }

reader.readAsText(file)

This is an example of reading the content of a text file when uploading using a text fileinputElement and print its content to the console:

<input type="file" allow="text/*" />
const input = document.querySelector('input')

input.addEventListener(‘change’, e => { const reader = new FileReader()

<span style="color:#a6e22e">reader</span>.<span style="color:#a6e22e">onload</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">event</span> =&gt; {
  <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">text</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">reader</span>.<span style="color:#a6e22e">result</span>
  <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">text</span>)
}

<span style="color:#a6e22e">reader</span>.<span style="color:#a6e22e">onerror</span> <span style="color:#f92672">=</span> (<span style="color:#a6e22e">e</span>) =&gt; {
  <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">error</span>(<span style="color:#a6e22e">e</span>)
}

<span style="color:#a6e22e">reader</span>.<span style="color:#a6e22e">readAsText</span>(<span style="color:#a6e22e">input</span>.<span style="color:#a6e22e">files</span>[<span style="color:#ae81ff">0</span>])

})

readAsDataURL()

Load the contents of the blob intoData URL.

//..file is available as a blob

const reader = new FileReader()

reader.onload = event => { const dataURL = event.target.result document.getElementById(‘image’).src = dataURL }

reader.readAsDataURL(file)

readAsArrayBuffer()

Load the contents of the blob intoArrayBuffer.

//..file is available as a blob

const reader = new FileReader()

reader.onload = event => { const buffer = reader.result const data = new Int32Array(buffer) //… }

reader.onerror = (e) => { console.error(e) }

reader.readAsArrayBuffer(file)

Download mine for freeJavaScript beginner's manual


More browser tutorials: