title: Loading binary file with webpack and converting to Blob
body: <p>I have a <code>&lt;input id=file-chooser" type="file"/&gt;</code> control that I allow a user to upload a .zip file with and I then hand that off to <a href="https://stuk.github.io/jszip/" rel="nofollow noreferrer">jszip</a> for further processing.</p>
  
  <p>I am trying to test this by loading a local .zip test file in webpack, converting to a Blob, and then manually firing the <code>change</code> event with the content of the file.</p>
  
  <p>jszip is complaining that the zip file is not valid and I think I am messing something up on the conversion.</p>
  
  <p>I've tried:</p>
  
  <pre><code>// Load file at webpack compilation time
  const zipFileRaw = require("raw-loader!../test.zip");
  
  // Convert to ArrayBuffer
  const bytes = new Uint8Array(zipFileRaw.length);
  for (var i = 0; i &lt; zipFileRaw.length; ++i) {
    bytes[i] = zipFileRaw.charCodeAt(i);
  }
  
  // Construct a 'change' event with file Blob
  const file = new Blob(bytes, { type: "application/zip" });
  file.name = "test.zip";
  const event = { type: "change", target: { files: [file] } };
  
  // Fire the event
  $("#file-chooser").trigger(event);
  </code></pre>
  
  <p>Firing the event works and my event handler is called.  In the event handler for the <code>change</code> event I call <code>jsZip.loadAsync(file)</code> and I get:</p>
  
  <blockquote>
    <p>Error: Can't find end of central directory : is this a zip file ?</p>
  </blockquote>