Reading CSV File With Javascript and HTML5 File API

Software Developer/Architect Mostly working with Django/Python

How to read a file via browser ?

The unique constraint was how can I read the CSV file in browser.

HTML5 finally provides a standard way to interact with local files, via the File API

We are going to use FileReader

First, let’s check if the browser support FileReader API

function handleFiles(files) { // Check for the various File API support. if (window.FileReader) { // FileReader are supported. } else { alert('FileReader are not supported in this browser.'); } }

How to read a file via browser ?

To select a file we’re going to use a simple html <input type="file">

We just call handleFile to make JavaScript returns the list of selected File objects but we are going to use only one.

<script type="text/javascript" src="static/js/read-csv.js"></script> <input type="file" id="csvFileInput" onchange="handleFiles(this.files)" accept=".csv">

##Reading the File

After we’ve obtained a File reference, we instantiate a FileReader object to read its contents into memory. When the load finishes, the reader’s onload event is fired and its result attribute can be used to access the file data.

FileReader includes four options for reading a file, asynchronously:

FileReader.readAsBinaryString(Blob|File) – The result property will contain the file/blob’s data as a binary string. Every byte is represented by an integer in the range [0..255].

FileReader.readAsText(Blob|File, opt_encoding) – The result property will contain the file/blob’s data as a text string. By default the string is decoded as ‘UTF-8’. Use the optional encoding parameter can specify a different format.

FileReader.readAsDataURL(Blob|File) – The result property will contain the file/blob’s data encoded as a data URL.

FileReader.readAsArrayBuffer(Blob|File) – The result property will contain the file/blob’s data as an ArrayBuffer object.

For our example, we want to read a CSV file, so we can read it as text. And perfom data processing after in processData(csv) function.

That’s it.

Resources

Source code for this article.

Reading CSV File With Javascript and HTML5 File API

Comments

More from this blog

Django-Syzygy: Safe Zero-Downtime Database Migrations

Understanding Apache Kafka: A Beginner's Guide to Partitions, Consumers, and Migrations

Zero Down Time DB migrations with Django

🏗️ Building Beautiful, Responsive Django Forms with Tailwind and Widget Tweaks

Leveraging HTMX for Dynamic UI in Django Projects

How to read a file via browser ?

How to read a file via browser ?

Resources

Command Palette

Comments

More from this blog

How to read a file via browser ?

How to read a file via browser ?

Resources