I have been unable to make this work...
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.
$(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.');
}
});
});
});
<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>
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');
});
When you are using upload.single()
, as multer documentation says, the resulting file should be in req.file
, not req.files
.
See the doc here
For example
app.post('/profile', upload.single('avatar'), function (req, res, next) {
// req.file is the `avatar` file
// req.body will hold the text fields, if there were any
})
.single(fieldname)
Accept a single file with the name fieldname. The single file will be stored in req.file.