CSV-Datei von einer Eingabe in Angular

Question

Parsing Ich erstelle eine Webanwendung, die Uploads von .csv-Datei bietet.

Anstatt die ganze Datei auf meinen Server hochzuladen, dann alle Zeilen in einer Tabelle dank PHP hinzuzufügen, würde ich die Datei in Angular analysieren und geparste Zeilen hinzufügen (danke an Restangular). Auf diese Weise sollte ich in der Lage sein, einige "Fehler" vor dem Hochladen zu finden (oder nicht).

In einer Ansicht, ich habe eine einfache Datei-Eingabe erstellt, mit einer Richtlinie Datei (Quelle: http://angularjstutorial.blogspot.fr/2012/12/angularjs-with-input-file-directive.html) genannt

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

Die file Richtlinie:

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(); 
     }); 
    } 
    }; 
}); 

Auf diese Weise kann ich abrufen, wenn der Benutzer eine Datei auswählt. Leider bekomme ich nur den Dateinamen.

Ich möchte die csv in einer Zeichenfolge analysieren, die ich dank dieser Filter aufgespalten werden (Quelle: parsing CSV in Javascript and 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; 
    }; 
}); 

Wie kann ich die Daten in der CSV-Datei abgerufen werden zur Verfügung gestellt von die Eingabe anstelle des Dateinamens?

Vielen Dank im Voraus.

Answer 1

Ok, ich habe die Lösung gefunden, indem ich nach vorhandenen Modulen gesucht habe, um Dateien hochzuladen. Ich poste es einfach hier, wenn das jemanden interessiert.

Aus Sicht habe ich die Richtlinie geändert, um das Ereignis auszulösen:

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

Die Richtlinie ist nun:

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); 
    } 
    } 
}]); 

In der Steuerung (vergessen Sie nicht, $ Filter hinzufügen in der Steuerung, wenn Sie es verwenden möchten):

$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]); 
} 

Der Filter ist immer noch der gleiche (außer ich habe die ro verschoben ws-Array, um den Header meiner CSV-Dateien nicht zu importieren).