Angular, trying to read a file before uploading it to a server and process it

Question

I have a ng-drop area which allows user to upload STL formated files to server. Before these files are send to server, I am trying to open and generate thumbnail with three.js library.

First I create a 'local' copy, ie. make FileReader to read uploaded file in browser:

    //File-upload related
    $scope.$watch('download.files', function () {
        if ($scope.download.files != null) {
            for(var i=0;i<$scope.download.files.length;i++) {
                var reader = new FileReader();
                //var objData;
                var file = $scope.download.files[i];

                reader.onload = (function(theFile) {
                    return function(e) {
                        for (var x=0;x<$scope.filesInUploadList.length;x++){
                            if (file.name == $scope.filesInUploadList[x].file.name) {
                                $scope.$apply(function() {
                                    $scope.filesInUploadList[x].data = e.target.result;                             
                                });
                            }
                        }
                    };
                })($scope.download.files[i]);

                reader.readAsText($scope.download.files[i]);

                $scope.filesInUploadList.push( {
                    modelId: '',
                    file: $scope.download.files[i],
                    volume: 0,
                    boundingBox: [0,0,0,0],
                    data: 99,
                });
            }

/*TODO: Continue to upload when thumbnail is done
            if ($scope.download.files != null) {
                $scope.upload($scope.download.files);
            }
*/
        }
    });

And in html I have following angular directive:

display data for debug: {{f.data}}
<div id="webglContainer" ng-webgl width="100" height="100"ng-attr-stlFile="{{f.data}}"></div>   

and ng-webgl directive: 'use strict';

angular.module('myApp')
  .directive('ngWebgl', function () {
    return {
      restrict: 'A',
      scope: {
        'width': '=',
        'height': '=',
        'stlData': '=stlFile',
      },
      link: function postLink(scope, element, attrs) {

    var camera, scene, renderer, light,
      data = scope.stlData,
      contW = element[0].clientWidth,
      contH = scope.height;

    scope.$watch('scope.stlData', function (value){
            console.log("scope.stlData, after:"+value);
        });

    scope.init = function () {

      // Camera
      camera = new THREE.PerspectiveCamera( 20, contW / contH, 1, 10000 );
      camera.position.z = 100;

      // Scene
      scene = new THREE.Scene();

      // Ligthing
      light = new THREE.DirectionalLight( 0xffffff );
      light.position.set( 0, 0, 1 );
      scene.add( light );

      // ASCII file
      var material = new THREE.MeshPhongMaterial( { color: 0xff5533, 
          specular: 0x111111, shininess: 200 } );
      var mesh = new THREE.Mesh( data, material );

      mesh.position.set( 0, - 0.25, 0.6 );
      mesh.rotation.set( 0, - Math.PI / 2, 0 );
      mesh.scale.set( 0.5, 0.5, 0.5 );

      mesh.castShadow = true;
      mesh.receiveShadow = true;

      scene.add( mesh );

      renderer = new THREE.WebGLRenderer( { antialias: true } );
      renderer.setClearColor( 0xffffff );
      renderer.setSize( contW, contH );

      // element is provided by the angular directive
      element[0].appendChild( renderer.domElement );
    };

    // -----------------------------------
    // Draw and Animate
    // -----------------------------------
    scope.animate = function () {
      requestAnimationFrame( scope.animate );
      scope.render();
    };

    scope.render = function () {
      camera.lookAt( scene.position );
      renderer.render( scene, camera );
    };

    // Begin
    scope.init();
    scope.animate();
  }
};

});

My problem is with scopes and sending data to directive after filereader is done. I have failed to set up binding to that {{f.data}} in directive attribute (shows data in line above with 'display data for debug' so when filereader result is available my directive shoudl get data and show 3d model in viewer.

I have tried to understand directive scopes and ways how directives are created and attributes binded to them but seems that I am missing some bits of knowledge what real Angular gurus have.

Answer 1

I have found several flaws in my code and now system seems to work. First I had wrong markup in html, I use scope parameter in width and height (those are defined as int's, before those were strings) and as a stl-file markup is stl-file="f.data".

I am on my way to become a Angular Jedi Master!