title: How to add custom header in ajax request using plain javascript (NOT JQUERY)?
body: <p>Please could someone advise on how to add a header to an AJAX request using plain javascript?  I am trying to upload a video file to a server and want to let it know the file size and type of the file I am sending.
   I found someone solutions but this involved jQUERY which is not what I am after. </p>
  
  <p>For example:</p>
  
  <pre><code>  Content-Length: 339108
    Content-Type: video/mp4
  </code></pre>
  
  <p>My AJAX request:</p>
  
  <pre><code> var startUpload = function(){
          var formdata = new FormData();
          formdata.append('requestUpload', 'uploadTicket');
  
          var xmlhttp = new XMLHttpRequest;
  
          xmlhttp.onreadystatechange = function(){
              if(xmlhttp.readyState == 4 &amp;&amp; xmlhttp.status == 200){
                  var response = xmlhttp.responseText;
  
                  if(response == '1'){
  
                      document.getElementById('UploadBox').innerHTML = '&lt;div id="upWrap"&gt;&lt;input type="file" id="vidInput"&gt;&lt;button id="submitFile" onclick=""&gt;Upload Video&lt;button&gt;&lt;/div&gt;';
  
                  }
              }
          }
          xmlhttp.open('POST', 'myFile.php');
          xmlhttp.send(formdata);
      }
  </code></pre>