title: File upload using jquery AJAX to REST
body: <p>I want to upload a file using jquery ajax. I have a REST application. This REST application is using token based authentication. On successful login it will create a token into database table. And this token is passed on every request after login. I have a filter which is checking whether the each request after login is having token or not and if request contains token then it is validated against the database entry.</p>
  
  <p>What I want is to call the REST url using Jquery AJAX call which should add auth key inside header.</p>
  
  <p>following is my code which is not working and inside filter it is failing.</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;head&gt;
    &lt;script src="jquery-1.9.1.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
   &lt;div id="progress"&gt;
   &lt;input type="file" id="file"&gt;
          &lt;input type=button name="btn" value="Upload" id="fileUpload"&gt;
  &lt;/div&gt;
  &lt;br/&gt;
  &lt;script&gt;
  $(document).on("click", "#fileUpload", function(event) {
      console.log($('#file').val());
      var filename = $("#file").val();
  
      jQuery.ajax({
          type : 'POST',
          beforeSend: function(xhr){xhr.setRequestHeader('pubKey', 'abcd');},
          url : "http://localhost:8080/restapp/somename/getContacts",
          dataType : "json",
          contentType : "application/json;charset=utf-8",
          success: function() { alert('Success!' ); },
          error: function() { alert('Hushhhhhhhhhhhh!' ); }
      });
  });
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Please let me know how to add data/key inside header. I searched on several blogs but nothing is working and filter is kicking out request every time.</p>