Image uploading platform using node-js, mongoose and multer - node.js

Question

I'm desperately trying to build an image gallery in node-js where I can:
1. use a form to upload an image from the harddrive
2. save the uploaded file in mongo-DB (mongoose)
3. Retrieve the uploaded images and show it in my website
I'm quite new to node and also mongodb, so I have a really hard time doing this (doing the same for simply news / text-only db-schemas was so easy). I have searched all similar topics before, but none of them helped me, so I'm really desperate now since I had to copy some code-parts that I don't understand on the way to solving it. Please help me with some beginners explanations!
My html form
<form id="uploadForm" action="/images" method="POST" enctype="multipart/form-data">
<div class="form-group">
<label for="imageSelector">Select Image</label>
<input type="file" class="form-control" name="image" placeholder="upload image" id="imageSelector" accept="image/png, image/jpeg">
</div>
<div class="form-group imagePreview">
<p>No files currently selected for upload</p>
</div>
<div class="form-group">
<label for="imageDescription">Image Description</label>
<input type="text" class="form-control" name="description" placeholder="description" id="imageDescription">
</div>
<button class="btn btn-success">submit</button>
</form>
My DB-Schema:
let imageSchema = new mongoose.Schema({
img: { data: Buffer, contentType: String },
description: String});
module.exports = mongoose.model("Image", imageSchema); //Exporting my Schema
My route file:
let express = require("express");
let mongoose = require("mongoose");
let bodyParser = require("body-parser");
let router = express.Router({mergeParams: true});
let multer = require("multer");
let Image = require("../models/image"); //Using DB-Schema that I exported
const GridFsStorage = require('multer-gridfs-storage');
const storage = new GridFsStorage({
url: "mongodb://localhost/My_DB",
file: (req, file) => {
return {
filename: 'file_' + Date.now()
};
}
});
const upload = multer({ storage });
const sUpload = upload.single('image');
router.post('/', sUpload, (req, res, next) => {
console.log("FILENAME: " + req.file.filename);
console.log("CHUNKSIZE: " + req.file.chunkSize);
console.log("CONTENTTYPE: " + req.file.contentType);
Image.create(req.file, function(err, addedImage) {
if(err) {
console.log(err);
} else {
console.log("SUCCESSFULLY ADDED NEW IMAGE! " + addedImage);
res.redirect("/images");
}
})
});
module.exports = router;
Now, what do I have to do to get the actual file to retrieve it? When I load my html-form and upload an image, after clicking submit, I get the following console.logs:
FILENAME: file_1522841638818
CHUNKSIZE: 261120
CONTENTTYPE: image/png
PATH: undefined
ADDED NEW IMAGE SUCCESSFULLY! { _id: 5ac4b82674d2091a8db36f2f, __v: 0 }
When I go to my DB "My_DB" and take a look at db.images.find() the image is not uploaded. So I need to know
1. How to upload it into my DB?
2. How to retrieve it and really use the file itself to show it within html ?
Thanks very much!
Btw.: I implemented this whole multer-gridfs-storage thing because I red that you can't upload images > 16 MB without it. I think I'm not really using multer yet so maybe you can give me some hints of how I can get to the image file. I know, you might talk about some docu of specific packages that I implemented. Believe me, this is only one attempt of about 100 different attempts to approach this and I'm really confused now of what is important for me :-/

Answer 1

Use
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, '/tmp/my-uploads')
},
filename: function (req, file, cb) {
cb(null, file.fieldname + '-' + Date.now())
}
})
var upload = multer({ storage: storage })
Url : is file system path not mongo path
Also Your Model need data ,contenttype,description fields
img: {
data: Buffer,
contentType: String },
description: String});
But req.file does not contains it on same key so please create new json with key mapping
More Info : https://github.com/expressjs/multer

Answer 2

For storing image to mongoDB, you need to write a service something like this in the link https://devdactic.com/ionic-image-upload-nodejs-server/