title: Passing client files to webassembly from the front-end
body: <p>I'm looking to pass user-submitted data to a c++ function which I've compiled to wasm. The data is a file which the user submits on the front end via an input tag, like so:</p>
  
  <pre><code>&lt;input type="file" onChange={this.handleFile.bind(this)} /&gt;
  </code></pre>
  
  <p>The onChange callback currently looks like this:</p>
  
  <pre><code>handleFile(e){
      const file = e.currentTarget.files[0];
      const reader = new FileReader();
      reader.onloadend = evt =&gt; {
          window.Module.readFile(evt.target.result);
      }
      reader.readAsArrayBuffer(file);
  }
  </code></pre>
  
  <p>Finally, the .cpp file containing the readFile function looks like this:</p>
  
  <pre><code>void readFile(const std::string &amp; rawString){
    std::vector&lt;uint8_t&gt; data(rawString.begin(), rawString.end());
    //...
  }
  
  EMSCRIPTEN_BINDINGS(my_module) {
    emscripten::function("readFile", &amp;readFile);
  }
  </code></pre>
  
  <p>I've spend my afternoon reading various docs so I'm aware that I'm supposed to allocate memory for these files on the heap and then pass a ptr from js to readFile instead of passing all of the data. My problem is that I just don't really understand how all of that is supposed to work. Could someone explain?</p>