Ajax request not being triggered at all

Question

I am trying to pass some data to my node.js server with an ajax request.

Unfortunately I my server logs an empty object and my ajax call doesn't log any success nor error.

Here's the snippet of my code:

    var fd = new FormData();
    function appendPicture(){
      fd.append('picture_data', that.state.newFeedMediaData);
      fd.append('content', that.state.newFeedContent);
      fd.append('img_inline_style', img_inline);
    }

    var p1 = Promise.resolve(appendPicture());
    p1.then(function(v){
      console.log(fd);
      $.ajax({
        url: '/api/setNewFeedPost',
        data: fd,
        processData: false,
        contentType: false,
        enctype: 'multipart/form-data',
        type: 'POST',
        success: function(data){
          console.log("success");
        },
        error: function(data){
          console.log("error");
        }
      });
    });

img_inline_style contains the following object:

{Filter: "grayscale(0%) brightness(100%) contrast(100%) sepia(0%)"
WebkitFilter: "grayscale(0%) brightness(100%) contrast(100%) sepia(0%)"
backgroundImage: ""
backgroundPositionY: -66
backgroundSize: "cover"
height: "100%"}

Even if there would be something wrong inside my sendObj I don't think thats the issue since even when I try to send some simple string like "test" the request just doesn't happen.

Why would this be?

Additional info:

On my node.js server side im simply logging the received data which gets printed out simply like an empty object

Received data: {}

I am using node.js with express and my server side render script of an ajax post in my api file looks as following:

router.post('/setNewFeedPost', function(req, response, next){
  console.log("Set new Feedpost content: ",req.body);
});

Answer 1

Taking a wild guess here, but you might be missing the correct middleware to handle multipart requests. Sadly, express can be quite daunting and this is one of those times.

As can be seen in How to get POST a query in Express.js/Node.js?, you need to add various middlewares to support various types of request bodies. As already pointed out there, you need to have body-parser for parsing request bodies. However since you are using multipart, you can't simply rely on body-parser. Here's an excerpt from their current README:

Node.js body parsing middleware.
This does not handle multipart bodies, due to their complex and typically large nature.

It goes on to list various alternatives. One of them being express' own multer. Their README is quite nice, however for the sake of completeness I decided to put together a small example which reflects your use case slightly:

app.js

var console = require("console");
var path = require('path');

var multer = require('multer');
var express = require('express');

var app = express();
// using path with __dirname is essential so you avoid the common pitfall of using
// relative paths, where you can never be sure if they are calculated 
// from the current working directory or the directory of the file.
var upload = multer({dest: path.join(__dirname, 'uploads')});

// upload.any() is merely used for demonstration purposes and
// I do not recommend using this in production! See their README.
app.post('/save', upload.any(), function(req, res) {
    console.log('Files', req.files);  // All files are in here.
    console.log('Body Data', req.body);  // The rest of the data here.
    // It is important to answer your client with something.
    // Otherwise the client will never know you've received anything
    // (resulting in a "pending" state and timeout errors).
    res.send('win');
});

index.html

<form action="#">
    <input type="file" name="foo_img">
    <button type="submit">Lets go</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    var img_inline_style = {
        backgroundImage: "",
        backgroundPositionY: -66,
        height: "100%"
    };

    $('form').submit(function(event) {
        event.preventDefault();

        // This is basically what you are doing, I guess.
        var data = new FormData();
        data.append('picture_data', $('input').get(0).files[0]);
        data.append('content', 'foobarbarz');
        // As correctly pointed out by Quentin's answer, you can't simply
        // send objects. You need to transform them into a string. Here
        // I'm doing this by converting the object into a string via JSON.
        data.append('img_inline_style', JSON.stringify(img_inline_style));

        $.ajax({
            url: '/save',
            data: data,
            processData: false,
            contentType: false,
            enctype: 'multipart/form-data',
            type: 'POST',
            success: function(data){
                console.log("success");
            },
            error: function(data){
                console.log("error");
            }
         });
    });
</script>

Result

When running this, one can observe the following output on the server:

Files [ { fieldname: 'picture_data',
    originalname: 'IMG_6365.JPG',
    encoding: '7bit',
    mimetype: 'image/jpeg',
    destination: '/Users/luis/Desktop/test/uploads',
    filename: '743c2599a93761a347ce0951ec746927',
    path: '/Users/luis/Desktop/test/uploads/743c2599a93761a347ce0951ec746927',
    size: 1561538 } ]
Body Data { content: 'foobarbarz',
  img_inline_style: '{"backgroundImage":"","backgroundPositionY":-66,"height":"100%"}' }

As you can see the file I selected is there and the rest of the data too. Success!

Hope this helps :)

Answer 2

The sendObj content looks like this:

content: "adasd"
img_inline_style: Object
picture_data: FormData

1. Pass the form data object to data: directly. Don't wrap it in another element. You can't pass a plain object to data: while telling it not to process it, the results won't be useful. You can pass a FormData object directly to it, that's how you use FormData objects with jQuery.
2. Append the content to it
3. I have no idea what img_inline is, but you need to convert it to a format you can express as a string or strings. e.g. loop over each value and append each of them, or convert to JSON and append that