In this article I will explain with an example, how to read CSV File using AngularJS and HTML5 File API.
The CSV file (Comma separated Text file) will be selected in HTML FileUpload element and will be read using HTML5 FileReader API.
The read data will be parsed into a JSON Array which will be later used to populate a HTML Table using ng-repeat directive in AngularJS.
Read CSV File using AngularJS and display its data in HTML Table
The below HTML Markup consists of an HTML DIV to which ng-app and ng-controller AngularJS directives have been assigned.
The following AngularJS App makes use of ngFileUpload module.
The HTML DIV consists of an HTML Table which will be populated from JSON array using ng-repeat directive, a FileUpload element and a Button.
Selecting the File
The HTML FileUpload element has been assigned the ngf-select directive so that when files are selected in the HTML FileUpload element, it makes call to the SelectFile function inside the AngularJS controller.
Inside the SelectFile function, the selected File is assigned to the SelectedFile variable.
Reading the CSV File and display data in HTML Table
When the Upload Button is clicked, the Upload function is called.
Inside the Upload function, first a check is performed to verify whether the file is a valid CSV or a text file. Then a check is performed to make sure whether the browser supports HTML5 File API.
The read data is split into Rows and a loop is executed over the Rows and the data from each Row is stored into a JSON object and it is added to an Array.
Finally, the generated JSON Array is assigned to the Customers scope variable which ultimately populates the HTML Table using ng-repeat directive.
Note: Inside the onload event handler of HTML5 FileReader, the scope is not available and hence $.apply function is used to apply the scope.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/danialfarid-angular-file-upload/12.2.13/ng-file-upload.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', ['ngFileUpload'])
app.controller('MyController', function ($scope, $window) {
$scope.SelectFile = function (file) {
$scope.SelectedFile = file;
};
$scope.Upload = function () {
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/;
if (regex.test($scope.SelectedFile.name.toLowerCase())) {
if (typeof (FileReader) != "undefined") {
var reader = new FileReader();
reader.onload = function (e) {
var customers = new Array();
var rows = e.target.result.split("\r\n");
for (var i = 0; i < rows.length; i++) {
var cells = rows[i].split(",");
if (cells.length > 1) {
var customer = {};
customer.CustomerId = cells[0];
customer.Name = cells[1];
customer.Country = cells[2];
customers.push(customer);
$scope.$apply(function () {
$scope.Customers = customers;
$scope.IsVisible = true;
});
}
}
}
reader.readAsText($scope.SelectedFile);
} else {
$window.alert("This browser does not support HTML5.");
}
} else {
$window.alert("Please upload a valid CSV file.");
}
}
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
<input type="file" ngf-select="SelectFile($file)" />
<input type="button" value="Upload" ng-click="Upload()" />
<hr />
<table id="tblCustomers" cellpadding="0" cellspacing="0" ng-show="IsVisible">
<tr>
<th>Customer Id</th>
<th>Name</th>
<th>Country</th>
</tr>
<tbody ng-repeat="m in Customers">
<tr>
<td>{{m.CustomerId}}</td>
<td>{{m.Name}}</td>
<td>{{m.Country}}</td>
</tr>
</tbody>
</table>
</div>
Screenshots
Contents of the CSV file placed on user’s folder
![Read CSV File using AngularJS and HTML5 File API]()
The CSV file being displayed in browser as HTML Table
![Read CSV File using AngularJS and HTML5 File API]()
Browser Compatibility
The above code has been tested in the following browsers only in versions that support HTML5.
![Internet Explorer]()
![FireFox]()
![Chrome]()
![Safari]()
![Opera]()
* All browser logos displayed above are property of their respective owners.
Downloads
