The following code works as expected to upload and retrieve files:
// Mongo URI
const mongoURI = 'mongodbconnstring';
// // Create mongo connection
const conn = mongoose.createConnection(mongoURI);
// // Init gfs
let gfs;
conn.once('open', () => {
gfs = new mongoose.mongo.GridFSBucket(conn.db, {
bucketName: 'Uploads'
});
});
// Create storage engine
const storage = new GridFsStorage({
url: mongoURI,
file: (req, file) => {
return new Promise((resolve, reject) => {
const filename = file.originalname; //+ Date.now();
const fileInfo = {
filename: filename,
bucketName: 'Uploads'
};
resolve(fileInfo);
});
}
});
const upload = multer({ storage });
// // #route POST /upload
// // #desc Uploads file to DB
routerUpload.post('/upload', upload.single('files'), (req, res) => {
//res.json({file: req.file})
res.redirect('/');
});
// #route GET /files
// #desc Display all files in json
routerUpload.get('/files', (req, res) => {
gfs.find().toArray((err, files) => {
// Check if files
if (!files || files.length === 0) {
return res.status(404).json({
err: 'No files exist'
});
}
return res.json(files);
});
});
// #route GET /files/:filename
// #desc Display single file object
routerUpload.get('/files/:filename', (req, res) => {
const file = gfs
.find({
filename: req.params.filename
})
.toArray((err, files) => {
if (!files || files.length === 0) {
return res.status(404).json({
err: 'No file exists'
});
}
gfs.openDownloadStreamByName(req.params.filename).pipe(res);
});
});
However, when I call the code below to delete the file by ID:
// #route DELETE /files/:id
// #desc Delete file
routerUpload.post('/files/del/:id', (req, res) => {
gfs.delete(req.params.id, (err, data) => {
if (err) {
return res.status(404).json({ err: err.message });
}
res.redirect('/');
});
});
I get this error in Postman:
{
"err": "FileNotFound: no file with id 5db097dae62a27455c3ab743 found"
}
Can anyone point me in the direction of where I need to go with this? I tried with the delete method instead of post, and even specified the root of the file, but the same error occurs. Thanks!
Have you tried this
// #route DELETE /files/:id
// #desc Delete file
routerUpload.post('/files/del/:id', (req, res) => {
gfs.remove({ _id: req.params.id, root: "uploads" }, (err, gridStore) => {
if (err) {
return res.status(404).json({ err });
}
return;
});
});
However I'm using an old version of express hence receiving this
(node:6024) DeprecationWarning: collection.remove is deprecated. Use deleteOne, deleteMany, or bulkWrite instead.
and
(node:6024) DeprecationWarning: Mongoose: findOneAndUpdate() and findOneAndDelete() without the useFindAndModify option set to false are deprecated
this is due to the version of express, multer and GridFs that I'm using
express: ^4.17.1
multer: ^1.4.2"
multer-gridfs-storage: ^3.3.0
Related
I'm trying to delete a file by its id using gridfs but I get this error when calling the delete API.
Controller :
let gfs;
connect.once("open", () => {
gfs = Grid(connect.db, mongoose.mongo);
gfs.collection("uploads");
});
exports.deleteFile = (req, res) => {
try {
gfs.remove(
{ _id: req.params.id, root: "uploads" },
(err, gridStore) => {
if (err) {
return res.status(404).send({ message: err });
} else {
return res.send({ message: "File deleted successfuly" });
}
}
);
} catch (error) {
return res.status(500).send({
message: error.message,
});
}
};
exports.deleteFileByFilename = async (req, res, next) => {
const file = await gfs.files.findOne({ filename: req.params.filename });
const gsfb = new mongoose.mongo.GridFSBucket(conn.db, { bucketName: 'uploads' });
gsfb.delete(file._id, function (err, gridStore) {
if (err) return next(err);
res.status(200).end();
});
};
// #route DELETE /files/:filename
// #desc Delete file
app.delete('/files/:filename', async (req, res) => {
const file = await gfs.files.findOne({ filename: req.params.filename });
const gsfb = new mongoose.mongo.GridFSBucket(conn.db, { bucketName: 'uploads' });
gsfb.delete(file._id, function (err, gridStore) {
if (err) {
res.status(404).send('no file found')
}
res.status(200).send('deleted successfully')
});
});
On client side:
const delImage = async (fileName) => {
await axios.delete(`http://localhost:5000/files/${fileName}`);
console.log('fileDeleted');
getData(); // reminder to REFETCH the data so that database with deleted file is refreshed
}
I also made a video on this - full file uploads, multiupload, display and delete using MERN stack and NPM Multer thing, in here: https://youtu.be/4WT5nvfXcbs
Docs for the video with full code: https://docs.google.com/document/d/1MxvNNc9WdJT54TpanpFBT6o7WE_7hPAmDhdRNWE8A9k/edit?usp=sharing
I am new to node.js and trying to call an ejs file from server-side js. I am calling both the post and get methods from the client js file. Below is my code.
Client-side js:
function playerlist(){
const button = document.getElementById('playerselection');
//const data={selectedplayers:window.players};
button.addEventListener('click', function() {
console.log(players);
fetch('/FantasyTeam', {method: 'POST',
body: JSON.stringify(players),
headers: {'Content-Type':'application/json'},
})
.then(function(response) {
if(response.ok) {
CallGetMethod();
return;
}
throw new Error('Request failed.');
})
.catch(function(error) {
console.log(error);
});
});
}
function CallGetMethod(){
console.log('Inside CallGetMethod');
fetch('/FantasyTeam', {method: 'GET'})
.then(function(response) {
if(response.ok) {
console.log('Inside response');
return ;
}
throw new Error('Request failed.');
})
.catch(function(error) {
console.log(error);
});
}
**Server-side js:**
app.post('/FantasyTeam', (req, res) => {
const playerlist = req.body;
console.log(playerlist);
sql.connect(dbConfig, {
useNewUrlParser: true
}).then(() => {
// create Request object
console.log("Connected!");
var request = new sql.Request();
//Insert query to FantasyTeam Table with selected players.
request.query("INSERT Query").then(function (err, result)
{
console.log('record added to db');
}).catch(err => {
console.log('Could not insert the record to DB. Exiting now...', err);
process.exit();
});
}
res.sendStatus(201);
}).catch(err => {
console.log('Could not connect to the database. Exiting now...', err);
process.exit();
});
});
app.get('/FantasyTeam', (req, res) => {
// connect to your database
sql.connect(dbConfig, {
useNewUrlParser: true
}).then(() => {
// create Request object
var request = new sql.Request();
request.query("select query"), function (err, result)
{
console.log('records fetched from DB');
//res.send(result);
//res.render(path.resolve(__dirname + "/views/FantasyTeam"),{result});
res.render('FantasyTeam.ejs', { result });
//res.render('FantasyTeam.ejs', { result });
console.log(result.recordset.length);
});
}).catch(err => {
console.log('Could not connect to the database. Exiting now...', err);
process.exit();
});
}) ;
I tried multiple ways to render the FantasyTeam.ejs file. But couldn't succeed.There is no error in code, except that ejs file is not redered. Appreciate any help in this regard.
At first you have set view engine on your node application. Then second step create a views folder on the application root and then create a pages folder in views folder then create all template in your pages folder. views folder needs to be static. finally you can render template from pages folder in views directory. See my example. For more information visit to ejs doc: https://ejs.co/#docs
const express = require('express');
const app = express()
const router = express.Router()
// Setup View Engine and set static folder
app.use(express.static('public'))
app.set('view engine','ejs')
app.set('views','views')
//Controller
router.get('/example',(req,res,next)=>{
res.render('pages/index.ejs',{You Data})
})
I'm currently trying upload images to a database by using Mutler and GridFS - which is successful. But I'm also trying to create a caption via the same form, but saving the data into a different schema. My problem is that on the POST route, it's not saving the data to the Posts schema - but no errors are being returned - but as well as that, I'm not being redirected the index page.
model.js schema for caption data
const mongoose = require('mongoose');
const Schema = mongoose.Schema;
const PostSchema = new Schema({
caption: {
type: String,
},
fileID: {
type: mongoose.Schema.Types.ObjectId,
ref: 'fs' //created by multer gridfs storage
}
});
const Posts = mongoose.model('Posts', PostSchema);
module.exports = { Posts };
app.js
// Middleware
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }))
app.use(methodOverride("_method"));
app.set("view engine", "ejs");
// Mongo URI
const mongoURI = "mongodb://localhost:27017/grid-fs";
// Mongo connection
const connection = mongoose.createConnection(mongoURI, { useNewUrlParser: true });
// Mongoose Schema
const { Posts } = require('./models/model');
// Init gfs
let gfs;
connection.once("open", () => {
// Init stream
gfs = Grid(connection.db, mongoose.mongo);
gfs.collection("uploads");
})
// Create storage engine
const storage = new GridFsStorage({
url: mongoURI,
file: (req, file) => {
return new Promise((resolve, reject) => {
crypto.randomBytes(16, (err, buf) => {
if (err) {
return reject(err);
}
const filename = buf.toString("hex") + path.extname(file.originalname);
const fileInfo = {
filename: filename,
bucketName: "uploads"
};
resolve(fileInfo);
});
});
}
});
const upload = multer({ storage });
app.get("/", (req, res) => {
gfs.files.find().toArray((err, files) => {
// Check if files exist
if (!files || files.length === 0) {
res.render("index", {files: false})
} else {
files.map(file => {
if(file.contentType === "image/jpeg" || file.contentType === "image/png") {
file.isImage = true;
} else {
file.isImate = false;
}
});
res.render('index', {files: files})
}
});
})
app.post('/upload', upload.single('file'), (req, res) => {
console.log(req.file)
const post = new Posts({
caption: req.body.caption,
fileID: req.file.id
});
console.log(req.body.caption)
console.log(req.file.id)
console.log(post)
post.save().then( result => {
res.redirect('/');
}).catch(err => {
res.status(400).send("Unable to save data");
});
});
I refresh the page the image is pushed to the frontend, but when I check the database the caption content is missing - no schema is there:
try this db.getCollectionNames() and check if your collection is there or not if it doesnot exists
try this
Posts.create({
caption: req.body.caption,
fileID: req.file.id
}, (err, data) => {
if (err) res.status(400).send("Unable to save");
else {
res.redirect("/")
}
})
I am using multer package
I have two ways of uploading images to my server one is with Array and the other is using fields.
The only thing that works is the uploadArray for the /status route.. when i'm uploading to /update it gives me this error SyntaxError: Unexpected token < in JSON at position 0.. The controller for the /update is just the same as the postController.js the only difference it that i update fields instead of save new one.
/utils/lib/account.js
const storage = multer.memoryStorage();
// These two image might be available in the req.files depending on what was sent
const upload = multer({storage}).fields([{ name: 'photo', maxCount: 1 }, { name: 'cover', maxCount: 1 }]);
const uploadArray = multer({storage}).array('image', 12);
exports.upload = (req, res, next) => {
upload(req, res, function (err) {
if (err) {
console.log(err);
}
next();
});
};
exports.uploadArray = (req, res, next) => {
uploadArray(req, res, function (err) {
if(err){
console.log(err);
}
next();
});
};
/routes.js
router.route('/status')
.all(helper.verifyToken)
.all(helper.uploadArray)
.get(status.get)
.post(status.new) // file uploads
.delete(status.delete);
router.route('/update')
.all(helper.verifyToken)
.all(helper.upload)
.post(account.update_profile) // file uploads
The only thing that works here is the uploadArray
/postController.js
new:
(req, res) => {
const uri = new DataUri();
const promises = [];
const images = [];
//Get buffer from files
for(let key in req.files){
const obj = req.files[key];
uri.format('.png', obj.buffer);
let uriContent = uri.content;
promises.push(uploadAsync(uriContent)); //upload each image
}
//Init upload
function uploadAsync(buffer){
return new Promise((resolve, reject) => {
cloudinary.v2.uploader.upload(buffer, function(error, result) {
if(error){
reject(error);
}
if(result.url){
images.push(result.url);
resolve(images);
}
});
});
}
Promise.all(promises)
.then(results => {
// Init post model
console.log('test1')
const post = new Post({
post_img: images,
post_description: req.body.description,
post_by: req.body.id,
photoURL: req.body.id,
post_comments: []
});
// Save data
post.save(function(err) {
if(err) {
res.send(err);
}
var leanObject = post.toObject(); // Transform instance to plain JS Object for modification
// Modifications
leanObject['post_by'] = {
_id: leanObject['post_by'],
display_name: req.body.user, // Add current user display name
photo_url: req.body.user_photo
};
res.json({message: 'Success', type: 'success', code: 200, data: leanObject});
});
})
.catch(err => {
console.log(err);
});
},
I’m receiving a 404 Not Found and "Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client" when I attempt to submit a form that has two images uploaded. Neither image is a required field, so when I upload one image (can be either) everything works correctly, and I do not get an error. The issue only occurs when I upload both in one request. Checking my uploads folder, when I get a 404, both images are correctly uploaded.
Here is the code for multer:
const multerOptions = {
storage: multer.memoryStorage(),
fileFilter(req, file, next) {
const isPhoto = file.mimetype.startsWith('image/');
if (isPhoto) {
next(null, true);
} else {
next({ message: 'That filetype isn\'t allowed!' }, false);
}
},
};
export const upload = multer(multerOptions).fields([
{ name: 'avatar' },
{ name: 'accolade' },
]);
export const resize = async (req, res, next) => {
if (!req.files) {
next();
return;
}
Object.keys(req.files).forEach(async (file) => {
const extension = req.files[file][0].mimetype.split('/')[1];
req.body[file] = `${uuid.v4()}.${extension}`;
const uploaded = await jimp.read(req.files[file][0].buffer);
if (file === 'avatar') {
await uploaded.resize(300, jimp.AUTO);
} else if (file === 'accolade') {
await uploaded.resize(30, jimp.AUTO);
}
await uploaded.write(`./public/uploads/${req.body[file]}`);
next();
});
};
Here is the route:
router.post(
'/team-members/add/:id',
authController.authCheck,
userController.isAdmin,
userController.upload,
userController.resize,
userController.validateUser,
catchErrors(userController.addTeamMember),
);
And here are the other middleware methods in the route:
export const authCheck = (req, res, next) => {
(req.isAuthenticated()) ? next() : res.redirect('/login');
};
export const isAdmin = (req, res, next) => {
(req.user.role !== 'admin') ? res.redirect('/dashboard') : next();
};
export const validateUser = (req, res, next) => {
req.checkBody('firstName', 'There must be a first name!').notEmpty();
req.checkBody('lastName', 'There must be a last name!').notEmpty();
req.checkBody('email', 'There must be an email!').notEmpty();
req.checkBody('role', 'A role must be specified!').notEmpty();
const errors = req.validationErrors();
if (errors) {
req.flash('error', errors.map(err => err.msg));
res.redirect('back');
}
next();
};
And finally the function to add a user (it's wrapped in a function that catches errors rather than catching errors in the controller):
export const addTeamMember = async (req, res) => {
const org = await Org.findOne({ _id: req.params.id });
if (org) {
const newUser = new User(req.body);
newUser.organization = org._id;
newUser.invitation = true;
await newUser.save();
await org.update({ $push: { users: newUser } });
const inviteLink = `http://${req.headers.host}/join/${org._id}`;
await send({
user: newUser,
filename: 'invitation',
subject: `Welcome ${newUser.email}`,
inviteLink,
});
req.flash('success', `Yay! An invitation has been sent to ${newUser.email}`);
res.redirect(`/team-members/${org._id}`);
} else {
req.flash('error', 'No organization found!');
req.redirect('back');
}
};
I only get the error when I upload both an avatar and an accolade in one request. If I upload just one in a single request, I get no errors. In both cases, the image(s) are uploaded to the uploads directory I've specified, the user is added to my db, and an email for an invite is fired off. The redirect on success is a single GET request to a view with the same authCheck and isAdmin middlewares.
I've gone through and commented out the portions of code that are not necessary to submit the request (checkAuth, isAdmin, validateUser, and sending the email) but as long as I upload two in one request I get an error. Any ideas where I'm going wrong?
Posting the answer in case this ever trips anyone else up.
The next() call is inside the forEach block in the resize method, thus it is being called for each file that is being uploaded. Moving it outside the block (obviously) fixed the issue.