title: How to read the content of an uploaded file in angular?
body: <p>I am currently working on an angular project in which the user uploads a file by dropping it into a designated area. Then, I want to send the file content to the backend to store it in mongo. Unfortunately, what it gets send is the name of the file, but the content does not. I haver tried to read the content of the file using FileReader() but I was not able to get it to work. Any ideas of what would be the best/easiest way to read the content of the file?</p>
  
  <p>I would like to be able to store the content into a variable rather than just doing console.log(). I think it will make it easier for the post but all suggestions are welcome. Thank you!</p>
  
  <p>Note: to make this shorter I have only added this bit of code where I think the logic would be done but I can add more things if it helps.</p>
  
  <pre><code>    @HostListener('drop', ['$event']) public ondrop(evt) {
      evt.preventDefault();
      evt.stopPropagation();
      this.background = '#f5fcff'
      this.opacity = '1'
      let files = evt.dataTransfer.files;
  
      // I tried to read the file content here trying to do reader.readAsText(files); but it did not work
  
      if (files.length &gt; 0) {
        this.onFileDropped.emit(files)
      }
  
    }
  </code></pre>