Error upload txt angularJS directive

1

JS

    myapp.controller(function($scope){
  $scope.msg="Hola"
  $scope.$watch('file',function(file){
    console.log('arguments', file);
  })
});

myapp.directive("fileinput", function(){
    return{
        scope : {
            fileinput : "=",
            filepreview: "="
        },
        link:function(scope,element,attrs){
            element.bind("change", function(changeEvent){
                scope.fileinput = changeEvent.target.files[0];
                var reader = new new FileReader();
                reader.onload = function(loadEvent){
                    scope.$apply(function(){
                        scope.filepreview = loadEvent.target.result;
                    });
                }
                reader.readAsDataURL(scope.fileinput);
            });
        }
    };
});

HTML

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#/">
         <!-- <img alt="Brand" src="..."> --> accueil
      </a>
    </div>
  </div>
</nav>
<input type="file" fileinput="file" filepreview="filepreview" />
<p> {{ msg }} </p>

<p> {{ filepreview }} </p>
<div id="3d-graph"></div>

I get the following error

angular.js:14800 Error: [$controller:ctrlreg] http://errors.angularjs.org/1.6.9/$controller/ctrlreg?p0=controllerAutomate
    at angular.js:88
    at angular.js:11049
    at Object.link (angular-route.min.js:7)
    at angular.js:1383
    at va (angular.js:10619)
    at p (angular.js:10008)
    at f (angular.js:9248)
    at angular.js:9113
    at angular.js:9504
    at d (angular.js:9291) "<ng-view class="ng-scope">"
    
asked by Ernesto Emmanuel Yah Lopez 09.03.2018 в 11:07
source

1 answer

2

To read the data of a file obtained by a <input type="file" ...> you need a FileReader I give you a basic example:

let div=document.getElementById('datos');
function handleFileSelect(evt) {
    let files = evt.target.files; // FileList object
    let file=files[0];
    let fr= new FileReader();
    fr.onload = function(event) {
    
      div.innerHTML =event.target.result
    };
    fr.readAsText(file);
  }

  document.getElementById('file').addEventListener('change', handleFileSelect, false);
<input type="file" id="file" name="file"  />

<div id="datos" />
    
answered by 09.03.2018 в 12:12