FileReader not loading file properly using AngularJS

Question

I'm trying to load a csv file into AngularJS so I can do some manipulation on the contents. It is not quite working as I want it to. To test if it is loading properly, I am loading it into a textarea to view the contents.

When I load the file, it says it is loaded properly but the onload() event doesn't seem to be firing until I load a second CSV file, in which case the FIRST file is displayed in the textarea.

HTML:

<div>
  <input ng-model="csv"
            onchange="angular.element(this).scope().fileChanged()"
            type="file" accept=".csv" id="fileInput"/>
</div>
<br/>
<div>
  <textarea ng-model="csvFile" readonly="true" style="width:99%; height:500px" disabled></textarea>
</div>

JS:

$scope.fileChanged = function() {

  $scope.$apply(function() {
      var csvFileInput = document.getElementById('fileInput');
      var reader = new FileReader();
      var csvFile = csvFileInput.files[0];
      reader.onload = function(e) {
          $scope.csvFile = reader.result;
      };
      reader.readAsText(csvFile);
  });
};

And when I put this into JSFiddle, the file doesn't appear in the textarea at all. I'm new with JSFiddle so I don't know why that is happening.

Any help at all would be appreciated.

Can you try the following: swap lines $scope.$apply(function() and reader.onload = function(e) { and now move var reader = new FileReader(); before reader.onload and reader.readAsText(csvFile); after reader.onload block — przno
– przno, Commented Oct 2, 2014 at 18:49
@przno Yes! That worked. If you want to write that into an answer I will upvote and accept it. Also if you could maybe give a short explanation of why that works I would really appreciate it. :) — WalkerDev
– WalkerDev, Commented Oct 2, 2014 at 19:01
Side note #1: onchange="angular.element(this).scope().fileChanged()" is not proper Angular way, you should use ng-change, like ng-change="fileChanged()" — przno
– przno, Commented Oct 2, 2014 at 19:24

przno · Accepted Answer · 2014-10-02 19:21:55Z

19

Reordering some lines of your code, hope the comments are explanatory enough

$scope.fileChanged = function() {

  // define reader
  var reader = new FileReader();

  // A handler for the load event (just defining it, not executing it right now)
  reader.onload = function(e) {
      $scope.$apply(function() {
          $scope.csvFile = reader.result;
      });
  };

  // get <input> element and the selected file 
  var csvFileInput = document.getElementById('fileInput');    
  var csvFile = csvFileInput.files[0];

  // use reader to read the selected file
  // when read operation is successfully finished the load event is triggered
  // and handled by our reader.onload function
  reader.readAsText(csvFile);
};

Reference: FileReader at MDN

answered Oct 2, 2014 at 19:21

przno

3,5145 gold badges33 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

raghavsood33 Over a year ago

It now worked because of $scope.$apply(function() {$scope.csvFile = reader.result;});

Andy B Over a year ago

just what i was looking for!

slugmandrew Over a year ago

By far the simplest and nicest solution to this problem I've seen. :thumbsup

Nathan Tuggy · Accepted Answer · 2015-04-04 19:38:47Z

2

This is just a minor improvement in HTML:

<input type="file" onchange="angular.element(this).scope().file_changed(this)"/>
<textarea cols="75" rows="15">{{ dataFile }}</textarea>

and controller:

.controller('MyCtrl', ['$scope', function($scope) {
    var vm = $scope;

    vm.file_changed = function(element){
        var dataFile = element.files[0];
        var reader = new FileReader();
        reader.onload = function(e){
            vm.$apply(function(){
                vm.dataFile = reader.result;
            });
        };
        reader.readAsText(dataFile);
    };
}]);

Ref

edited Apr 4, 2015 at 19:38

Nathan Tuggy

2,23727 gold badges33 silver badges38 bronze badges

answered Apr 4, 2015 at 4:32

Jorge Cortes

765 bronze badges

5 Comments

Nathan Tuggy Over a year ago

If this is based on the accepted answer, you should add a link as attribution. There's no need to include "thanks" or similar; that's what upvotes are for, once you get some more rep.

Jorge Cortes Over a year ago

how can I add a link if I do not get any rep yet? I want to add this plnkr.co/edit/v65J4T?p=preview

Nathan Tuggy Over a year ago

Generally those with less than 10 rep can add up to two links per post, as I understand it. Anyway, there you go. Please edit again to make sure I've understood your meaning correctly.

Jorge Cortes Over a year ago

ok got it, but the code that I put, are you going to delete it?

Nathan Tuggy Over a year ago

Me? No. CC-BY-SA allows copying and modifying as long as you credit the author.

young-ceo · Accepted Answer · 2022-11-24 04:59:23Z

1

If you don't want to use $scope.$apply(), you can use $timeout:

const fileReader = new FileReader();
            
fileReader.onload = (event) => {
    this.$timeout(() => {
        // Logic goes here...
    }, 0);
};

...

answered Nov 24, 2022 at 4:59

young-ceo

5,5347 gold badges38 silver badges41 bronze badges

Collectives™ on Stack Overflow

FileReader not loading file properly using AngularJS

3 Answers 3

3 Comments

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related