Below is the AngularJS code I have written to read a local file.
var files = document.getElementById("file");
files.addEventListener("change", handleFile, false);
function handleFile(event) {
SpinnerService.upload(); // Display loading spinner
var file = event.target.files[0];
var reader = new FileReader();
$timeout(function() {
scope.readyState = reader.readyState;
});
reader.onload = function(event) {
// Read the contents of the file
};
reader.readAsArrayBuffer(file);
scope.$watch("readyState", function(newVal) {
if (newVal == 2) {
SpinnerService.hide(); // Hide loading spinner
}
})
}
During the file reading process, the value of reader.readyState changes from 0 to 1 and then to 2. More information about this can be found at https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readyState.
The code successfully reads the file content. However, the $watch on readyState does not seem to work as expected. Is there an alternative approach to monitor the changes in readyState? Your assistance is appreciated. Thank you!