Create fileReader directive:
<input type="file" data-file-reader-directive="fileContent" accept=".csv" />
Directive to get csv data from the file:
app.directive('fileReaderDirective', function() {
return {
restrict: "A",
scope: {
fileReaderDirective: "=",
},
link: function(scope, element) {
$(element).on('change', function(changeEvent) {
var files = changeEvent.target.files;
if (files.length) {
var r = new FileReader();
r.onload = function(e) {
var contents = e.target.result;
scope.$apply(function() {
scope.fileReaderDirective = contents;
});
};
r.readAsText(files[0]);
}
});
}
};
});
Create a factory to convert csv data to json data
app.factory('readFileData', function() {
return {
processData: function(csv_data) {
var record = csv_data.split(/\r\n|\n/);
var headers = record[0].split(',');
var lines = [];
var json = {};
for (var i = 0; i < record.length; i++) {
var data = record[i].split(',');
if (data.length == headers.length) {
var tarr = [];
for (var j = 0; j < headers.length; j++) {
tarr.push(data[j]);
}
lines.push(tarr);
}
}
for (var k = 0; k < lines.length; ++k){
json[k] = lines[k];
}
return json;
}
};
});
check out the working example : https://plnkr.co/edit/ml29G85knZpWWNdG8TeT?p=preview