Trying to send input file data via AJAX, cannot access data in my controller

Question

I am using Laravel 3 and I am AJAXing in a user comment. We are adding images to this comment, and I cannot get the file data. When I set processData to false, I also cannot access other data, such as 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

Giving up what Kevin B has commented on, there are several ways to do this.

Firstly, the reason it doesn’t work is because by default you cannot send files with an AJAX request. That is all, and therefore it does not work. No matter what you do for your form and your AJAX request, you're stuck. (AJAX here means NOT XMLHttpRequest2)

SOLUTION 1

Kevin B recommended a Javascript formData object, which is part of the XMLHttpRequest 2 level. Information on how to use it can be found: https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects Regarding your code, you make the code as follows:

 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, he did not receive widespread support. Check here: http://caniuse.com/xhr2 you can see that IE9 and below are not supported, these are XP, Vista and not updated Windows 7. If your application is on your own controlled network and you can make sure that everything using Firefox / Chrome / IE10 +, you're good to go. If you are going to use this feature for the public, you need a different solution.

OTHER DECISIONS

Many sites currently use AJAX to download files, or trick you into thinking that it is AJAX. Other websites are one of two things: hidden iFrames or Flash.

The hidden iFrame trick is to create an iframe that fills in the data of your current form and then sends it as usual, which means reloading the page. Since it is in the iFrame and hidden, the user never sees the page reload and the content loads as you expected.

The Flash trick is to use a small Flash application / 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 in most browsers. You just need to enable the plugin and you are good to go.

Plugins

I prefer using plugins as they do all the hard work for me. The one I like right now for this is simplicity. Accurate bootloader . It is easy to configure, looks great, can be downloaded or used with jQuery. Plugins can use one or both methods to upload files, or they can even try XMLHttpRequest2 first and then return to one of the other methods to upload files. Ultimately, most popular plugins are easy to configure and provide decent enough documentation to make it do what you want.

Other popular plugins:

Uploadify

Blueip

Plupload

Answer 2

read this:

XHR2 supports file upload via AJAX. For instance. via a FormData object, but unfortunately it is not supported by all / old browsers.

Try the following:

• Tutorial

And look at 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!