Angular $scope conflict with file input type

Question

I was trying to convert a file to byte array using angularjs. its working fine, also add the byte code and filename to an array($scope.FileAttachments), and when it'll be added to $scope.FileAttachments client side ng-repet will display the attached file. file conversion done, file added to $scope.FileAttachments also done, but ng-repeat not working at right time. interesting issue is that, when any other event happened inside the view, ng-repeat working nicely.

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

You're adding new elements to $scope.FileAttachments outside the scope of your controller, you'll have to call $scope.$apply() to update the scope. — Titus
– Titus, Commented May 9, 2017 at 6:04
Thanks @Titus you made my day, just working fine. put your answer with code i'll mark it as helpful answer. — sebu
– sebu, Commented May 9, 2017 at 6:09
Possible duplicate of Angular JS views not updating properly — Titus
– Titus, Commented May 9, 2017 at 6:13

sebu · Accepted Answer · 2017-05-09 06:16:12Z

0

Yes, got it, need to use $scope.$apply() when outside the scope of your controller.

$scope.file1Upload=function() {
      var files = document.getElementById("File1").files;
      fileData = new Blob([files[0]]);
      var promise = new Promise(getBuffer);
      promise.then(function (data) {
          $scope.$apply(function () {
              $scope.FileAttachments.push({
                   "AttachmentDescription": files[0].name.toString()
                   "FileValue": data.toString()
               });
          });
      }).catch(function (err) {
           console.log('Error: ', err);
      });
 }

answered May 9, 2017 at 6:16

sebu

2,9641 gold badge33 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular $scope conflict with file input type

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related