title: How to upload RecordRTC blob file to Rails paperclip in AJAX
body: <p>On the client side, the user uses <a href="https://webrtc-experiment.appspot.com/RecordRTC/" rel="nofollow">RecordRTC</a> to record a short video. When the user presses upload, I will get the video's <code>blob</code> data using <code>recorder.getBlob()</code>, and upload it to my server (using Rails and <a href="https://github.com/thoughtbot/paperclip" rel="nofollow">paperclip</a> to handle file upload).</p>
  
  <p>At first, I wanted to change the <code>&lt;input type='file'&gt;</code> field value to the <code>blob</code> data. It turns out that for security in browsers, I cannot change it using javascript.</p>
  
  <p>Then, I tried to use AJAX:</p>
  
  <pre><code>$("#ajax-submit").on("click", function() {
      var data = new FormData();
  
      data.append("record[video]", recorder.getBlob(), (new Date()).getTime() + ".webm");
  
      var oReq = new XMLHttpRequest();
      oReq.open("POST", "/records/");
      oReq.send(data);
      oReq.onload = function(oEvent) {
          if (oReq.status == 200) {
              console.log("Uploaded");
          } else {
              console.log("Error " + oReq.status + " occurred uploading your file.");
          }
      };
  });
  </code></pre>
  
  <p><strong>However, it does not work.</strong> On <code>log</code> file, I will get the following, which cannot be handled:</p>
  
  <pre><code>Processing by RecordsController#create as */*
  Parameters: {
    "video"=&gt;"data:video/webm;base64,GkXfo0AgQoaBAUL3gQFC8o..."
  }
  </code></pre>
  
  <p>If I submit normally using <code>form</code>, I will have parameters look like this:</p>
  
  <pre><code>Processing by RecordsController#create as HTML
  Parameters: {
      "video"=&gt;#&lt;ActionDispatch::Http::UploadedFile:0x3b476e0 @original_filename="testing.mp4", @content_type="video/mp4", @headers="Content-Disposition: form-data; name=\"record[video]\"; filename=\"testing.mp4\"\r\nContent-Type: video/mp4\r\n", @tempfile=#&lt;File:a_path&gt;&gt;
  }
  </code></pre>
  
  <p>How could I solve the problem?</p>
  
  <p>Many thanks.</p>