L'analyse d'un fichier CSV fourni par une entrée dans Angulaire

Je suis de la création d'une webapp qui dispose d'uploads .fichier csv.

Au lieu de télécharger l'ensemble du dossier sur mon serveur, puis en ajoutant toutes les lignes dans un tableau grâce à PHP, je voudrais analyser le fichier Angulaire, puis ajouter analysé lignes (merci à Restangular). De cette façon, je devrais être en mesure de récupérer quelques "erreurs" avant de les télécharger (ou pas).

En vue, j'ai créé un simple fichier d'entrée, avec une directive appelée fichier (source : http://angularjstutorial.blogspot.fr/2012/12/angularjs-with-input-file-directive.html)

<input type="file" data-file="param.file" />

La filedirective :

app.directive('file', function(){
  return {
    scope: {
      file: '='
    },
    link: function(scope, el, attrs){
      el.bind('change', function(event){
        var files = event.target.files;
        var file = files[0];
        scope.file = file ? file.name : undefined;
        scope.$apply();
      });
    }
  };
});

De cette façon, je peux les récupérer lorsque l'utilisateur choisit un fichier. Malheureusement, je reçois uniquement le nom de fichier.

Je voudrais analyser le csv dans une chaîne, à qui je vais partager grâce à ce filtre (source : l'analyse CSV en Javascript et AngularJS) :

app.filter('csvToObj',function(){
  return function(input){
    var rows=input.split('\n');
    var obj=[];
    angular.forEach(rows,function(val){
      var o=val.split(';');
      obj.push({
        designation:o[1],
        ...
        km:o[11]
      });
    });
    return obj;
  };
});

Comment puis-je récupérer les données dans le fichier csv fourni par l'entrée à la place du nom de fichier ?

Merci d'avance.

OriginalL'auteur aknorw | 2015-01-21

  1. 14

    Ok, j'ai trouvé la solution en cherchant sur les modules existants de téléchargement de fichiers. Je viens de le poster ici si c'est ce qui intéresse quelqu'un.

    Dans la vue, j'ai changé la directive de déclencher l'événement :

    <input type="file" file-change="handler($event,files)" ng-model="MyFiles" />

    La directive est maintenant :

    app.directive('fileChange',['$parse', function($parse){
  return{
    require:'ngModel',
    restrict:'A',
    link:function($scope,element,attrs,ngModel){
      var attrHandler=$parse(attrs['fileChange']);
      var handler=function(e){
        $scope.$apply(function(){
          attrHandler($scope,{$event:e,files:e.target.files});
        });
      };
      element[0].addEventListener('change',handler,false);
    }
  }
}]);

    Dans le contrôleur (n'oubliez pas d'ajouter $filtre dans le contrôleur, si vous voulez l'utiliser) :

    $scope.MyFiles=[];

$scope.handler=function(e,files){
    var reader=new FileReader();
    reader.onload=function(e){
        var string=reader.result;
        var obj=$filter('csvToObj')(string);
        //do what you want with obj !
    }
    reader.readAsText(files[0]);
}

    Le filtre est toujours le même (sauf que j'ai changé les lignes de la matrice de ne pas importer de l'en-tête de mes fichiers csv).

    Qu'est-ce que FileReader ici? Pourriez-vous expliquer cela?
    FileReader est une API HTML5 ... lire fichiers.
    M'a aidé plus d'une fois. Veuillez également écrire le bon csvToObj filtre, qui permet à tout le monde

    OriginalL'auteur aknorw