I am trying to upload files to my server and extract them from the post request using the connect-multiparty middleware. However, when I receive the request on the server, the req.files and req.body objects are empty (not null, but node-inspector shows that they are Objects with nothing in them.
Here is the code that I'm working with:
server.js:
var express = require( "express" );
var app = express();
var server = require( "http" ).Server( app );
var fs = require( "fs" );
var multipart = require('connect-multiparty');
app.use( express.static( "public" ) );
app.use( multipart() );
app.post( "/httpUpload", function( req, res ) {
console.log( "Received post request" );
}
index.html:
<form action="/httpUpload" method="post" enctype="multipart/form-data">
<input type="file" id="uploadFileInput">
<div class="row">
<div class="col-md-6">
<input type="submit">
</div>
</div>
</form>
I've gotten similar results trying to use multer, connect-busboy, and body-parser. I would have loved if this solution worked for me, but it didn't: http://howtonode.org/really-simple-file-uploads
So ... the only common theme in all of my failed attempts is me. ;o) Any ideas what I'm doing wrong?
here is my way of extracting the uploaded files :
var express = require('express');
var multiparty = require('connect-multiparty'),
multipartyMiddleware = multiparty({ uploadDir: './imagesPath' });
var router = express.Router();
router.post('/', multipartyMiddleware, function(req, res) {
console.log(req.body, req.files);
var file = req.files.file;
console.log(file.name);
console.log(file.type);
res.status(200).send('OK');
});
module.exports = router;
this will save you uploded files to imagesPath folder
Well ... this isn't quite an answer to my question, but when I changed my code to remove the form and send the post request via jQuery's ajax method, the req.files object had my data in it. (shrug) Here was the code in my js that made it work:
$.ajax( {
url: "/httpUpload",
type: "POST",
processData: false, // important
contentType: false, // important
dataType : "json",
data: formData
} );
This is the post that put me on the right path:
File Upload without Form
Related
There were lots of similar questions related to mine, but no one gonna clear my doubt.
So,whenever I write
<form id="form" action="/" method="post" role="form">
and in my backend code, Let say I write
console.log(req.body.name)
I got the data correctly, but if I add enctype = multipart/form-data as
<form id="form" action="/" method="post" role="form" enctype="multipart/form-data">
I got req.body.name as 'undefined' or body parameters as 'undefined'.
Is there any way to get the body parameters While using enctype="multipart/form-data?
Please Help!
enctype="multipart/form-data" is not natively handled by express, you can use multer to handle multipart/form-data
npm install --save multer
Multer NPM
const multer = require('multer');
let upload = multer({ dest: 'uploads/' }); //<-- Could be any folder
router.post('/', upload, function (req, res) {
console.log('Body- ' + JSON.stringify(req.body));
});
In an alternative way, you can use a formidable module from the NPM.
Npm formidable
npm install --save formidable
const multer = require('formidable');
router.post('/', upload, function (req, res) {
const form = formidable({ multiples: true });
form.parse(req, (err, fields, files) => {
console.log('fields: ', fields);
console.log('files: ', files);
// enter code here
});
});
I've tried many StackOverflow answers, and this method normally works using body-parser, however I've been having issues with getting any output from req.body with either AJAX or form data.
In server.js:
app.use(helmet()); // Helmet middleware
app.use('/assets', express.static('resources/web/assets')); // Makes /assets public
app.use(require('./resources/modules/session.js')); // Custom session middleware
app.set('view engine', 'ejs'); // Sets EJS to the view engine
app.set('views', `${__dirname}/resources/web/pages`); // Sets the views folder
app.use(cookieParser()); // cookie-parser middleware
app.use(bodyParser.urlencoded({ extended: true })); // body-parser's middleware to handle encoded data
app.use(bodyParser.json()); // body-parser's middleware to handle JSON
app.use(fileUpload({ limits: { fileSize: 100 * 1024 * 1024 } })); // express-fileupload middleware (bushboy wrapper)
app.use('/api', require('./resources/routes/api.js')); // External API router
// ...
app.post('/login', (req, res) => {
console.log(req.body);
res.render('login', {
config,
page: {
name: 'Login'
},
error: ''
});
res.end();
});
My login.ejs code:
<form method="POST">
<div class="input-group">
<i class="las la-user"></i>
<input placeholder="Username" name="username" type="text" required>
</div>
<div class="input-group">
<i class="las la-lock"></i>
<input placeholder="Password" name="password" type="password" required>
</div>
<button type="submit">
<i class="las la-paper-plane"></i> Login
</button>
</form>
No matter what I try, I always get an empty {} in the console with no avail. I've tried debugging; I need a fresh pair of eyes to see what I've done wrong.
Here's the form data:
And I've tried using jQuery's AJAX ($.get) too:
$.post('', {username:'test', password:'test'})
.fail(console.error)
.done(() => console.log('Success'));
Edit: After trying multer's app.use(require('multer')().array()); and app.use(require('multer')().none()); middleware, I'm still at the same old issue, except with multer req.body is now undefined instead of {}. This is due to the data being sent as application/x-www-form-urlencoded instead of what I previously thought was application/form-data. As that is the case, the body-parser middleware method should work. If contributing, please do not contribute an answer relating to parsing application/form-data!
Edit 2: For those asking for the session.js code, here it is:
const enmap = require('enmap'),
sessions = new enmap('sessions');
module.exports = (req, res, next) => {
if (!req.cookies) next();
const { cookies: { session: sessionID } } = req;
if (sessionID) {
const session = sessions.get(sessionID);
if (session) {
req.session = session;
} else {
req.session = undefined;
};
} else {
req.session = undefined;
};
next();
};
I'm attaching the whole source code as you people claim to be able to reproduce it somehow. Download it at https://dropfile.nl/get/F7KF (DM me on Discord if it isn't working - PiggyPlex#9993).
For the specific case you're talking about, you usually need only 'body-parser' module to be able to access the form input fields. The minimum example that I advice you to build above it is the following:
var express = require('express');
var bodyParser = require('body-parser');
var app = express();
app.use(bodyParser.urlencoded({extended : true}));
app.use(bodyParser.json());
app.get('/login', (req, res) => { /* ... */ });
app.post('/login', (req, res) => {
console.log(req.body);
// ...
});
app.listen(3000);
So my advice is to narrow on the cause of the problem by removing any other middleware except for the bodyParser. Try to comment them one-by-one and then you will be able to find the guilty!
Also note that no need to bother yourself trying to make it work with Ajax as it will make no difference. Keep it simple and just try the normal browser submission.
When you found the problematic middleware, debug it. If it's made by you, make sure that you don't make any changes to the req.body. If it a thirdparty middleware, so please consult their installation steps very carefully and I'm happy for further explanation and support
Edit: Some other hints
Make sure that the request is being submitted with the header Content-Type: application/x-www-form-urlencoded
Check if there any CORS problems
File upload middleware to be on a separate path just like the assets
Removing enctype="multipart/form-data" from the form elements works for me, also after registering these middlewares:
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
Sometimes the main point this doesn't work is - when your data passed in the body is in text format, or as in my case in the headers I had 'Content-Type': 'application/x-www-form-urlencoded', but your req.body is expecting JSON data - so please make sure to double-check the 'Content-Type':'application/json' is set on the request headers.
You need to use other module to deal with multipart/form-data
https://github.com/pillarjs/multiparty
app.post('/login', function (req, res) {
const form = new multiparty.Form();
form.parse(req, function(err, fields, files) {
console.log(fields);
});
})
Please use body parser to get the input from the form
var express = require('express');
var bodyParser = require('body-parser');
var app = express();
app.use(bodyParser.urlencoded({extended : true}));
app.use(bodyParser.json());
app.post('/anyRoute', (req, res) => {
console.log(req.body); //your input value
});
app.listen(3000);
I had this same error and what fixed it was by removing enctype="multipart/form-data" from the form element. If you are not sending a file alongside the form with the enctype attribute, then you get such errors
I'm having some trouble with using the enctype multipart/form-data while at the same time sending inputs with the same name to be obtained as an array. I can only seem to obtain an uploaded image OR the array inputs, but not both at the same time...
For example, I have this form:
<form method="post" action="/test">
<input name="testinput" value="valueA">
<input name="testinput" value="valueB">
<input type="file" name="fileattachment">
<input type="submit" value="Submit">
</form>
If I set the form's enctype to be multipart/form-data, like this:
<form method="post" action="/test" enctype="multipart/form-data">
I end up receiving the 'fileattachment' just fine in my NodeJS app, BUT i only get the last value for 'testinput', like this:
//req.body
//---
{
testinput: 'valueB' // I'm missing valueA!
}
//req.files
//---
{
fileattachment: {
name: 'biglogo.png',
data: <Buffer 89 ... >,
encoding: '7bit',
mimetype: 'image/png',
mv: [Function]
}
}
If the enctype is not set, the 'testinput' data comes as an array, BUT the 'fileattachment' is lost and I only get the name of the uploaded file, like this:
//req.body
//---
{
testinput: ['valueA', 'valueB'],
fileattachment: 'some_picture.png' // Useless for file uploading
}
I think it has something to do with the way I've set up express' body parser, but I can't seem to figure out the right configuration. This is my setup (simplified for the relevant code):
var express = require('express');
var fileUpload = require('express-fileupload');
var bodyParser = require('body-parser');
var app = express();
app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());
app.use(fileUpload()); // Must be placed after, not before, bodyparser's use, otherwise files fail to be uploaded correctly...
app.post('/test', function(req, res) {
// Some code
});
Also, this is my package.json file:
{
"name": "my-app",
...
"dependencies": {
"body-parser": "~1.15",
"express": "~4.14",
"express-fileupload": "^0.0.5"
}
}
This is running on node/6.9.1
I've seen this very similar question Multipart/form-data with arrays, but it is 2 years old, unanswered and doesn't seem to use the dependency fileUpload.
Also, I tried the approach proposed by the answer to this question Handling input arrays in Express forms?, but all I keep getting on the server looks is text instead of arrays, like this:
{
'something[0][testinput]': 'valueA',
'something[1][testinput]': 'valueB'
}
What am I missing? What should I try?
I was able to obtain the desired result by switching from express-fileupload to Multiparty
The setup:
var express = require('express');
var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());
My code:
var multiparty = require('multiparty');
app.post('/test', function(req, res) {
(new multiparty.Form()).parse(req, function(err, fields, files) {
// handling fields and files code
});
});
Fields:
{
testinput: ['valueA', 'valueB']
}
Files:
{
fileattachment: [
{
fieldName: 'fileattachment',
originalFilename: 'biglogo.png',
path: '/tmp/blablaasdfgh.png',
headers: [Object],
size: 10130
}
]
}
As you can see the inputs are bundled together on an array, and the file seems to be correctly recieved.
Configure the express-fileupload library to use the parseNested property like this:
const fileUpload = require('express-fileupload');
app.use(fileUpload({
parseNested: true // magic
}));
I had the same problem using express-fileupload, I was able to make it work with this function
ProjectController.prototype.teste = async function (request, response, next) {
let documents = parseFormDate(request.body, request.files);
return response.status(200).json({ 'body': request.body, 'documents': documents });
};
and
const parseFormDate = (field, files) => {
let documents = []
for (const key in files) {
if (files.hasOwnProperty(key)) {
const file = files[key];
if (field[key]) {
documents.push({ title: field[key], document: file })
delete field[key];
}
delete files[key];
}
}
return documents;
}
Im using the following code from
https://github.com/cthackers/adm-zip/wiki/ADM-ZIP-Introduction
Whant I need is to get a zip file from request(Im using express and I've request and response) and I need to extract(unzip) it to some path(in the example for my local drive) ,where should I put the req and what Im missing here to make it work
fn: function (req, res) {
var admZip = require('adm-zip');
var zip = new admZip();
zip.addLocalFile("C://TestFolder//TestZip");
in the request body im getting the zip file(im using postman and in the body I use the binary and select a zip file)
Please try my snippet code :
For some information, My App structure like this below :
my path --> C:\xampp\htdocs\service
service
|
-- tmp\
|
-- app.js
|
-- index.html
Client Side:
<html>
<body>
<h3>ZIP Upload:</h3>
<form action="/upload_zip" method="POST" enctype="multipart/form-data">
Select zip to upload:
<input type="file" name="zipFile" id="zipFile">
<input type="submit" value="Upload ZIP" name="submit">
</form>
</body>
</html>
Server Side:
Don't forget using enctype="multipart/form-data" when you post it using postman or something like that...
var express = require("express");
var fs = require("fs");
var AdmZip = require('adm-zip');
var app = express();
var multer = require("multer");
var multer_dest = multer({dest: "./tmp"}).single('zipFile');
app.get("/",function(req,res){
console.log("Show index.html");
res.sendFile(__dirname+"/"+"index.html");
});
app.post("/upload_zip",multer_dest,function(req,res){
console.log(req.file);
var zip = new AdmZip(req.file.path);
zip.extractAllTo("./tmp");
result = {
file:req.file,
message:"File has been extracted"
};
fs.unlink(req.file.path, function (e) {
if (e) throw e;
console.log('successfully deleted '+req.file.path);
});
res.end(JSON.stringify(result));
});
var server = app.listen(8081,function(){
var host = server.address().address;
var port = server.address().port;
console.log("Example App Listening at http://%s:%s",host,port);
})
Output :
You could simplify the problem by using form-data instead of binary and using multer. You can get the input file by accessing req.file after which you can perform your unzip operation.
For example, you would add to your route:
var upload = require('multer')({ dest: 'uploads/' });
var admZip = require('adm-zip');
app.post('/upload-here', upload.single('file'), function (req, res, next) {
var zip = new admZip(req.file.path);
zip.extractAllTo("C://TestFolder//TestZip", true);
});
I am trying to implement file uploads with node.js and the multer middleware, but it doesn't seem to work. This is my code:
var express = require('express');
var multer = require('multer');
var done = false;
var app = express();
app.use(multer( {dest:'./uploads/',
onFileUploadStart : function(file){
console.log('File recieved:');
console.log(file);
},
onFileUploadData:function (file,data){
console.log('Data recieved');
},
onParseEnd: function(req,next){
next();
}
}));
app.use(express.static(__dirname+"/public"));
app.post('/upload',require(__dirname+'/upload.js').upload);
app.listen(3000);
My form looks like this:
<html>
<body>
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name ="file">
<input type="submit" value="Upload selected file to server">
</form>
</body>
</html>
And upload.js looks like this:
exports.upload = function (req,res)
{
console.dir(req.files);
};
I think the problem is that my form is being submitted with "application/x-www-form-urlencoded" in the Content-Type header instead of "multipart/form-data", since this is what appears when I use Fiddler to monitor the request, but I have no idea why. Can anyone shed any light on this?
I got it working by adding an accept attribute to my tag in my html. I don't know why in some examples this is not used.
Here's the code for my entire form:
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name ="file" accept="application/x-zip-compressed,image/*">
<input type="submit" value="Upload selected file to server">
</form>
Check the entire project eventually: https://github.com/tutiplain/quickupload
I can see you are doing everything right. I used multer sometime back, you can look into my working implementation here. In this EJS file i have an image upload functionality and then i wrote some logic to store the file to some other location.
Make sure you have appropriate router, for example you can use router.post(..)
exports.upload= function(req,res){
// get the temporary location of the file
var tmp_path = req.files.file.path;
// set where the file should actually exists - in this case it is in the "images" directory
var target_path = '/..provide path to store photos../' + req.files.file.name;
// move the file from the temporary location to the intended location
fs.rename(tmp_path, target_path, function(err) {
if (err) throw err;
// delete the temporary file, so that the explicitly set temporary upload dir does not get filled with unwanted files
fs.unlink(tmp_path, function() {
if (err) {
throw err;
}else{
//response logic ...
};
});
});
};
You can try this. It works for me. If any issues then let me know
var multer = require('multer');
var upload = multer({ dest: './uploads' });
router.post('/register',upload.single('profileimage'),function(req,res,next){
if (req.file) {
console.log('Uploading File');
var profileImageOriginlName=req.file.originalname;
var profileImageName=req.file.name;
var profileImageMime=req.file.mimetype;
var profileImagePath=req.file.path;
var profileImageExt=req.file.extension;
var profileImageSize=req.file.size;
}
else
{
var profileImageName='noimage.png';
}
});