title: Reading input file with JSInterop from Blazor
body: <p>Hello i am trying to load a file from local storage using the <code>FileReader</code> api.
  I have tested the <code>js</code> method directly in a <code>HTML</code> page and it works.</p>
  
  <p>However when calling it from <code>Blazor</code> - <code>JSRuntime</code> i get the following error :</p>
  
  <pre><code>'Cannot read property 'files' of undefined
  TypeError: Cannot read property 'files' of undefined
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>window.methods = {
      fileChange:function(event) {
          var file = event.target.files[0];
          console.log("file retrieved");
          var reader = new FileReader();
          reader.onload = function (event) {
              console.log(reader.result);
          };
          reader.readAsText(file); 
      }
  }
  </code></pre>
  
  <p><strong>CSHTML</strong></p>
  
  <pre><code>&lt;input  type="file" onchange="@(async(x)=&gt;await onFileChange(x))"/&gt;
  public async Task onFileChange(UIChangeEventArgs ev) {
              var str=await JSRuntime.Current.InvokeAsync&lt;string&gt;("methods.fileChange", ev.Value);
          }
  </code></pre>
  
  <p><strong>P.S</strong>
  So according to the error , the method is called successfully but it receives an undefined.Do i need to do a cast or something when i use <code>InvokeAsync</code> ?</p>
  
  <p>I need to get the content of the file.</p>