Using pako to compress a file, then use an HTML form to upload it

Question

I'm trying to use pako.js with a php form for uploading files.

Here's what I want to happen:

1) User selects file via button 2) File is compressed on client side 3) Compressed file is uploaded to server

Here's what I have so far, which does not work. I get an exception when I try to set the value of element inputfilebutton to the compressed file.

The HTML:

<div class="submit-row">
<form enctype="multipart/form-data" action="upload_file_text.php" method="post" class="form-group">
        <div class="submit-column">
                <br>
                <input name="ip_uploaded" type="file"  class="inputfilebutton"/>
                <br>
                <button type="submit" class = "submit_class" name="ip_submit" >Analyze</button><span> 

The JavaScript:

  $(document).ready(function() {



     // compress input file before it is uploaded to server
    $('.form-group').submit(function() {
          var file = $('.ip_uploaded').val();
          var compressed_file = pako.deflate(file);
      $('.ip_uploaded').val(compressed_file);
          // replace file with compressed file on form
    });
 });