I'm using node v0.10.26 and express v4.2.0 and I'm pretty new to node. I've been beating my head against my desk for the past three or so hours trying to get a file upload form working with node. At this point I'm just trying to get req.files to not return undefined. My view looks like this
<!DOCTYPE html>
<html>
<head>
<title>{{ title }}</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1>{{ title }}</h1>
<p>Welcome to {{ title }}</p>
<form method='post' action='upload' enctype="multipart/form-data">
<input type='file' name='fileUploaded'>
<input type='submit'>
</form>
</body>
</html>
Here are my routes
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res) {
res.render('index', { title: 'Express' });
});
router.post('/upload', function(req, res){
console.log(req.files);
});
module.exports = router;
And here's my app.js
var express = require('express');
var path = require('path');
var favicon = require('static-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var routes = require('./routes/index');
var users = require('./routes/users');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hjs');
app.use(favicon());
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded());
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', routes);
app.use('/users', users);
/// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
/// error handlers
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
});
}
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
});
module.exports = app;
I saw somewhere that including methodOverride() and bodyParser({keepExtensions:true,uploadDir:path}) was supposed to help but I can't even launch my server if I add those lines.
This question is related to
node.js
file-upload
express
If you are using Node.js Express and Typescript here is a working example, this works with javascript also, just change the let to var and the import to includes etc...
first import the following make sure you install formidable by running the following command:
npm install formidable
than import the following:
import * as formidable from 'formidable';
import * as fs from 'fs';
then your function like bellow:
uploadFile(req, res) {
let form = new formidable.IncomingForm();
form.parse(req, function (err, fields, files) {
let oldpath = files.file.path;
let newpath = 'C:/test/' + files.file.name;
fs.rename(oldpath, newpath, function (err) {
if (err) throw err;
res.write('File uploaded and moved!');
res.end();
});
});
}
Here is a simplified version (the gist) of Mick Cullen's answer -- in part to prove that it needn't be very complex to implement this; in part to give a quick reference for anyone who isn't interested in reading pages and pages of code.
You have to make you app use connect-busboy:
var busboy = require("connect-busboy");
app.use(busboy());
This will not do anything until you trigger it. Within the call that handles uploading, do the following:
app.post("/upload", function(req, res) {
if(req.busboy) {
req.busboy.on("file", function(fieldName, fileStream, fileName, encoding, mimeType) {
//Handle file stream here
});
return req.pipe(req.busboy);
}
//Something went wrong -- busboy was not loaded
});
Let's break this down:
req.busboy is set (the middleware was loaded correctly)"file" listener on req.busboyreq to req.busboyInside the file listener there are a couple of interesting things, but what really matters is the fileStream: this is a Readable, that can then be written to a file, like you usually would.
Pitfall: You must handle this Readable, or express will never respond to the request, see the busboy API (file section).
Here is an easier way that worked for me:
const express = require('express');
var app = express();
var fs = require('fs');
app.post('/upload', async function(req, res) {
var file = JSON.parse(JSON.stringify(req.files))
var file_name = file.file.name
//if you want just the buffer format you can use it
var buffer = new Buffer.from(file.file.data.data)
//uncomment await if you want to do stuff after the file is created
/*await*/
fs.writeFile(file_name, buffer, async(err) => {
console.log("Successfully Written to File.");
// do what you want with the file it is in (__dirname + "/" + file_name)
console.log("end : " + new Date())
console.log(result_stt + "")
fs.unlink(__dirname + "/" + file_name, () => {})
res.send(result_stt)
});
});
Personally multer didn't work for me after weeks trying to get this file upload thing right. Then I switch to formidable and after a few days I got it working perfectly without any error, multiple files, express and react.js even though react is optional. Here's the guide: https://www.youtube.com/watch?v=jtCfvuMRsxE&t=122s
I find this, simple and efficient:
const express = require('express');
const fileUpload = require('express-fileupload');
const app = express();
// default options
app.use(fileUpload());
app.post('/upload', function(req, res) {
if (!req.files || Object.keys(req.files).length === 0) {
return res.status(400).send('No files were uploaded.');
}
// The name of the input field (i.e. "sampleFile") is used to retrieve the uploaded file
let sampleFile = req.files.sampleFile;
// Use the mv() method to place the file somewhere on your server
sampleFile.mv('/somewhere/on/your/server/filename.jpg', function(err) {
if (err)
return res.status(500).send(err);
res.send('File uploaded!');
});
});
Another option is to use multer, which uses busboy under the hood, but is simpler to set up.
var multer = require('multer');
Use multer and set the destination for the upload:
app.use(multer({dest:'./uploads/'}));
Create a form in your view, enctype='multipart/form-data is required for multer to work:
form(role="form", action="/", method="post", enctype="multipart/form-data")
div(class="form-group")
label Upload File
input(type="file", name="myfile", id="myfile")
Then in your POST you can access the data about the file:
app.post('/', function(req, res) {
console.dir(req.files);
});
A full tutorial on this can be found here.
const http = require('http');
const fs = require('fs');
// https://www.npmjs.com/package/formidable
const formidable = require('formidable');
// https://stackoverflow.com/questions/31317007/get-full-file-path-in-node-js
const path = require('path');
router.post('/upload', (req, res) => {
console.log(req.files);
let oldpath = req.files.fileUploaded.path;
// https://stackoverflow.com/questions/31317007/get-full-file-path-in-node-js
let newpath = path.resolve( `./${req.files.fileUploaded.name}` );
// copy
// https://stackoverflow.com/questions/43206198/what-does-the-exdev-cross-device-link-not-permitted-error-mean
fs.copyFile( oldpath, newpath, (err) => {
if (err) throw err;
// delete
fs.unlink( oldpath, (err) => {
if (err) throw err;
console.log('Success uploaded")
} );
} );
});
Multer is a node.js middleware for handling multipart/form-data, which is primarily used for uploading files. It is written on top of busboy for maximum efficiency.
npm install --save multer
in app.js
var multer = require('multer');
var storage = multer.diskStorage({
destination: function (req, file, callback) {
callback(null, './public/uploads');
},
filename: function (req, file, callback) {
console.log(file);
callback(null, Date.now()+'-'+file.originalname)
}
});
var upload = multer({storage: storage}).single('photo');
router.route("/storedata").post(function(req, res, next){
upload(req, res, function(err) {
if(err) {
console.log('Error Occured');
return;
}
var userDetail = new mongoOp.User({
'name':req.body.name,
'email':req.body.email,
'mobile':req.body.mobile,
'address':req.body.address
});
console.log(req.file);
res.end('Your File Uploaded');
console.log('Photo Uploaded');
userDetail.save(function(err,result){
if (err) {
return console.log(err)
}
console.log('saved to database')
})
})
res.redirect('/')
});
I needed to be walked through with a bit more detail than the other answers provided (e.g. how do I write the file to a location I decide at runtime?). Hopefully this is of help to others:
get connect-busboy:
npm install connect-busboy --save
In your server.js, add these lines
let busboy = require('connect-busboy')
// ...
app.use(busboy());
// ...
app.post('/upload', function(req, res) {
req.pipe(req.busboy);
req.busboy.on('file', function(fieldname, file, filename) {
var fstream = fs.createWriteStream('./images/' + filename);
file.pipe(fstream);
fstream.on('close', function () {
res.send('upload succeeded!');
});
});
});
This would seem to omit error handling though... will edit it in if I find it.
Source: Stackoverflow.com