Submitting a form containing a file field via AJAX (jQuery / Node.js)

Question

I have a form with a single file field:

<form id="myForm" action="/processFile" method="post" enctype="multipart/form-data">
  <input type="file" name="uploadFile">
</form>

And I want to submit the form via AJAX (using jQuery on the client-side and Node.JS on the server side).

This is what I tried first on the client-side in jQuery (after looking at questions like this one Submit form via AJAX in jQuery):

submitButton.on('click', function(ev) {
  $.ajax({
    type: "GET",
    url: $('#myForm').action
    data: { form: $('#myForm').seralize() }
  }).done(function(res) {
    $('#targetDiv').html(res);
  });
});

Sadly, this didn't work because the .seralize() method doesn't work for file inputs.

So I decided that actually posting the form was the best route because it handles the asynchronous messiness of uploading the file to the server. So I tried this:

submitButton.on('click', function(ev) {
  $('#myForm').submit(function(err) {
    $.ajax({
      type: "GET",
      url: $('#myForm').action
      data: { form: $('#myForm').seralize() }
    }).done(function(res) {
      $('#targetDiv').html(res);
    });
  });
});

That is, (1) actually submitting the form, and then (2) making my ajax call in the callback of the form submission.

Sadly, this also doesn't work because submitting the form expects the entire page to reload based on the response from "/processFile".

What I want is (1) to submit the file input as simply as possible through AJAX, and (2) use the response of the URL to inject some partial HTML. It seems like you could hack around this using some iFrame trickery (like this http://www.jainaewen.com/files/javascript/jquery/iframe-post-form.html) but is there a cleaner way that I'm not seeing?

possible duplicate of [can i upload a file to server by socket.io or node.js](http://stackoverflow.com/questions/5973825/can-i-upload-a-file-to-server-by-socket-io-or-node-js) — Ram, Apr 07 '13 at 07:26
The only way to upload a file using ajax is via [FormData](https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/FormData), for browsers that doesn't have it the iframe trick is used to simulate an ajax file upload. — Musa, Apr 07 '13 at 07:29
@Musa `FormData` is not required to upload files using XHR/ajax. You can simply pass a `File` or `Blob` into the `send(...)` method on an instance of `XMLHttpRequest`. — Ray Nicholus, Apr 10 '13 at 17:13
@RayNicholus let me correct myself, The only way to upload a file using ajax and multipart/form-data is via [`FormData‌`](https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/FormData). With passing a file of blob you can't handle them as you would a regular form post. — Musa, Apr 10 '13 at 17:34

score 2 · Answer 1 · answered Apr 07 '13 at 09:37

If the browser you are using supports HTML5 you could use the new XMLHttpRequest object which allows you to achieve that. Your code might look like that:

submitButton.on('click', function(ev) {
    var form = $('form')[0];
    var fd = new FormData(form);
    var xhr = new XMLHttpRequest();
    xhr.open(form.method, form.action, true);
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            // handle success case
        }
    };
    xhr.send(fd);
    return false;
});

If your client browsers do not yet support HTML5 or you don't have control over them you could use a file upload plugin such as Uploadify, jQuery.form, FineUploader, ... which will test the capabilities of the browser and use the most appropriate technique.

really great thought - thanks, hadn't considered that. Unfortunately for my app HTML5 is a no-go. As for the other plugins I will look into them. At first glance it seems like the iframe option is probably the simplest to implement, although definitely not the best performing. — Mike Monteiro, Apr 07 '13 at 20:18

score 1 · Accepted Answer · answered Apr 07 '13 at 21:50

I ended up just using the iframe trickery via the plugin here: http://www.jainaewen.com/files/javascript/jquery/iframe-post-form.html

Here's what my code looks like:

The form:

<form id="myForm" action="/processFile" method="post" enctype="multipart/form-data">
  <input type="file" name="uploadFile">
  <input type="submit" id="mySubmitButton" style="display: none;">
</form>
...
<button id="continueButton">Continue</button>

Note that for uninteresting reasons I wanted a button that had to reside OUTSIDE the form to do the submitting.

The JS:

$('#continueButton').on('click', function(ev) {
  // I click the hidden submit inside the form
  $('#mySubmitButton').click();
});

$('#myForm').iframePostForm ({
  json : false  // my server response is straight HTML
  , post : function() {
    // initiation of waiting sequence
    return true; // returning false aborts the submit
  }
  , complete : function(res) {
    $('#targetDiv').html(res); // I stick the response in the target div
  }
});

One thing that tripped me up is that the way this plugin is implemented, just calling

$('#myForm').submit();

Inside the onclick of the continueButton does NOT work. Firing form.submit() directly must circumvent jQuery's event handling in some bad way. So my workaround (as you can see) was to put an invisible form submission button inside the form and have my external button click on that. This seemed to play nicely with both jQuery and the plugin.

Hope this helps someone! I didn't find the doc on the plugin's website to be as friendly as I had hoped.

Submitting a form containing a file field via AJAX (jQuery / Node.js)

2 Answers2