I have been attempting to convert a file into a byte array using AngularJS. The conversion process is successful and I am able to add the byte code and filename to an array ($scope.FileAttachments). However, there seems to be an issue with ng-repeat not working at the right time when trying to display the attached file. It's interesting to note that ng-repeat works fine when any other event occurs within the view.
HTML Code
<input id="File1" ng-model="File1" onchange="angular.element(this).scope().file1Upload()" type="file" />
<table class="table table-striped table-bordered table-list">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody id="tblAttachments">
<tr ng-repeat="item in FileAttachments track by $index">
<td>{{item.AttachmentDescription}}</td>
</tr>
</tbody>
</table>
AngularJS Controller's Code
$scope.FileAttachments = [];
var fileData;
function getBuffer(resolve) {
var reader = new FileReader();
reader.readAsArrayBuffer(fileData);
reader.onload = function () {
var arrayBuffer = reader.result
var bytes = new Uint8Array(arrayBuffer);
resolve(bytes);
}
}
$scope.file1Upload=function() {
var files = document.getElementById("File1").files;
fileData = new Blob([files[0]]);
var promise = new Promise(getBuffer);
promise.then(function (data) {
$scope.FileAttachments.push({
"AttachmentDescription": files[0].name.toString(),
"FileValue": data.toString()
});
}).catch(function (err) {
console.log('Error: ', err);
});
}