Multipart Form Data not Sending Correctly

I have been unable to make this work...

The Tools

• HTML5
• CSS
• Bootstrap 3.x.x
• NodeJS (Express, multer)
• jQuery

The Problem

It Appears that the post is being logged but the req.files is not being populated and no images are being pushed into my uploads folder.

The JS

$(document).ready(function () {
    var form = $('#ajax-new-post');

    form.submit(function (e) {

        //stop submit the form, we will post it manually.
        e.preventDefault();

        var formMessages = $('#form-messages');

        // Create an FormData object
        var data = new FormData(form[0]);

        // If you want to add an extra field for the FormData
        //data.append("CustomField", "This is some extra data, testing");

        // disabled the submit button
        $("#btnSubmit").prop("disabled", true);

        $.ajax({
            type: "POST",
            enctype: 'multipart/form-data',
            url: "/posts/new",
            data: data,
            processData: false,
            contentType: false,
            cache: false,
            timeout: 600000,
            })
                .done(function (response) {
                    // Make sure that the formMessages div has the 'success' class.
                    $(formMessages).removeClass('alert alert-danger');
                    $(formMessages).addClass('alert alert-success');

                    console.log('Success: ' + response);

                    // Set the message text.
                    $(formMessages).text(response);

                    // Clear the form.
                    $('#title').val('');
                    $('#image').val('');
                    $('#upload-file-info').removeClass('btn-blk');
                    $('#upload-file-info').val('');
                    $('#post').val('');
                    $('#category').val('');
                })
                .fail(function (data) {
                    // Make sure that the formMessages div has the 'error' class.
                    $(formMessages).removeClass('alert alert-success');
                    $(formMessages).addClass('alert alert-danger');

                    // Set the message text.
                    if (data.responseText !== '') {
                        $(formMessages).text(data.responseText);
                    } else {
                        $(formMessages).text('Oops! An error occured and your message could not be sent.');
                    }
                });
        });

});

The HTML

<div id="form-messages"></div>
<form id="ajax-new-post" enctype="multipart/form-data" method="post" action="/posts/new" class="wpcf7-form">

    <!--<label for="name">Name:</label>-->
    <div class="field">
        <input type="text" id="title" name="title" placeholder="Title" required>
    </div>
    <div class="e-divider-2"></div>
    <div class="row">
        <div class="col-md-6">
            <input type="text" id="category" class="text-align-left" name="category" placeholder="Category" style="float: left;" required>
        </div>
        <div class="col-md-6">
            <input type="file" id="image" name="image" accept="image/*" size=1>
        </div>
    </div>
    <div class="e-divider-1"></div>
    <div class="field">
        <!--<label for="message">Message:</label>-->
        <textarea id="content-mrkdwn" name="content_mrkdwn" placeholder="Post" rows="40" required></textarea>
    </div>
    <div class="e-divider-2"></div>
    <div class="field text-center">
        <button id="btnSubmit" type="submit" class="btn btn-lg btn-blk">Create Post</button>
    </div>
</form>

The Server Side

let uploading = multer({
    dest: __dirname + /public/uploads/images/'
}).single('image');

app.post('/posts/new', uploading, (req, res) => {
    console.log(req.body);  // Outputting Non-Multipart Data
    console.log(req.files); // Outputting Undefined

    res.status(202).send('Post Successfully Made');
});

Any Thoughts???

via canaan seaton