How to read csv file content in AngularJS?

Question

I want to read a csv file and get its content by using AngularJS and HTML5. I want to put the content of the csv file in $scope.

I have this code in my html

 <table align="center" >
            <tr class="borderless">
                <td>Choose .csv file</td>
                <td><input type="file" name="readCsvFile" id="readCsvFile" accept=".csv"> </td>
                <td><input type="button" value="Upload" ng-click="uploadCsvFile()"></td>
            </tr>
 </table>

score 46 · Accepted Answer · answered Oct 14 '14 at 06:35

46

with a custom directive:

app.directive('fileReader', function() {
  return {
    scope: {
      fileReader:"="
    },
    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.fileReader = contents;
              });
          };

          r.readAsText(files[0]);
        }
      });
    }
  };
});

http://plnkr.co/edit/eeQbR65oE8iljm7ueGhX?p=preview

answered Oct 14 '14 at 06:35

Marian Ban

8,158
1
32
45

2

As a side note, you can use `r.readAsDataURL(files[0]);` so you can later output that file to an – Daniel Estrada Feb 21 '16 at 08:10
the result does not include the newline character ??, how do I know if a new line ??. Otherwise it works well – maikelm Jul 14 '16 at 17:56
Can this be adapted to read csv files as JSON ? I don't see how FileReader can do this – Osama Salama Jul 15 '16 at 15:42
2

@OsamaSalama sure you can: scope.fileReader = JSON.parse(contents) – Marian Ban Jul 15 '16 at 16:46
@OsamaSalama if you are looking to parse .csv to JSON then I would recommend taking a look at the Papa Parse library. – JamesEddyEdwards Nov 23 '16 at 14:02
1

Hi MajoB,is there a chance to do it without using directives? – MMR Jan 21 '17 at 14:30
@nlr_p Do you use angular? – Marian Ban Jan 21 '17 at 14:33
@nlr_p Using directive is a good aproach for this, but you can let me know if manage it in a different way. – Marian Ban Jan 21 '17 at 14:48

How to read csv file content in AngularJS?

1 Answers1

Linked