JQuery1.8.0: Sending files from forms via AJAX

Question

I develop with CakePHP and initially thought this problem was Cake-related; it wasn't. I've re-written the question to make the answer I received more widely applicable

I have a form

  <form action"">
      <fieldset> 
      <!---- bunch of fields----->
      <input type="file" name="data[Upload][file]" id="UploadFile">
      <button id="ajaxUploadSubmit"> Submit </button>
      </fieldset>
  </form>

And the submit function I've written looks like:

$( "#ajaxUploadSubmit" ).click(function() {
                $.ajax({
                    url:"uploads/add",
                    data: $( "#UploadsAddForm" ).serialize()
                }).done(function(responseText) {
                    alert(responseText);
                  })
                 .fail(function() {
                     alert('failxors');
                  })
                });

But this line returns an empty array: $this->request->data.

Jai · Answer 1 · 2013-03-20T05:26:21.783

0

I think you are not stopping the form to submit:

$( "#ajaxUploadSubmit" ).click(function(e) {
      e.preventDefault();

Instead of click try submit:

try changing this:

$( "#ajaxUploadSubmit" ).click(function() {

to this one:

$(".form").submit(function(e) {
    e.preventDefault();

edited Mar 20 '13 at 05:26

answered Mar 19 '13 at 17:56

Jai

74,255
12
74
103

Alas, you're right about the default action; in the code I posted I'd left that flag on, but in reality (ie. my live code) that was already addressed (with CakePHP you can stop the default form activity from `Form->create()` by using the `'default'=>false` option. – Jonline Mar 19 '13 at 20:08
Besides which, the submission *is* happening; the problem is that the data in the form is not being sent with it, and I suspect this has something to do with the way CakePHP wants to receive data (ie. Cake's routing system) as against the way Jquery sends it, but I'm not familiar enough with either the Cake conventions or JSON (which is basically what I think JQuery constructs it's AJAX calls with... ?) to figure it out! – Jonline Mar 19 '13 at 20:10
2

First of all, have you tried to debug the data in the browser? Either by checking the request that is sent to the server in FireBug (or Chrome WebInspector), and debugging `console.log($( "#UploadsAddForm" ).serialize());`. Also; sending this form will not work this way because jQuery.serialize() **does not send file-uploads** http://stackoverflow.com/questions/4545081/how-do-to-file-upload-using-jquery-serialization there are several plugins that use the HTML5 file upload API that may work as well – thaJeztah Mar 19 '13 at 21:10
Thanks for that, I wondered if sending a file was also part of the problem. One step closer to a solution, thanks. – Jonline Mar 20 '13 at 15:02

score 0 · Accepted Answer · edited May 23 '17 at 12:04

0

I'm only adding this answer so this question can be marked as answered; in fact thaJeztah answered this in the 3rd comment of Jai's answer: the problem, in this case, was that I should have been using FormData() instead of Serialize() as seen here: how to do file upload using jquery serialization

edited May 23 '17 at 12:04

Community

1
1

answered Mar 28 '13 at 23:00

Jonline

1,677
2
22
53

JQuery1.8.0: Sending files from forms via AJAX

2 Answers2

Linked