I am building a web app which need to upload a test report. i am working on front end and other guy is working on backend(with nodejs and mongodb). His api server is running separately and my webapp is running separately. now i need to send the uploaded file to his api as it is. i am having a problem in doing it. I am sending data through ajax. this is my ajax code
var $form = $(e.target);
var formData = new FormData();
formData.append('productsfile', $('#prdcttestfile')[0].files[0]);
formData.append('productid', $('#prdctid').val());
formData.append('warantydays', $('#prdctwarranty').val());
formData.append('baseprice', $('#prdctbaseprice').val());
formData.append('discountedpercent', $('#prdctdiscountedprice').val());
formData.append('taxpercent', $('#prdcttax').val());
formData.append('language', $('#prdctlanguage').val());
formData.append('inventoryid', $('#village').val());
$.ajax({
url: '/product/movetoinventory',
type: 'POST',
data: formData,
contentType: false,
processData: false,
success: function (response) {
if (response.success) {
new PNotify({
title: "Enquiry Updted",
type: "info",
text: "Your enquiry has been updated",
nonblock: {
nonblock: true
},
addclass: 'dark',
styling: 'bootstrap3',
hide: true,
before_close: function (PNotify) {
PNotify.update({
title: PNotify.options.title + " - Enjoy your Stay",
before_close: null
});
PNotify.queueRemove();
return false;
}
});
$('.modal.in').modal('hide');
$("#inventory_product")[0].reset();
}
}
});
when i use console.log(req.body) in my routes i am getting the data along with the FILE PATH(not file). if i use console.log(req.files) i am getting empty {}.
You can use two methods for file uploading.
Send Base64 of the file to the backend.The Backend developer store this file in server and URL of the store location will store in the database.
For node have multer and connect-multiparty npm.You can choose one of them.
For backend code is
var express = require('express'),
bodyParser = require('body-parser'),
host = '127.0.0.1',
port = '3002',
multer = require('multer'),
app = express();
var upload = multer()
app.use(bodyParser.urlencoded({
extended: false
}))
app.post('/file-upload', upload, function(req, res) {
console.log('file upload');
})
app.listen(port, function() {
console.log('hi server run' + " " + port);
})
and the froent-end code is
<body>
<form method="post" enctype="multipart/form-data" action="http://localhost:3002/file-upload">
<input type="file" name="thumbnail">
<input type="submit">
</form>
I think that the a second option is a good option for file upload.You can check multer
for multiple file upload at a