Issue
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.
Solution
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 By - przno
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.