How can I send the contents of a file to my server?

Question

I'm trying to let users import an OPML file that I parse server (rails app) side. I'm having trouble as it seems that my server isn't getting the info (neither the success nor error functions run and even if I hardcode other data into the call, the call doesn't change).

Here's what I have embedded into the page:

<script>
function handleFileSelect(evt) {
      var files = evt.target.files; // FileList object

      // Loop through the FileList
      for (var i = 0, f; f = files[i]; i++) {

        var reader = new FileReader();

        // Closure to capture the file information.
        reader.onload = (function(theFile) {
          return function(e) {
            // Print the contents of the file
            var span = document.createElement('span');                    
            span.innerHTML = ['<p>',e.target.result,'</p>'].join('');
            document.getElementById('list').insertBefore(span, null);
          };

          $.ajax({
            type: 'GET',
            url: "/parse_opml",
            data: {file: f},
            success: function(details, response) {
              console.log('woo!');
            },
            error: function(data, response) {
              console.log('boooo');
            }
          });
        })(f);

        // Read in the file
        reader.readAsText(f);
      }
    }

    document.getElementById('the_o').addEventListener('change', handleFileSelect, false);
</script>

<input id="the_o" name="files[]" type="file">

Looking at chrome's network panel, I'm seeing the call: Request URL:blob:http%3A//localhost%3A3000/14e2be6b-059f-47f5-ba37-97eda06242b4 whose preview and response is the content of my .txt file. But like I said, the server never gets that text, so I'm puzzled.

Any help is greatly appreciated, thanks!

ANSWER

I ended up just using this: JavaScript: Upload file

Client code:

%form{:enctype => 'multipart/form-data', :action => '/parse_opml', :method => 'post'}
   %input{:type => 'file', :name => 'file', :id => 'the_o'}
   %input{:type => 'submit', :value => 'go'}

Server code:

f = File.open(params[:file].tempfile, 'r')
c = f.read

Works like a charm!

score 1 · Accepted Answer · edited May 23 '17 at 12:05

Javascript can't post uploaded files to the server as it is a limitation (for security reasons I assume).

Take a look at this other question regarding posting files posted through javascript: JavaScript: Upload file

The answer on that questions says you can only do it using flash, but there are also iframe alternatives for upload and post.

Take a look at this as well for an alternative solution: https://github.com/Widen/fine-uploader

score 0 · Answer 2 · answered Jul 28 '13 at 16:51

Your ajax request isn't event sent as you return from your onload function before it.
You can send files via ajax on up to date browsers using XHR2

reader.onload = (function(theFile) {
  var data = new FormData();
  data.append('file',theFile);
  $.ajax({
    type: 'POST',
    processData: false,
    contentType: false,
    url: "/parse_opml",
    data: data,
    success: function(details, response) {
      console.log('woo!');
    },
    error: function(data, response) {
      console.log('boooo');
    }
  });
  return function(e) {
    // Print the contents of the file
    var span = document.createElement('span');                    
    span.innerHTML = ['<p>',e.target.result,'</p>'].join('');
    document.getElementById('list').insertBefore(span, null);
  };
})(f);

How can I send the contents of a file to my server?

2 Answers2