d3 with using angular drag and drop directive

Question

I'm trying to implement drag and drop angular directive to my application that to render d3 collapsible tree. Now I'm using basic Input method that user can load file from local machine. And with "Input" everything works and renders fine, but I've got requirements that I have to implement drop zone, so I found in internet this example , cause the example has been provided for images, I've a little modified it for json files:

<div id="left-input" class="dropzone" file-dropzone="[application/json]" file="json" file-name="applicationFileName" data-max-file-size="3">
<span>Drop Image Here</span></div>
<span class="dropzone">{{applicationFileName}}</span>

and set it up for d3 library but how I can see thru console.log my variable is underfined, so if I'm checking variable in directive:

   reader = new FileReader();
                reader.onload = function(evt) {
                    scope.file = evt.target.result;
                    console.log(scope.file);
                    if (checkSize(size) && isTypeValid(type)) {
                        return scope.$apply(function() {
                            scope.file = evt.target.result;
                            if (angular.isString(scope.fileName)) {
                                return scope.fileName = name;
                            }
                        });
                    }
                };

so console.log(scope.file) return me exactly my variable

but when I'm using this variable in controller inside of d3 function:

    $scope.load_left = function () {
// Get JSON data
        console.log('['+ $scope.file +']');
        root = $scope.file;
       treeData = JSON.parse(root);
        //d3.json($scope.result, function (error, treeData) { 

it returns me undefined

so where did I mistake?

this my dnd directive:

app.directive('fileDropzone', function() {
return {
    restrict: '',
    scope: {
        file: '=',
        fileName: '='
    },
    link: function(scope, element, attrs) {
        var checkSize, isTypeValid, processDragOverOrEnter, validMimeTypes;
        processDragOverOrEnter = function(event) {
            if (event != null) {
                event.preventDefault();
            }
            event.dataTransfer.effectAllowed = 'copy';
            return false;
        };
        validMimeTypes = attrs.fileDropzone;
        checkSize = function(size) {
            var _ref;
            if (((_ref = attrs.maxFileSize) === (void 0) || _ref === '') || (size / 1024) / 1024 < attrs.maxFileSize) {
                return true;
            } else {
                alert("File must be smaller than " + attrs.maxFileSize + " MB");
                return false;
            }
        };
        isTypeValid = function(type) {
            if ((validMimeTypes === (void 0) || validMimeTypes === '') || validMimeTypes.indexOf(type) > -1) {
                return true;
            } else {
                alert("Invalid file type.  File must be one of following types " + validMimeTypes);
                return false;
            }
        };
        element.bind('dragover', processDragOverOrEnter);
        element.bind('dragenter', processDragOverOrEnter);
        return element.bind('drop', function(event) {
            var file, name, reader, size, type;
            if (event != null) {
                event.preventDefault();
            }
            reader = new FileReader();
            reader.onload = function(evt) {
                scope.file = evt.target.result;
                console.log(scope.file);
                if (checkSize(size) && isTypeValid(type)) {
                    return scope.$apply(function() {
                        scope.file = evt.target.result;
                        if (angular.isString(scope.fileName)) {
                            return scope.fileName = name;
                        }
                    });
                }
            };
            console.log('['+ scope.file +']');
            file = event.dataTransfer.files[0];
            //console.log('['+ file +']');
            name = file.name;
            type = file.type;
            size = file.size;
            reader.readAsText(file);
            //reader.readAsDataURL(file);
            return false;
            });
        }
    };
});

and thru this function I'm rendering my d3 tree

   $scope.load_left = function () {

// Get JSON data

        console.log('['+ $scope.file +']');

        root = $scope.file;

        treeData = JSON.parse(root);

        //d3.json($scope.result, function (error, treeData) {

Also I'm providing code with my old Input method

<div style="display: flex">
<input type="file" id="left-input"/>
<button class="btn btn-info" ng-click="load_left()">Load It</button>
</div>


$scope.leftWindow = function (e) {
        var file = e.target.files[0];
        if (!file) {
            return;
        }
        var reader = new FileReader();
        reader.onload = function (e) {
            var leftcontent = e.target.result;
            displayLeftContents(leftcontent);
        };
        reader.readAsText(file);
    };
    function displayLeftContents(leftcontent) {
        $scope.leftContent = JSON.parse(leftcontent);
        $scope.$apply();
    }

   document.getElementById('left-input')
        .addEventListener('change', $scope.leftWindow, false);





$scope.load_left = function () {

    // Get JSON data

            root = JSON.stringify($scope.leftContent);

            //console.log('['+ root +']');

            treeData = JSON.parse(root);

            //console.log(treeData);

            //d3.json($scope.result, function (error, treeData) {

Answer 1

Just want to post how I've resolved this problem, may be somebody will need it.

so I'have added on more directive for reading files and then set up the variable to d3 function inside controller, so the full code looks like:

app.directive('fileDropzone', function() {
    return {
        restrict: '',
        scope: {
            file: '=',
            fileName: '='
        },
        link: function(scope, element, attrs) {
            var checkSize, isTypeValid, processDragOverOrEnter, validMimeTypes;
            processDragOverOrEnter = function(event) {
                if (event != null) {
                    event.preventDefault();
                }
                event.dataTransfer.effectAllowed = 'copy';
                return false;
            };
            validMimeTypes = attrs.fileDropzone;
            checkSize = function(size) {
                var _ref;
                if (((_ref = attrs.maxFileSize) === (void 0) || _ref === '') || (size / 1024) / 1024 < attrs.maxFileSize) {
                    return true;
                } else {
                    alert("File must be smaller than " + attrs.maxFileSize + " MB");
                    return false;
                }
            };
            isTypeValid = function(type) {
                if ((validMimeTypes === (void 0) || validMimeTypes === '') || validMimeTypes.indexOf(type) > -1) {
                    return true;
                } else {
                    alert("Invalid file type.  File must be one of following types " + validMimeTypes);
                    return false;
                }
            };
            element.bind('dragover', processDragOverOrEnter);
            element.bind('dragenter', processDragOverOrEnter);
            //console.log(element.bind('dragenter', processDragOverOrEnter));
            return element.bind('drop', function(event) {
                var file, name, reader, size, type;
                if (event != null) {
                    event.preventDefault();
                }
                reader = new FileReader();
                reader.onload = function(evt) {
                    scope.$apply(function() {
                        $LeftfileDrop = evt.target.result;
                        $RightfileDrop = evt.target.result;
                    });
                    if (checkSize(size) && isTypeValid(type)) {
                        return scope.$apply(function() {
                            scope.file = evt.target.result;
                            if (angular.isString(scope.fileName)) {
                                return scope.fileName = name;
                            }
                        });
                    }
                };
                file = event.dataTransfer.files[0];
                console.log(file);
                name = file.name;
                type = file.type;
                size = file.size;
                reader.readAsText(file);
                return false;
            });
        }
    };
});

app.directive('onReadFile', function ($parse) {
    return {
        restrict: 'A',
        scope: false,
        link: function(scope, element, attrs) {
            var fn = $parse(attrs.onReadFile);

            element.on('change', function(onChangeEvent) {
                var reader = new FileReader();

                reader.onload = function(onLoadEvent) {
                    scope.$apply(function() {
                        fn(scope, {$fileContent:onLoadEvent.target.result});
                    });
                };
                reader.readAsText((onChangeEvent.srcElement || onChangeEvent.target).files[0]);
            });
        }
    };
});

and d3 function:

// Get JSON data
        root = $LeftfileDrop;

        treeData = JSON.parse(root);
        //d3.json($scope.result, function (error, treeData) {