Node JS reads form data

Question

I want to send some attributes and a file to a Node JS application with multipart / form data.

HTML client form:

<input id="picName" name="picName" class="form-control" placeholder="PicTitle..." style="border-radius: 1%; margin: 1%" type="name">
<form id="frmUploader" enctype="multipart/form-data" action="/post/picture/" method="post">
<input id="file" type="file" name="picUploader" multiple /><br>
<input class="btn btn-md btn-success" type="submit" name="submit" id="btnSubmit" value="Upload" /><br>
</form>

JS Client:

$('#frmUploader').submit(function () {
      var username = localStorage.getItem("userName");
      var categoryName = $( "#categoryAddPic option:selected").text();
      var picTitle = $('#picName').val();

          var picture = $('input[name="picUploader"]').get(0).files[0];
          var formData = new FormData();
          formData.append('picture', picture);
          formData.append('username', username);
          formData.append('categoryName', categoryName);
          formData.append('picTitle', picTitle);

            $.ajax({
                method: 'POST',
                url: 'http://localhost:3000/post/picture',
                data: formData,
                headers:{
                    "Authorization": "bearer " + token
                },success:function (respond) {
                    ...
            });
        }
        return false;
    });

Now I want to save the form data in a Node application. If you need to know, I use multer to save the file to the server.

Thanks for the help.

PS: Node version is 4.8.3

Node JS:

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

var picName = req.body.picName;
var username = req.body.username;
var displayPic = req.body.displayPic;
var createdAt = moment();
var updatedAt = moment();
var categoryName = req.body.categoryName;
var picIdForCat = null;

try {
    if (username) {
        upload(req, res, function (err) {
            if (err) {
                return res.end("Something went wrong!");
            }
            //return res.end("File uploaded sucessfully!.");
            picName = pictureSaveFormat;
            var pictureCont = "./pictures/" + picName + ".jpg";

            User.findOne({
                where: {username: username}
            }).then(function (user) {
                var picture = {
                    picName: picName,
                    picture: pictureCont,
                    displayPic: null,
                    createdAt: createdAt,
                    updatedAt: updatedAt,
                    UserIdUser: user.idUser
                };
                Pictures.create(picture);

                if (categoryName) {
                    Pictures.findOne({
                        where: {picName: picture.picName}
                    }).then(function (pic) {
                        picIdForCat = pic.idPic;

                        Category.findOne({
                            where: {categoryName: categoryName}
                        }).then(function (category) {
                            var catId = category.idCat;
                            var catForPic = {PictureIdPic: picIdForCat, CategoryIdCat: catId};

                            CategorieForPic.create(catForPic);
                            //res.redirect('localhost:3000/index.Admin.html');
                            res.status(200).json({message: "Picture from: " + username + " with name: " + picName + " created with " + category.categoryName + "."});
                        })
                    }).catch(function (req, res, err) {
                        res.status(500).json({message: "Error: Adding Category to pic", reason: err});
                    });
                } else {
                    //res.redirect('localhost:3000/index.Admin.html');
                    res.status(200).json({message: "Picture from: " + username + " with name: " + picName + " created without a category."});
                }
            }).catch(next);
        });
    } else {
        res.status(404).json({message: "Not found.", reason: "A required parameter is missing."});
    }
}catch (err){
    res.status(500).json({message: "Fatal Server error: ", reason: err});
}
});

Answer 1

When using a FormData object with jQuery.ajax, you need to set processData to false so jQuery does not try to encode the FormData and contentType objects to false so jQuery does not set the headers of the content types. When FormData is used with ajax, an appropriate content type header is created for you.

     $.ajax({
            method: 'POST',
            url: 'http://localhost:3000/post/picture',
            data: formData,
            processData: false,
            contentType: false,
            headers:{
                "Authorization": "bearer " + token
            },
            success:function (respond) {
                ...
            });
    }