xmlhttprequest POST method in rails

Question

In the web, I'm building local file drag and drop upload to the server with the ruby on rails, dragging and drop a file working fine, but how to get the dragged file content in the controller with the drop event? I'm getting the file with event.datatransfer, send file through Javascript with XMLHttpRequest.

  function handleDrop(event)
  {
    preventDef(event)

    var dt = event.dataTransfer;
    var files = dt.files;

    for(var i = 0; i < files.length;i++)
    {

      http_request = new XMLHttpRequest();
      var boundaryString = 'the_boundery--';
      var boundary = '--' + boundaryString;
      var requestbody = boundary + '\n'

        + 'Content-Disposition: form-data; name="thefilename"' + '\n'
        + '\n'
        + files[i].fileName + '\n'
        + '\n'
        + boundary + '\n'
        + 'Content-Disposition: form-data; name="thefile"; filename="'
        + files[i].fileName + '"' + '\n'
        + 'Content-Type: application/octet-stream' + '\n'
        + '\n'+files[i].path
        +'\n'+ files[i].getAsBinary()
        + '\n'
        + boundary;


      var preview = document.getElementById("preview");

      preview.src = files[i].getAsDataURL();

      var queryString="";

       queryString="filename="+files[i].fileName+'&'+"file_to_upload=="+files[i].getAsBinary();

      var actionUrl="/shortening/dr";
      http_request.open('POST',actionUrl,true);
      http_request.setRequestHeader("Content-type", "multipart/form-data; \
            boundary=\"" + boundaryString + "\"");
      http_request.setRequestHeader("Connection", "close");
      http_request.setRequestHeader("Content-length", requestbody.length);
      http_request.sendAsBinary(requestbody);
    }
  }

using this script calling the url and send the file through sendAsBinary method Post method not calling the controller with the respective action

How to get the requestbody in the controller ?

Any idea?

Answer 1

First off, use some kind of javascript library to do AJAX and pretty much everything else. I'd suggest jQuery (http://jquery.com/)

Unfortunatelly no browser supports file uploads through XmlHttpRequest. Read sometime ago something about Firefox supporting it, but that would be restricting and I'm not even sure that really works.

You could make an iframe and with the drop event, set the file field inside the iframe and then submit the iframe.