I have question.I've looked at some questions here, but I can't get the answer.My question is, I want to upload and read a json file, I try with "multer" but couldn't.So I want to put the file I upload to the result variable. Can you help me? How can I achieve this?
HTML;
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<form action="/import" enctype="multipart/form-data" method="post">
<input type="file" name="filename">
<input type="submit" value="Upload">
</form>
</body>
</html>
Server.js
const express = require('express');
const multer = require('multer');
const upload = multer({
dest: 'uploads/' // "uploads"
});
const app = express();
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
route.post("/import", upload.single("filename") (req, res, next) => {
var result = require(# I want to send the json file I uploaded here, and I need to see the contents of the json file as is #)
res.json(result)
res.redirect("/")
});
app.listen(3000);
The upload.single() parses the data stream and saves as a file based on the configuration. In your case, it will look for filename field in the incoming request and save the file in the uploads/ folder. The metadata of the file is available in req.file object. You can simply do console.log(req.file) to see the information.
To read the content of the file, you can use req.file.path field. Here is how:
const fs = require("fs");
const path = require("path");
/** In the controller */
const absolutePath = path.join(__dirname, req.file.path);
const jsonString = fs.readFileSync(absolutePath, "utf-8");
const jsonObject = JSON.parse(jsonString);
console.log(jsonObject);
Here is how the complete server.js would look like:
const express = require("express");
const multer = require("multer");
const fs = require("fs");
const path = require("path");
const upload = multer({
dest: "uploads/" // "uploads"
});
const app = express();
app.get("/", (req, res) => {
res.sendFile(__dirname + "/index.html");
});
const route = express.Router();
route.post("/import", upload.single("filename"), (req, res, next) => {
console.log(req.file);
const absolutePath = path.join(__dirname, req.file.path);
const jsonString = fs.readFileSync(absolutePath, "utf-8");
const jsonObject = JSON.parse(jsonString);
console.log(jsonObject);
res.redirect("/");
});
app.use(route);
app.listen(3000);
I have added some parts which were missing from your snippet ( like express.Router ). They might be different though.
Related
I was working on a small project on backend using nodeJS. I want to upload image to backend. I'm using nodeJS for backend and using packages like express, body-parser & multer.
I build a simple project to upload image, for now I just want that image is uploaded & stored in "public" folder that is in same level as server.js
server.js file
const express = require('express')
const multer= require('multer')
const path= require('path')
const bodyParser= require('body-parser')
const app = express()
const storage= multer.diskStorage({
destination: (req,file,cb)=>{
cb(null,"public")
},
filename: (req,file,cb)=>{
console.log(file);
cb(null, Date.now()+'-'+file.originalname);
}
})
app.use( bodyParser.urlencoded({ extended: true }) );
const uploads= multer({storage:storage})
app.post('/upload', uploads.single('image'), (req, res){
res.sendFile(req.file) // just send back json data of file that is uploaded
})
app.get('/',(req,res) =>{
res.sendFile(path.resolve(__dirname,'./index.html'))
});
app.listen(8000, ()=> console.log('Server Running at port: 8000'))
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="image">
<input type="submit">
</form>
</body>
</html>
I've also created a 'public' folder for storing files. Tried all possible ways available, read official document, watched videos but I'm unable to get it right. When I'm sending a post request I'm able to get data as req.body but I'm not getting req.file, I want to take the file that is uploaded in post request and save it in public folder.
try setting up destination path with path module, like on the GET route below.
try this:
const express = require('express')
const multer = require('multer')
const path = require('path')
const bodyParser = require('body-parser')
const app = express()
const storage = multer.diskStorage({
destination: (req, file, cb) => {
cb(null, path.join(__dirname, 'public'))
},
filename: (req, file, cb) => {
cb(null, Date.now() + '-' + file.originalname);
}
})
app.use(bodyParser.urlencoded({
extended: true
}));
const uploads = multer({
storage: storage
})
app.post('/upload', uploads.single('image'), (req, res) => {
console.log('uploaded:', req.file);
res.sendFile(req.file.path);
// or
//res.download(req.file.path);
})
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'index.html'))
});
app.listen(8000, () => console.log('Server Running at port: 8000'))
Essentially, what I have is a form where a user will upload a CSV file.
<form action="/upload" method="POST" enctype="multipart/form-data">
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile" name="file" required>
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
<input type="submit" class="btn btn-primary btn-block">
</form>
FYI: I'm using getbootstrap.com as my style sheet.
Now, the form sends a POST request to /upload which is where my node.js code is. What I need is for the server to parse this CSV file and extract the data. I've got no idea what to do as all the different NPM packages such as Multer are using a system where the save the file locally and then parse it.
Edit: Forgot to mention this, but temporary local CSV hosting is not an option.
I need the client to upload server to process it and push to a DB, can't save the file locally anywhere.
Edit 2: I've used multer and the memory processing option and have gotten the following.
const express = require("express");
const app = express();
var bodyParser = require("body-parser");
var multer = require('multer');
var storage = multer.memoryStorage();
var upload = multer({ storage: storage });
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(express.static("public"));
app.get("/", function(req, res) {
response.sendFile(__dirname + "/views/index.html");
});
app.post("/upload", upload.single('file'), async (req, res) => {
res.send(req.file)
});
const listener = app.listen(process.env.PORT, function() {
console.log("Your app is listening on port " + listener.address().port);
});
Now once I upload the file, I'm getting the following response (this is what req.file is).
{"fieldname":"file","originalname":"tech.csv","encoding":"7bit","mimetype":"application/octet-stream","buffer":{"type":"Buffer","data":[67,76,65,83,83,32,73,68,44,84,69,67,72,32,35,44,70,73,82,83,84,32,78,65,77,69,44,76,65,83,84,32,78,65,77,69,13,10,54,79,44,54,79,48,49,44,65,110,105,115,104,44,65,110,110,101]},"size":56}
So It's pretty clear that our data happens to be
67,76,65,83,83,32,73,68,44,84,69,67,72,32,35,44,70,73,82,83,84,32,78,65,77,69,44,76,65,83,84,32,78,65,77,69,13,10,54,79,44,54,79,48,49,44,65,110,105,115,104,44,65,110,110,101
but how do I process that? The csv file data was
CLASS ID,TECH #,FIRST NAME,LAST NAME
6O,6O01,Anish,Anne
So how do I go from the information provided in the buffer data attribute to the actual data?
All you have to use is Multer. Multer will return a buffer object which you can then make a string with the .toString() attribute.
Code:
const express = require("express");
const app = express();
var bodyParser = require("body-parser");
var multer = require('multer');
var storage = multer.memoryStorage();
var upload = multer({ storage: storage });
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(express.static("public"));
app.get("/", function(request, response) {
response.sendFile(__dirname + "/views/index.html");
});
app.post("/upload", upload.single('file'), async (req, res) => {
var b = req.file["buffer"]
console.log(b.toString())
res.send(b.toString())
});
const listener = app.listen(process.env.PORT, function() {
console.log("Your app is listening on port " + listener.address().port);
});
I am creating an app using Node, Express and Handlebars and multer for uploading images. Every time I submit the form, req.file is undefined. I've spent the entire day troubleshooting but can't figure out what I'm doing wrong.
Router File:
const express = require('express');
const router = express.Router();
const multer = require('multer');
const mongoose = require('mongoose');
const path = require('path');
const methodOverride = require('method-override');
//Set Storage Engine
const storage = multer.diskStorage({
destination: './public/uploads/images',
filename: function (req, file, cb) {
cb(null, file.fieldname + '-' + Date.now() +
path.extname(file.originalname));
}
});
const upload = multer({
storage: storage
}).single('featuredImage');
//Change Featured Image - POST
router.post('/saveImage/:id', (req, res) => {
console.log(req.file);
//removed the rest of the code to keep it simple. req.file here is always undefined.
});
Form
<form action="/saveImage/{{pitch.id}}" method="POST" enctype="multipart/form-data">
<div class="form-group">
<label for="featuredImage">Featured Image</label>
<input type="file" name="featuredImage" id="featuredImage">
</div>
<input type="submit" value="SAVE">
</form>
app.js these requires are in the app.js file.
const express = require('express');
const exphbs = require('express-handlebars');
const path = require('path');
const passport = require('passport');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const flash = require('connect-flash');
const session = require('express-session');
const methodOverride = require('method-override');
const nodemailer = require('nodemailer');
//Set StaticFolder
app.use(express.static(path.join(__dirname, 'public')));
You need to add upload.single('featuredImage') as middleware for the respective route as follows.
const upload = multer({storage: storage});
//Change Featured Image - POST
router.post('/saveImage/:id',upload.single('featuredImage'), (req, res) => {
console.log(req.file);
//removed the rest of the code to keep it simple. req.file here is always undefined.
});
In my case it was issue with image size. I resolved it with defining multer limit as follows:
const upload = multer({ storage: storage, limits: { fieldSize: 10 * 1024 * 1024 } }); //10MB
Took me ages to figured out.
Maybe this can help someone
Please refer to this question. It has answer you are looking for.
node js multer file upload not working. req.file and req.files always undefined
You have to pass middleware
router.post('/saveImage/:id', upload.single('featuredImage'), (req, res) => {
console.log(req.file);
});
At first I was having the same issue! But when I added this :
const { storage } = require ('debug/src/browser');
... it worked.
This is my multer code :
const { storage } = require('debug/src/browser');
const multer = require('multer');
const MINE_TYPES = {
'image/jpg' : 'jpg',
'image/jpeg': 'jpeg',
'image/png':'png'
}
const Storage = multer.diskstorage({
destination: (req, file, callback)=>{
callback(null, "public/images/articles")
},
filename: (req, file, callback) => {
var name = Math.floor(Math.random() * Math.floor(15258652325)).tostring()
name = Math.floor(Math.random() * Math.floor(15258652325)).toString();
name = Math.floor (Math.random() * Math.floor(15258652325)).toString();
name = Math.floor(Math.random() * Math.floor(15258652325)).tostring();
name = Math.floor(Math.random() * Math.floor
(15258652325)).toString();
name += Date.now();
const extension = MINE_TYPES[file.mimetype];
name += extension;
callback(null,name);
module.exports = multer({ storage: Storage)).
single('image');
I was facing the same issue and you can solve it by following these steps:
1- First add these line in your server.js or index.js root file
app.use(express.json());
app.use(express.urlencoded({
extended: true,
})
);
2- Create a folder name middleware and inside it create a file name upload.js or any name that you want.
3- Place the following code in upload.js file
const multer = require("multer");
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, "public/");
},
filename: function (req, file, cb) {
const imgName = file.originalname;
cb(null, imgName );
},
});
const upload = multer({
storage: storage,
});
module.exports = upload;
4- Now you can use this middleware in any route. For example:
const upload = require("../middlewares/fileUpload");
router.route("/send").post(upload.single("profile"),
((req,res) => {
*your controller logic here*
});
**Note: Here profile is the name of the file key that you are sending**
Use this:
var fileupload = require("express-fileupload");
app.use(fileupload());
I am using :
"ejs": "^2.5.6",
"express": "^4.14.0",
"express-validator": "^3.2.0",
"multer": "^1.3.0",
My form is :
<form id="offer-form" role="form" enctype="multipart/form-data" action="/subfolder/86" method="POST">
<input type="text" name="name"/>
<input type="file" name="images"/>
<input type="file" name="images"/>
<button type="submit">Submit</submit>
</form>
My server route:
var path = require('path');
var express = require('express');
var bodyParser = require('body-parser');
var expressValidator = require('express-validator');
var osmodule = require('../../osmodule');
var Multer = require('multer');
var request = require('request');
const multer = Multer({
storage: Multer.memoryStorage(),
limits: {
fileSize: 5 * 1024 * 1024 // no larger than 5mb, you can change as needed.
}
});
//Adding a new subfolder
app.post('/subfolder/:id', multer.array({ name: 'images', maxCount: 6 }), expressValidator, function (req, res, next) {
console.log("Form Submitted");
}).use(function (req, res, next) {
res.setHeader('Content-Type', 'text/plain');
res.status(404).send('Not Found ! ');
});
Normally this code should print on the console the message
Form submitted
but the server is receiving nothing not even
Not Found
I have just noticed the problem is with using multer and expressValidator. If I remove expressValidator, it is working but if I add it, it is not working. I need expressValidator to validate user data. Is there any other validator which will accept to be used with multer?
I think this might be due to the validator not being initialize properly.
Try the following by adding the following two lines before the app.post.
INIT
app.use(bodyParser.json()); //To enable post request over node api.
app.use(expressValidator([options])); // this line must be immediately after any of the bodyParser middlewares!
Then you configure your validation inside the app.post
req.checkBody('postparam', 'Invalid postparam').notEmpty().isInt();
See all the available options
Remember to remove expressValidator from the current app.post method above
I found the solution of using both of these middlewares, I just called the before the action and called the express-validator after calling multer:
var path = require('path');
var express = require('express');
var bodyParser = require('body-parser');
var expressValidator = require('express-validator');
var osmodule = require('../../osmodule');
var Multer = require('multer');
var request = require('request');
const multer = Multer({
storage: Multer.memoryStorage(),
limits: {
fileSize: 5 * 1024 * 1024 // no larger than 5mb, you can change as needed.
}
});
app.get('/home',function(req,res){
console.log("Welcome Brother");
})
.use(multer.array({ name: 'images', maxCount: 6 });
.use(expressValidator);
.post('/subfolder/:id', function (req, res, next) {
console.log("Form Submitted");
}).use(function (req, res, next) {
res.setHeader('Content-Type', 'text/plain');
res.status(404).send('Not Found ! ');
});
When i send a file to /upload, from the terminal I can see that the code is blocked at form.parse(req... On the Internet I read that this is because I use bodyParser(), and people suggested to do this:
delete express.bodyParser.parse['multipart/form-data'];
however when I do that my code crashes since parse is null.
Anyone has any idea on how to get file upload working only in /upload and possibly with formidable?
Thanks.
This is my app.js:
'use strict';
var express = require("express");
var async = require("async");
var http = require('http');
var url = require("url");
var qs = require("querystring");
var fs = require("fs");
var formidable = require("formidable");
var mime = require("mime");
var app = module.exports = express();
app.configure(function () {
app.set("views", __dirname + "/views");
app.set("view engine", "ejs");
app.engine("html", ejs.renderFile);
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.cookieParser("abc"));
app.use(express.static(__dirname + "/static"));
app.use(app.router);
app.use(express.limit('5mb'));
});
app.post('/upload', storage.upload);
This is my code storage.js:
'use strict';
var async = require('async');
var formidable = require('formidable');
var fs = require('fs');
var util = require('util');
var api = require('./common');
exports.upload = function (req, res) {
console.log("I am here");
var form = new formidable.IncomingForm(),
files = [],
fields = [];
form.uploadDir = "./uploads";
form
.on('field', function (field, value) {
console.log(field, value);
fields.push([field, value]);
})
.on('error', function (err) {
res.writeHead(200, {'content-type': 'text/plain'});
res.end('error:\n\n'+util.inspect(err));
})
.on('file', function (field, file) {
console.log(field, file);
files.push([field, file]);
})
.on('aborted', function (err) {
console.log("user aborted upload");
})
.on('end', function () {
console.log('-> upload done');
res.writeHead(200, {'content-type': 'text/plain'});
res.write('received fields:\n\n '+util.inspect(fields));
res.write('\n\n');
res.end('received files:\n\n '+util.inspect(files));
});
form.parse(req);
};
If you want to use formidable then, remove app.use(express.bodyParser());
& add app.use(express.json());app.use(express.urlencoded());
Connect 3.0
This solution worked for me, it might be helpful for other dev.
Have you seen the example on github: https://github.com/visionmedia/express/blob/master/examples/multipart/index.js
I've modified it to run on Express 3.x and it seems to work smoothly:
var express = require('express');
var fs = require('fs');
var app = express();
var format = require('util').format;
// bodyParser in connect 2.x uses node-formidable to parse
// the multipart form data.
app.use(express.bodyParser())
app.get('/', function(req, res){
res.send('<form method="post" enctype="multipart/form-data">'
+ '<p>Title: <input type="text" name="title" /></p>'
+ '<p>Image: <input type="file" name="image" /></p>'
+ '<p><input type="submit" value="Upload" /></p>'
+ '</form>');
});
app.post('/', function(req, res, next){
// the uploaded file can be found as `req.files.image` and the
// title field as `req.body.title`
res.send(format('\nuploaded %s (%d Kb) to %s as %s'
, req.files.image.name
, req.files.image.size / 1024 | 0
, req.files.image.path
, req.body.title));
});
if (!module.parent) {
app.listen(3000);
console.log('Express started on port 3000');
}