HTML5 Paperclip multiple file upload and attach -- uploading view

edit.html.erb

<% title "Edit Road Record" %>

<%= render 'form' %>
<!-- This is just a scaffold-produced form for the RoadRecord; nothing special-->

<p>
  <%= link_to "Show", @road_record %> |
  <%= link_to "View All", road_records_path %>
</p>
<div id='attachments_loader'>
  <p>Upload Additional Attachments</p>
  <input id="the-file" name="file" type="file" size='100' value='Select Files' multiple />
  <button onclick="runit()">Send The Files</button>
  <p><span id='calc'>0</span>%</p>
  <p id = 'resp'>'Waiting . . .'</p>
</div>
<script type='text/javascript'>
  function runit() {
    var fileInput = document.getElementById('the-file');
    console.log(fileInput.files); // A FileList with all selected files
    var i = 0;
    for (i = 0; i < fileInput.files.length; i++) {
      var the_target = fileInput.files[i];
      showIt(the_target);
      sendIt(the_target);
    }
  };

  function showIt(file){
    alert("The file is " + file.fileName + '::' + file.size + '--' + file.type);
  }

  function sendIt(file) {
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '../road_records/add_appended_asset/', true);
    xhr.setRequestHeader("X-File-Name", file.name);
    xhr.setRequestHeader("Content-Type", file.type);
    var qp = new Object();
    qp.file_size = file.size;
    qp.file_mime = file.type;
    qp.attached_to_id = <%= @road_record.id%>
    qp.attachment_model_name = 'appended_asset';
    qp.attachment_model_id = null;
    qp.file_model = 'asset';
    qp.updated_by = 'unknown'
    qp.created_by = 'unknown'
    xhr.setRequestHeader('X-Query-Params', JSON.stringify(qp))
    xhr.upload.addEventListener('progress', onprogressHandler, false);
    xhr.addEventListener("load", uploadComplete, false);
    xhr.send(file); 
  };

  function onprogressHandler(event) {
    var percent = Math.round(event.loaded / event.total * 100);
    var calc_display = document.getElementById('calc');
    calc_display.innerHTML = percent;
  };

  function uploadComplete(evt){
    var calc_display = document.getElementById('calc');
    calc_display.innerHTML = '100';
    var resp_display = document.getElementById('resp');
    resp_display.innerHTML = "/road_records/add_appended_asset/ sent this response --" + evt.target.responseText;
  }
</script>