title: How to post blob and string with XMLHttpRequest javascript and PHP
body: <p>I'm trying to post an audio blob and a string to my server with javascript XMLHttpRequest.  The server code is PHP.  I can manage to post the string, but the blob is not going through:</p>
  
  <p>Javascript:</p>
  
  <pre><code>var formData = new FormData();
  formData.append("string", words);
  formData.append("blobData", clipBlob);
  
  var xmlhttp = new XMLHttpRequest();
  var url = "https://www.website.com/file.php";
  xmlhttp.responseType = 'json';
  xmlhttp.open("POST", url, true);
  
  xmlhttp.onload = function () {
  console.log(xmlhttp.response[0]);
  console.log(xmlhttp.response[1]);
  
  };     
  xmlhttp.send(formData);
  </code></pre>
  
  <p>PHP:</p>
  
  <pre><code>$sentence = $_POST["string"];
  $blob = $_POST["blobData"];
  
  file_put_contents("clip.wav",$blob);
  $aud = 'clip.wav';
  $audData = base64_encode(file_get_contents($aud));
  $src = 'data:audio/wav;base64,'.$audData;
  
  echo json_encode(array($sentence,$src));
  </code></pre>
  
  <p>The $sentence variable echos back to my html page, but the $src doesn't.  In fact, the wav file is empty because the blob info isn't being recognized.</p>
  
  <p>EDIT:
  I changed the PHP for the blob to this and it worked:</p>
  
  <pre><code>// get the temporary name that PHP gave to the uploaded file
  $tmp_filename=$_FILES["blobData"]["tmp_name"];
  // rename the temporary file (because PHP deletes the file as soon as it's done with it)
  rename($tmp_filename,"clip.wav");
  </code></pre>
  
  <p><a href="https://stackoverflow.com/a/16616519/3080392">https://stackoverflow.com/a/16616519/3080392</a></p>