Started learning nodejs recently, and am currently trying to perform a task that involves file upload.. With the aid of multer documentation and Youtube video, was able to set up the module and middleware and file path etc. but for some reasons, the file don't upload. i can see the file object in my console, but my browser keeps loading.
Would love if someone can help point my errors to allow the file upload to specifies folder, and also give me a tip on how to trap errors not rendered on the error file Thank you. Below are my codes:
register.hbs
{{>header}}
<body>
<h1>Hello World</h1>
<h2>{{this.title}}</h2>
<div class="mb-3">
{{#each data}}
<div class="alert alert-danger">{{msg}}</div>
{{/each}}
</div>
<form action="" method="POST" enctype="multipart/form-data">
<label for="exampleInputEmail1" class="form-label">First Name</label>
<input type="text" class="form-control" name="fname" aria-describedby="emailHelp">
<div>
</div>
</div>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Last Name</label>
<input type="text" class="form-control" name="lname" aria-describedby="emailHelp">
</div>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" name="email" aria-describedby="emailHelp">
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" name="pwd">
</div>
<div class="mb-3">
<label for="exampleInputFile" class="form-label">Select Image</label>
<input type="file" class="form-control" name="image" id="image">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</body>
</html>
router file
var express = require('express');
var router = express.Router();
const {check,validationResult}= require('express-validator');
const multer=require('multer')
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'public/uploads')
},
filename: function (req, file, cb) {
const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9)
cb(null, file.fieldname + '-' + uniqueSuffix)
}
})
var upload = multer({
storage: storage,
limits:{
fieldSize:1024*1024*100
} })
router.post('/register',upload.single('image'), [
check('fname')
.isLength({ min: 8 })
.withMessage('First name must be minimum of 8 characters')
.isAlpha()
.withMessage('first name must contain only alphabeth'),
check('lname').isLength({min:8}),
check('email').isEmail()
], (req, res,next)=>{
const errors = validationResult(req)
if (!errors.isEmpty()) {
//const data=errors.array();
console.log(errors)
res.render('users/register',{title:"Create Account", data:errors.array()});
//return res.status(422).json({errors: errors.array()})
}
console.log(req.file)
const fname = req.body.fname
const lname = req.body.lname
const email = req.body.email
console.log(req.errors)
// res.render('users/register');
})
Not really sure about your case, in my case I using multer like this:
I seperate multer to a file multerUploaderMiddleware.js
const multer = require("multer");
const path = require("path");
const util = require("util");
//Change this to diskStorage like your code above
//I use memory storage
const multerStorage = multer.memoryStorage()
function chapterIsExisted(req) {
// My custom error handling function
return (
Chapter
.findOne({ comicSlug: req.params.slug, chapter: `chapter-${req.body.chapter}` })
.then(chapterExisted => {
if (chapterExisted == null) { return false }
return true
}))
};
// This filter function for error handling
const filter = async (req, file, cb) => {
//as I remember if you want the file to success
// then return cb(null, true)
// else return cb(null, false)
if (req.check == 'nocheck') {
return cb(null, true)
} else {
var check = await chapterIsExisted(req)
if (check == false) {
cb(null, true)
} else {
let errorMess = `chapter ${req.body.chapter} existed`
return cb(errorMess, false);
}
}
};
const upload = multer({
storage: multerStorage,
fileFilter: filter
}).single("image", 200);
// Turn this middleware function into promise
let multipleUploadMiddleware = util.promisify(upload);
module.exports = multipleUploadMiddleware;
And In my route controller:
// get the exported function
const MulterUploadMiddleware =
require("../middlewares/MulterUploadMiddleWare");
class S3UploadController {
// [POST] / stored /comics /:slug /S3-multiple-upload
multipleUpload = async (req, res, next) => {
// The function you exported from middleware above
MulterUploadMiddleware(req, res)
.then(async () => {
//when the upload is done you get some data back here
Console.log(req.file)
// do stuff
})
.then(() => res.redirect('back'))
.catch(err => next(err))
})
}
Related
I am working on a blogging application (click the link to see the GitHub repo) with Express, EJS and MongoDB.
I am trying to introduce an add post image feature. Being quite new to Express, I am puzzled about the problem I have ran into.
The add post form:
<form action="/dashboard/post/add" method="POST" enctype="multipart/form-data" class="mb-0">
<div class="form-group">
<input type="text" class="form-control" name="title" value="<%= typeof form!='undefined' ? form.titleholder : '' %>" placeholder="Title" />
</div>
<div class="form-group">
<input type="text" class="form-control" name="excerpt" value="<%= typeof form!='undefined' ? form.excerptholder : '' %>" placeholder="Excerpt" />
</div>
<div class="form-group">
<textarea rows="5" class="form-control" name="body" placeholder="Full text"><%= typeof form!='undefined' ? form.bodyholder : '' %></textarea>
</div>
<label for="postimage">Upload an image</label>
<div class="form-group">
<input type="file" name="postimage" id="postimage" size="20">
</div>
<div class="form-group d-flex mb-0">
<div class="w-50 pr-1">
<input type="submit" value="Add Post" class="btn btn-block btn-md btn-success">
</div>
<div class="w-50 pl-1">
Cancel
</div>
</div>
</form>
In the controller my addPost() methos looks like this:
const Post = require('../../models/post');
const { validationResult } = require('express-validator');
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, './uploads/images')
},
filename: function (req, file, cb) {
cb(null, file.fieldname + '-' + Date.now() + '.png')
}
});
const upload = multer({ storage: storage }).single('postimage');
exports.addPost = (req, res, next) => {
upload(function(err) {
if (err) {
console.log("There was an error uploading the image.");
}
res.json({
success: true,
message: 'Image uploaded!'
});
})
var form = {
titleholder: req.body.title,
excerptholder: req.body.excerpt,
bodyholder: req.body.body
};
const errors = validationResult(req);
const post = new Post();
post.title = req.body.title;
post.short_description = req.body.excerpt;
post.full_text = req.body.body;
if (!errors.isEmpty()) {
req.flash('danger', errors.array())
res.render('admin/addpost', {
layout: 'admin/layout',
website_name: 'MEAN Blog',
page_heading: 'Dashboard',
page_subheading: 'Add New Post',
form: form
});
} else {
post.save(function(err) {
if (err) {
console.log(err);
return;
} else {
req.flash('success', "The post was successfully added");
req.session.save(() => res.redirect('/dashboard'));
}
});
}
}
I alse have const multer = require("multer"); at the top (of the controller).
The "Add New Post" form worked fine until I tried to add this upload feature. The code I currently have throws this error:
Cannot read property 'transfer-encoding' of undefined
at hasbody (C:\Path\To\Application\node_modules\type-is\index.js:93:21)
What am I doing wrong?
You are missing req and res inside your upload(), try adding those two like
upload(req, res, function (err) {
if (err) {
console.log("There was an error uploading the image.");
}
res.json({
success: true,
message: 'Image uploaded!'
});
})
I have different form inputs to upload in a single page on how to upload using multer?
app.js :
const multer = require('multer');
const fileStroge = multer.diskStorage({
destination: (req, file,cb)=>{
cb(null, 'upload');
},
filename: (req, file, cb) =>{
cb(null, file.originalname);
}
});
const fileFilter = (req, file, cb)=>{
if(file.mimetype == 'application/octet-stream'){
cb(null,true);
}else{
cb(null,false);
}
};
app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({ extented: true}));
app.use(multer({ storage: fileStroge, fileFilter: fileFilter}).single('filename'));
// app.use(multer({ storage: fileStroge, fileFilter: fileFilter}).single('filenameS'));
below is my js file
user.js:
exports.uploadedData = (req, res)=>{
const file = req.file;
// console.log(file);
if( file == undefined){
res.send("you can upload excel sheet only");
}
readXlsxFile(req.file.path).then((rows) =>{
var database = mysql.createConnection(
{ host: 'localhost', user: 'root', password: 'ilensys#123', database: 'harness_db'}
);
var query = database.connect(function(err) {
if (err) throw err;
console.log("Connected!");
var sql = "INSERT IGNORE INTO harnes_detials (id, item_des, harness_drw_pin, harness_type, harness_conn_type, mating_crimp, design_volt, connectors_mating_mfg, mating_connector_part_no, design_current, gauge, connector_type, connect_gender, no_pins, no_rows, connectors, manufacture, contact_rating, voltage_rating, maximum_temp, connector_orientation, d_connector_type, d_connector_gender, d_mating_connector_part_no, d_connector_mating, d_connectors_mating_mfg, d_no_pins, d_no_rows,d_connector, d_manufacture, d_contact_rating, d_voltage_rating, d_maximum_temp, d_connector_orientation, d_guage, d_mating_crimp, createdAt, updatedAt) VALUES ? ";
var newSql = "LOAD DATA INFILE 'req.file.path' INTO TABLE harnes_detials";
var values = rows.slice(1);
// console.log(values);
database.query(sql, [values], function (err, result) {
// console.log(result);
if(err){
console.log(err);
}else{
res.render("success");
console.log( "row inserted: "+ result.affectedRows);
}
});
});
});
};
exports.uploadedSourceData = (req, res)=>{
const file = req.file;
// console.log(file);
if( file == undefined){
res.send("you can upload excel sheet only");
}
readXlsxFile(req.file.path).then((rows) =>{
var database = mysql.createConnection(
{ host: 'localhost', user: 'root', password: 'ilensys#123', database: 'harness_db'}
);
var query = database.connect(function(err) {
if (err) throw err;
console.log("Connected!");
var sql = "INSERT IGNORE INTO matingsources (id, mating_source_connectors,connector_type, source_connectors, gauge) VALUES ? ";
var newSql = "LOAD DATA INFILE 'req.file.path' INTO TABLE matingsources";
var values = rows.slice(1);
console.log(values);
database.query(sql, [values], function (err, result) {
console.log(result);
if(err){
console.log(err);
}else{
res.render("success");
console.log( "row inserted: "+ result.affectedRows);
}
});
});
});
};
below is my ejs file with inputs :
<form class="needs-validation" action="/uploadData" method="post" enctype="multipart/form-data" novalidate>
<div class="custom-file mb-3">
<input type="file" class="custom-select custom-file-input" id="filename" name="filename" required>
<label class="custom-file-label" for="customFile">Choose file</label>
<div class="valid-feedback">Looks Good!</div>
<div class="invalid-feedback">need to upload a file!</div>
</div>
<div class="mt-3 text-center">
<button type="submit" class="btn btn-primary">Upload</button>
<a class="btn btn-secondary" href="javascript:history.back()" role="button">Cancel</a>
</form>
<form class="needs-validation" action="/uploadSourceData" method="post" enctype="multipart/form-data" novalidate>
<div class="custom-file mb-3">
<input type="file" class="custom-select custom-file-input" id="filenameS" name="filenameS" required>
<label class="custom-file-label" for="customFile">Choose file</label>
<div class="valid-feedback">Looks Good!</div>
<div class="invalid-feedback">need to upload a file!</div>
</div>
<div class="mt-3 text-center">
<button type="submit" class="btn btn-primary">Upload</button>
<a class="btn btn-secondary" href="javascript:history.back()" role="button">Cancel</a>
</form>
its works fine with the first input upload option but with I upload from second input from other input its says :
multererror: unexpected field
but when I comment alternatively its works for both:
app.use(multer({ storage: fileStroge, fileFilter: fileFilter}).single('filename'));
// app.use(multer({ storage: fileStroge, fileFilter: fileFilter}).single('filenameS'));
but how to work with two different inputs uploads on the same page?? please help ??
Change the name attribute of the second input element to:
<input type="file" class="custom-select custom-file-input" id="filenameS" name="filename" required>
so that both input's have the same name attribute and then just use the multer route with 'filename'
Sending form data with text content to Nodejs server from vuejs front end but the file is never uploaded to the server. I had been stack for a while now. Here is my detailed front and backend code:
Front End
//Front end VueJS
Upload form component
<template>
<div class="container">
<form v-on:submit.prevent="addMember" method="post">
<div class="row">
<div class="col-sm-10 col-md-10 col-lg-10">
<div class="form-group">
<label>Title<span class="required-field">*</span>:</label>
<input type="text" class="form-control" v-model="member.title" name="title" v-validate="'required|min:10'">
<div class="help-block alert alert-danger" v-show="errors.has('title')">
{{errors.first('title')}}
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-10 col-md-10 col-lg-10">
<div class="form-group">
<label>Full Name<span class="required-field">*</span>:</label>
<input type="text" class="form-control" v-model="member.fullname" name="fullname" v-validate="'required|min:10'">
<div class="help-block alert alert-danger" v-show="errors.has('fullname')">
{{errors.first('fullname')}}
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-10 col-md-10 col-lg-10">
<div class="form-group">
<label>Passport Photo
<input type="file" id="file" ref="photo" v-on:change="handleFileUpload()"/>
</label>
</div>
</div>
</div>
</form>
<div class="row">
<div class="col-sm-10 col-md-10 col-lg-10">
<div class="form-group">
<button class="btn btn-info btn-lg pull-right">Save</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name:'CreateMember',
data(){
return{
member:{},
photo:'',
}
},
},
methods: {
handleFileUpload(){
this.coverimage = this.$refs.photo.files[0]
},
addMember(){
this.$validator.validateAll().then(()=>
{
let formData = new FormData();
formData.append('file', this.photo);
let rawData = this.member
rawData = JSON.stringify(rawData)
formData.append('data',rawData)
this.axios.post('/members',this.member,{
'content-type':'multipart/form-data'
}).then((resp)=>{
console.log(resp.data)
//this.$router.push({name: 'members'})
}).catch((error)=>{
console.log(error)
})
});
}
}
}
</script>
Back End (Nodejs and Express)
**routes/members.js**
var express = require('express');
var router = express.Router();
//Require Controller Modules
var controller = require('../controllers/MembersController');
var auth = require('../middleware/auth');
const path = require('path');
const multer = require('multer');
//Define file storage engine
const storage = multer.diskStorage({
destination:'public/uploads/',
filename: (req,file,cb)=>{
cb(null,file.fieldname+'-'+Date.now()+path.extname(file.originalname));
}
});
//Filter uploaded file and only upload file types of enumerated format
const fileTypeFilter = (req, file, cb)=>{
if(file.mimetype==='image/jpeg'||file.mimetype==='image/jpg'|| file.mimetype==='image/png'){
cb(null, true);
}
else{
cb(new error('Invalid Image Format'), false);
}
}
const upload = multer({storage:storage,
limits:
{
fileSize:1024*1024*1000
},
filefilter:fileTypeFilter
});
//Save new member to the database
router.post('/members', upload.single('photo'),auth,controller.createMember);
Controllers/MembersController.js
var express = require('express');
var router = express.Router();
const fs = require('fs');
const Model = require('../models/index');
const Member = Model.sequelize.import('../models/member');
//createMember Controller Method
exports.createMember = function(req, res, next) {
//Check if the cover image is attached
if(!req.file)
{
return res.status(400).json({message:'Attach Photo!'}); //The request is returning this response, meaning the file is never uploaded. And the file actually is not being uploaded
}
Member.create({
title: req.body.title,
fullname : req.body.fullname,
photo : req.body.req.file.path
}).then(member=>{
res.json(member);
}).catch((error)=>{
return res.json({status:500,error:error});
});
};
Removing file from request the rest of the data is saved into the database as expected
Model
//Models/member.js
'use strict';
module.exports = (sequelize, DataTypes) => {
var Member = sequelize.define('Member', {
fullname: DataTypes.STRING,
photo: DataTypes.STRING
}, {});
Member.associate = function(models) {
// associations can be defined here
};
return Member;
};
What may be doing wrong. The upload directory is empty. please help me out.
I have just started building this example of using multer with node js. I built a separate project which actually runs fine, but when I copied over the same setting making minor changes to routes on like from app.get to router.get, I am getting the error:
TypeError: Cannot read property 'filename' of undefined
here is my code for the route:
router.post('/userprofilepic', ensureAuthenticated, (req, res) => {
upload(req, res, (err) => {
if (err) {
res.render('/user/userdashboard', {
msg: err
});
} else {
const newImage = {
imageName: req.file.filename,
image_caption: req.body.image_caption,
member_id: req.user.member_id
}
new Image(newImage)
.save()
.then(image => {
req.flash('success_msg', 'Image added');
res.redirect('/user/userdashboard');
})
.then(resize => {
let imgHeight = 150;
let imgWidth = 150;
sharp(req.file.path)
.blur(.3)
.toFile('public/thumbs/blurred_' + req.file.originalname, function (err) {
if (!err) {
req.flash('success_msg', 'Thumbnail created');
//res.redirect('/');
}
});
})
.catch(error => {
console.log(error);
});
}
});
});
This is my multer configuration:
// Set storage engine
const storage = multer.diskStorage({
destination: './public/uploads/',
filename: function (req, file, cb) {
cb(null, req.user.member_id + '_' + Date.now() + '_' + file.originalname);
}
});
// Init upload
const upload = multer({
storage: storage
}).single('imageName');
//load user model
require('../models/User');
const User = mongoose.model('users');
//load user profile model
require('../models/Profile');
const Profile = mongoose.model('profiles');
// Load images model
require('../models/Images');
const Image = mongoose.model('images');
and finally my form:
<form action="/user/userprofilepic" method="POST" enctype="multipart/form-data">
<div class="form-group">
<img id="blah" src="#" alt="your image" height="300" />
</div>
<div class="form-group">
<label for="exampleFormControlFile1">Example file input</label>
<input type="file" class="form-control-file" name="imageName" id="imageName">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Image Caption</label>
<input type="text" class="form-control" name="image_caption">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<input type="text" class="form-control" name="member_id" value="{{user.member_id}}" hidden>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
I tried console.log(req.file) and it's undefined. For the life of me I am unable to understand what I did wrong.
Please advise.
Figured it out...it was my mistake, in my server. js I had initialized an upload method which was overriding the multer upload function and hence no filename.
I Want to upload a image on my blog post and there is an error, image is alredy in the folder but when i see the database there is noimage.png set as default ...
Im using Multer , there is my code :
Addpost.ejs
<% include ./partials/header %>
<form method="POST" action="/posts/add" enctype="multipart/form-data">
<div class="form-group">
<label>Title</label>
<input class="form-control" name="title" type="text">
</div>
<div class="form-group">
<label>Category</label>
<select class="form-control" name="category">
<% categories.forEach(function(category){ %>
<option value="<%= category.title %>"><%= category.title %></option>
<% }) %>
</select>
</div>
<div class="form-group">
<label>Body</label>
<textarea class="form-control" name="body"></textarea>
</div>
<div class="form-group">
<label>Main Image</label>
<input class="form-control" name="file" type="file">
</div>
<div class="form-group">
<label>Author</label>
<select class="form-control" name="author">
<option value="Arsen Cenko">Arsen Cenko</option>
<option value="John Doe">John Doe</option>
</select>
</div>
<input class="btn btn-default" name
="submit" type="submit" value="save">
</form>
<script src="/app.js"></script>
PostSchema :
var mongoose = require("mongoose")
var postSchema = new mongoose.Schema({
title: String,
created: {type: Date, default: Date.now},
category: [
{
type: mongoose.Schema.Types.ObjectId,
ref: "Category"
}
],
body: String,
file: String })
module.exports = mongoose.model("Post", postSchema);
Post.js Route
var express = require("express");
var router = express.Router();
var Post = require("../models/post");
var Category = require("../models/category");
var path = require('path');
var multer = require('multer');
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, './public/images/uploads/')
},
filename: function (req, file, cb) {
cb(null, Date.now() + path.extname(file.originalname))
} });
var upload = multer({ storage: storage });
router.get("/add", function(req, res) {
Category.find({}, function(err, categories){
if(err){
console.log(err);
} else{
res.render("addpost", {
title: "Add Post",
categories: categories
})
}
})
})
router.post("/add", upload.single('image'), function(req, res){
var title = req.body.title;
var category = req.body.category;
var body = req.body.body;
var author = req.body.author;
if(req.files && req.files.image){
var imageOriginalName = req.files.image.originalname;
var imageName = req.files.image.fieldname;
var imageMime = req.files.image.mimetype;
var imagePath = req.files.image.path;
var imageExt = req.files.image.extension;
var imageSize = req.files.image.size;
} else {
var imageName = "noimage.png";
}
var newPost = {title:title, category:category, body:body, author:author, image:imageName};
Post.create(newPost, function(err, newPost){
if(err){
console.log("Error");
} else{
res.redirect("/");
}
})
})
Thanks :)
Hey according to documentation
https://github.com/expressjs/multer
using upload.single('image') will get your file in "req.file" not in "req.files"
I think this is the reason your if case fails and jumps to else case. You cannot access it like req.file.image.filename you can simply access it via req.file.filename. Since it is already a "single" file. try console logging the req.file to know what you are getting.
update I think mistake is in your html
<input class="form-control" name="file" type="file">
should be
<input class="form-control" name="image" type="file">
the name attribute of the html should be same as the string in upload.single.
So in your case
upload.single('image')
Now you will receive file in req.file.
Hope it helps.