title: How do I send a Blob of type octet/stream to server using AJAX?
body: <p>I have unsuccessfully been trying to send a Blob file (which is an <a href="https://en.wikipedia.org/wiki/Wavefront_.obj_file" rel="nofollow">.OBJ</a> file type) to the server using AJAX. I want to be able to do this without using an input file field. I am making an online avatar creator, so the Blob file to be sent to the server is generated from the character that is initially imported into my Three.js scene. I have been able to send a Blob file that contains a String to the server and save this to a specified folder (which I am aiming to do with the Blob .OBJ file). I have tried converting the Blob to Base64 before sending it in a POST request, but this did not work. The size of the file that I am trying to send is 3MB.</p>
  
  <p>Here is my JavaScript code for creating the Blob file and sending it to my PHP script on the server using AJAX.</p>
  
  <pre><code>//Create OBJ
  var exporter = new THREE.OBJExporter();
  var result = exporter.parse(child);
  
  //Generate file to send to server
  var formData = new FormData();
  var characterBlob = new Blob([result], {type: "octet/stream"});
  
  var reader = new FileReader();
  reader.readAsDataURL(characterBlob);
  reader.onloadend = function() {
  formData.append('file', reader.result);
  
      $.ajax({
      url: "ExecuteMaya.php", // Url to which the request is send
      type: "POST",             // Type of request to be send, called as method
      data: formData, // Data sent to server, a set of key/value pairs (i.e. form fields and values)
      processData:false,        // To send DOMDocument or non processed data file it is set to false
      contentType: false,       // The content type used when sending data to the server
      }).done(function(data) {
          console.log(data);
      });
  }
  </code></pre>
  
  <p>Here is my PHP script for handling the sent file.</p>
  
  <pre><code>&lt;?php
  
  $sourcePath = $_FILES['file']['tmp_name'];       // Storing source path of the file in a variable
  $targetPath = "upload/".$_FILES['file']['name']; // Target path where file is to be stored
  move_uploaded_file($sourcePath,$targetPath) ;    // Moving Uploaded file
  echo "&lt;span id='success'&gt;Image Uploaded Successfully...!!&lt;/span&gt;&lt;br/&gt;";
  echo "&lt;br/&gt;&lt;b&gt;File Name:&lt;/b&gt; " . $_FILES["file"]["name"] . "&lt;br&gt;";
  echo "&lt;b&gt;Type:&lt;/b&gt; " . $_FILES["file"]["type"] . "&lt;br&gt;";
  echo "&lt;b&gt;Size:&lt;/b&gt; " . ($_FILES["file"]["size"] / 1024) . " kB&lt;br&gt;";
  echo "&lt;b&gt;Temp file:&lt;/b&gt; " . $_FILES["file"]["tmp_name"] . "&lt;br&gt;";
  
  ?&gt;
  </code></pre>
  
  <p>Any help would be much appreciated!</p>
  
  <p>UPDATE 1: The <code>var result = exporter.parse(child);</code> is a String and whenever I print this variable to the console it takes a few minutes to load. Would the size of this String be a possible issue with trying to send it to the server?</p>
  
  <p>UPDATE 2: This gets printed to the console after the PHP script has been executed, which makes me think that either nothing is being sent over to the server or the sent data is not being handled correctly by the PHP script.</p>
  
  <p>Image Uploaded Successfully...!!<br/><br/><b>File Name:</b> <br><b>Type:</b> <br><b>Size:</b> 0 kB<br><b>Temp file:</b> <br></p>
  
  <p>UPDATE 3: Here is a link to the file that I am trying to send.
  <a href="http://www.filehosting.org/file/details/578744/CleanFemaleOBJ.obj" rel="nofollow">http://www.filehosting.org/file/details/578744/CleanFemaleOBJ.obj</a></p>
  
  <p>You can view this file in TextEdit/NotePad to view the String that I want to send. It is pretty much a text file with the .obj extension to convert it to that format so it can be opened in Maya.</p>
  
  <p>UPDATE 4: I have now altered my JavaScript code so that the Blob is appended to the FormData and not the result of reader.readAsDataURL(characterBlob).</p>
  
  <pre><code>//Create OBJ
  var exporter = new THREE.OBJExporter();
  var result = exporter.parse(child);
  
  //Generate file to send to server
  var formData = new FormData();
  var characterBlob = new Blob([result], {type: "octet/stream"});
  formData.append('file', result);                            
  
      $.ajax({
      url: "ExecuteMaya.php", // Url to which the request is send
      type: "POST", // Type of request to be send, called as method
      data: formData, // Data sent to server, a set of key/value pairs (i.e. form fields and values)
      processData: false, // To send DOMDocument or non processed data file it is set to false
      }).done(function(data) {
          console.log(data);
      });
  </code></pre>