jQuery's Ajax callbacks not firing after file upload

Question

I have a relatively simple ajax call that uploads a file from an input form to a server:

$(function(){
      $("form").submit(function(){

        var infile = $('#pickedfile');

        var actFile = infile[0].files[0];

        $.ajax(
        {
            type: "POST",
            url: "http://localhost:3000/file_upload",
            data: [
            {
                file: actFile
            }],
            dataType: 'text',
            success: function ()
            {
                alert("Data Uploaded");
            },
            beforeSend: function ()
            {
                alert("Before Send");
                return false;
            },
            error: function ()
            {
                alert("Error detected");
            },
            complete: function ()
            {
                alert("Completed");
            }
        });

      });

    });

And I have a node.js server that successfully receives the file, and reports back:

var express = require('express'),
    wines = require('./routes/testscripts');

var app = express();

app.configure(function(){
  app.use(express.bodyParser());
  app.use(app.router);
});

app.post('/file_upload', function(req, res) {

    //file should be in req.files.pickedfile

    // get the temporary location of the file
        // undefined if file was not uploaded
        var tmp_path = req.files.pickedfile.path;

        res.send("Hello, this is server");

    });
});

app.listen(3000);

The file is uploaded successfully, and everything seems to work fine on the server side.

However, on the front end, none of the alerts are firing, so I'm not able to respond to any new data from the server. Is there some additional step that I'm missing?

Have you tried stepping through the JS using something like Firebug? This way you can figure out exactly what line is causing the issue. — David Starkey, Aug 21 '13 at 16:51
@DavidStarkey No, I'm relatively new to javascript, and am not familiar with Firebug. — Raven Dreamer, Aug 21 '13 at 17:06
[Firebug](https://getfirebug.com/) is for Firefox, but many browsers have similar features tied to the F12 key (they even look similar in most cases). Under the "Script" tab you can set up a breakpoint on a JS line (like, say, the beginning of your AJAX function). When the line would be run, it stops and lets you step through the process. You can also watch variables as you go through it. Very useful tool for web developers. — David Starkey, Aug 21 '13 at 17:10
@DavidStarkey Oh, you mean like Chrome's Console? That's just it -- it runs with no errors; the callbacks just never get run. — Raven Dreamer, Aug 21 '13 at 17:34
If you step through, line-by-line, there will likely be a point when the function stops being run and just exits. For help debugging JS in Chrome, you can see here: https://developers.google.com/chrome-developer-tools/docs/javascript-debugging#breakpoints — David Starkey, Aug 21 '13 at 17:42
I think the problem my be `data: [{...}],` the `[]` are not needed and possibly wrong. See this answer for passing multiple data elements: http://stackoverflow.com/a/6085669/1618257 — David Starkey, Aug 21 '13 at 17:48
@DavidStarkey Changing the data to an array removed a typing error that *was* appearing in the console (though again, the server apparently received the file fine). Changing it back to `{ }` did not allow the callbacks to fire. — Raven Dreamer, Aug 21 '13 at 18:06
Crazy question. Do you have alerts disabled? I'm not as familiar with Chrome but some browsers allow you to disable them. I've also never used node.js so if its a problem there then I've reach the end of my usefulness here I'm afraid. — David Starkey, Aug 21 '13 at 18:20
@DavidStarkey Would alerts be disabled in a newly downloaded Firefox / Firebug? My webpage behaves exactly the same way for both browsers -- file gets uploaded to server, but none of the ajax callbacks fire. — Raven Dreamer, Aug 21 '13 at 18:23
@DavidStarkey jQuery 1.9.0 (Though I'm not set on that version) — Raven Dreamer, Aug 21 '13 at 18:31
So, I found where the ajax function returns: http://i.stack.imgur.com/xFE1D.png . Something causes the request to come back as "Canceled", but it is still sending the file on to the server, some how. — Raven Dreamer, Aug 21 '13 at 18:33
As a workaround, you can try `.ajax({...}).done({alert("AJAX call completed");});` — David Starkey, Aug 21 '13 at 19:45

score 0 · Accepted Answer · answered Aug 22 '13 at 20:56

Turns out this was a combination of two issues:

1) The jQuery, as identified in the comments, was being aborted.

2) Because the jQuery was canceled, it did not prevent the associated HTML form from submitting normally.

This combination meant that the form would submit and receive a response successfully, but because the jQuery code was silently failing, no callbacks were received.

jQuery's Ajax callbacks not firing after file upload

1 Answers1