Trying to send input file data over AJAX, can't access the data in my controller

Question

I'm using Laravel 3, and I am AJAXing in a user comment. We are adding images to this comment and I can't seem to get the File Data to go through. When I set processData to false, I am also unable to access the other data such as the comment and privacy. Any insight?

var commentforms = $('form.compose');
commentforms.on('submit', function(e){
  e.preventDefault();

  var file = document.getElementById('file_input').files[0];

  $.ajax({
    type: 'POST',
    url: '/issue/comment/' + issue_id,
    processData: false,
    data: {
      side: side,
      comment: comment,
      privacy: privacy,
      file: file,
    },
    success: function(response){
      console.log(response);
      new_comment = comment_template(response);
      updateSide(new_comment);
    },
});

Answer 1

Going off of what Kevin B commented, there are a couple ways to do this.

First, the reason it is not working is that, by default, you cannot send files with an AJAX request. That is it, and that is why it isn't working. No matter what you do to your form and your AJAX request, you are stuck. (AJAX here meaning NOT XMLHttpRequest2)

SOLUTION 1

Kevin B recommended the Javascript formData object which is part of the XMLHttpRequest Level 2. Information on how to use it can be found: https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects In relation to your code, you code do something along the lines of:

commentforms.on('submit', function(e){
  e.preventDefault();

  var oData = new FormData(document.forms.namedItem("composeForm"));

  var oReq = new XMLHttpRequest();
  oReq.open("POST", '/issue/comment/' + issue_id, true); 
  //on a side note, issue_id isn't declared anywhere...
  oReq.onload = function(oEvent) {
    if (oReq.status == 200) {
      console.log("Uploaded!");
    } else {
      console.log("Error " + oReq.status + " occurred uploading your file.");
    }
  };
  oReq.send(oData);
});

PROBLEM

Again, as Kevin B said, it isn't widely supported. Checking here: http://caniuse.com/xhr2 you can see that IE9 and below isn't supported, which is XP, Vista, and non-upgraded Windows 7. If your app is on your own controlled network, and you can ensure everyone is using Firefox/Chrome/IE10+, you are good to go. If you are going to be using this feature with the public, then you need another solution.

OTHER SOLUTIONS

Many sites currently use AJAX to upload files, or trick you into thinking it is AJAX. What other websites do is one of two things: hidden iFrames or Flash.

The hidden iFrame trick is to create an iframe that populates the data of your current form, and then sends it off like it normally would, meaning a page reload. Because it is in an iFrame and hidden, the user never sees the page reload and the content is uploaded like you would expect.

The Flash trick is to use a little Flash app/plugin that finds the file and then sends it to your server. It is fairly easy to use, and since Flash is widely supported, it can do the trick on most browsers. You just have to include the plugin and you are good to go.

Plugins

I prefer to use plugins, as they do all the hard work for me. The one I am fond of right now for it's simplicity is Fine Uploader. It is easy to configure, looks great, can be Bootstrapped, or used with jQuery. Plugins may use one or both methods to upload the files, or they may even try the XMLHttpRequest2 first, then fall back on one of the other methods to upload the files. Ultimately, most of the popular plugins are easy to configure and provide fairly decent documentation to get it to do what you want.

Other popular plugins:

Uploadify

BlueImp

Plupload

Answer 2

read this:

With XHR2, File upload through AJAX is supported. E.g. through FormData object, but unfortunately it is not supported by all/old browsers.

Try with this:

1. Tutorial

And see this code:

var data= new FormData();
data.append( 'file', $('#file') );
$.ajax({
  url: 'file.php',
  data: data,
  processData: false,
  contentType: false,
  type: 'POST',
  success: function(response){
    console.log(response);
  }
});

Suerte!