Read txt file

Asked

Viewed 1,898 times

2

I am creating a web application and need to read a txt file that will be provided by the user. The code I’m using to perform the reading is not working and I can’t find anywhere else a way to do the reading.

// Código dentro do controller
$scope.imprimir = function () {
  lerArquivoTxt.carregarArquivo();
}

// Código dentro do service
function _carregarArquivoTxt() {
  var arquivoSelecionado = document.getElementById('arquivoPastas');
  var divSaida = document.getElementById('textoLido');
  var fileExtension = /text.*/;
  var arquivoLeitura = arquivoSelecionado.files[0];
  var fileReader = new FileReader();
  fileReader.readAsText(arquivoLeitura);
  divSaida.innerText = 'resultado: ' + fileReader.result;
}
<div class="col-sm-6 form-group" id="arquivo">
<div class="lbltitulo" for="Numero">Selecione o arquivo base para criar as pastas do projeto:</div>
<div class="tbpdd16">
  <input  type="file" 
          id="arquivoPastas"
          class="hideBtn btn btn-warning">
</div>

<div class="">
  <input  type="text" 
          id="txtfiletoread" 
          class="form-control"
          placeholder="Pasta / sub pasta"
          ng-model="pasta.pasta">
</div>
<div id="textoLido"></div>

The idea is that the user selects a file through the input file, the controller calls the _load File() function of the service and this function read and return all the read file. I need help with the code that reads the txt file.

angularjs txt

  • It has how to put all the code! mainly of Angular

  • You saw the example and then it served you?

  • I haven’t had time to test the proposed solution.

  • OK!!! Thiago ...

  • Virgilio Novic, the code you posted works if I create a new project and add the code reads the file and assigns the read text inside the div perfectly. However, applying this code to the project I’m creating doesn’t work. What I’d like to do is call this file read function through the service, assign the read content to a variable and then work with that variable and then display the read content in a table.

  • The problem of working in the service or any part of your code is a factor called in the world of computer adaptation, you have a functional example of code, you have not posted your complete angular code just excerpt, is either an answer to a solution that we do not know as has already been said, for the lack of code, or a code ready for its solution, post its angular code in full and point out where it wants it to work and how it works, ie edit your question and put it like it should be.

  • ... Conti: it is also worth remembering that the directive created updates the $scope.text which is an object with the field value that can and should be used in the best possible way. It was done so by the logic of selected the file .txt and right away show the result, but, reaffirming missing data in your question and editing would be the best way to point out what the answer would be.

  • I was able to make the code work, the problem was that I was assigning the Reader.result to an array, and not to an object like you showed in the code.

  • Okay that’s good when you can work it out, if the answer suits you

Show 4 more comments

1 answer

2


To load text from a file .txt with create a directive that when changing the input file will display the text content in a div, example:

var app = angular.module("app", []);
app.controller("ctrl", function($scope) {
  $scope.text = {
    value: 'Esperando ...'
  };  
});
app.directive("fileTxt", function() {
  return {
    require: "ngModel",
    scope: true,
    link: function(scope, elem, attrs, ngModel) {
      elem.on("change", function(e) {
        var reader = new FileReader();
        reader.onload = (function(reader) {
          return function() {
            scope.$apply(function() {
              scope.text.value = reader.result;            
            });        
            return reader.result;
          }
        })(reader);
        reader.readAsText(elem[0].files[0]);
      });      
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.0/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <input type="file" file-txt ng-model="fileItem" name="fileTxt">
  <br />
  <br />
  <div>{{text.value}}</div>  
  
</div>

Don’t forget to put in your input file the directive file-txt as follows:

 <input type="file" file-txt ng-model="fileItem" name="fileTxt">

References

Browser other questions tagged angularjs txt

You are not signed in. Login or sign up in order to post.