angularjs multi upload file and parsing

Question

I make an interface with an multiple upload csv file ( done ).

This CSV files have to be loaded to the navigator client with a custom fileReader service who use $q (done) , then parsed with ngPapaParser (done) and displayed in the view with ngTable (done but not in the example to simplify).

This is a plunkr showing the error i have : http://plnkr.co/edit/YVvitZ2yfxjJw76n6t9F?p=preview

The problem is need to get the file name inside the fileReader.readAsText promise but i don't know how to get it.

controller('MainCtrl', function($scope, Papa,fileReader) {

  $scope.parsedResults = [];

   $scope.getFiles = function (files) {
      $scope.parsedResults = [];
      // Loop through the FileList and render image files as thumbnails.
      for (var i = 0, f; f = files[i]; i++) {
          console.log(f.name); // ok her 
          fileReader.readAsText(f, $scope).then(function(resultText) {
              Papa.parse(resultText, {
                  header: true,
                  //   worker: true,
                  skipEmptyLines: true,
                  complete: function(result) {
                      var cols= [];
                      for(var i in result.meta.fields){
                          cols.push({
                              field: result.meta.fields[i] , title: result.meta.fields[i].toLowerCase() , show: true
                          });
                      }
                      console.log(f.name); // undefined her in the callback
                      //I WANT THE FILENAME HER !!! 
                      var io = { 'filename': 'f.name unknow' ,'cols':cols ,'tableParams': result.data  } ;
                      $scope.parsedResults.push(io);
                  }
              });
          });
      }
  };
});

how to make the following function returning a promise and the file ?

var readAsText = function (file, scope) {
   var deferred = $q.defer();
   var reader = getReader(deferred, scope);
   reader.readAsText(file);
   // how to return an object her, or the deferred promise and the file ?
   return deferred.promise;
};

Can you show the code of the method getReader(deferred, scope) ? I guess it is this method which resolve the promise. — Eria
– Eria, Commented Jan 6, 2016 at 15:09
all the code is in the plunkr. i can paste it her but no reable — AlainIb
– AlainIb, Commented Jan 6, 2016 at 15:10

miensol · Accepted Answer · 2016-01-06 15:14:35Z

1

Try this:

var readAsText = function (file, scope) {
   var deferred = $q.defer();
   var reader = getReader(deferred, scope);
   reader.readAsText(file);
   // then will return another promise with content and file available
   return deferred.promise.then(function(result){
        return {
            content: result,
            file: file
        };
   });
};

You can use it then as follows:

readAsText(file, $scope).then(function(result){
    var content = result.content;
    var file = result.file;
    //...
})

edited Jan 6, 2016 at 15:14

answered Jan 6, 2016 at 15:09

miensol

41.9k9 gold badges127 silver badges116 bronze badges

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

2 Comments

AlainIb Over a year ago

how to use it then please ?

AlainIb Over a year ago

it work! i will update and valid your solution after some try

Collectives™ on Stack Overflow

angularjs multi upload file and parsing

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related