Upload multiple files from dynamically created form inputs - javascript

I'm learning MEAN stack and have trubles on a files upload. I have a company form:
this.companyForm = this.fb.group({
trucks: this.fb.array([]),
...
});
Trucks field is dynamicly created:
newTruck(): FormGroup {
this.added = false;
return this.fb.group({
...
TLic: new FormControl(null, {
validators: [Validators.required]
}),
Lic: new FormControl(null, {
validators: [Validators.required]
}),
CMRLic: new FormControl(null, {
validators: [Validators.required]
})
})
}
addTruck() {
this.trucks().push(this.newTruck());
}
On save form:
this.authService.createUserStep1(
...
this.companyForm.value.trucks
);
AuthService:
createUserStep1(... trucks: Array<any>) {
const AuthDataStep1: AuthDataStep1 = {
...
trucks: trucks
};
this.http.put(BACKEND_URL + "signupStep1/", AuthDataStep1).subscribe(
() => {
this.authStatusListener.next(true);
this.router.navigate(["auth/signupStep2"]);
},
error => {
this.authStatusListener.next(false);
}
);
}
Nodejs controller where I write to DB:
exports.createUserStep1 = (req, res, next) => {
...
for (i = 0; i < req.body.trucks.length; i++) {
const truck = new Truck({
...
TLic: req.body.trucks[i].file.TLic[0].filename,
Lic: req.body.trucks[i].file.Lic[0].filename,
CMRLic: req.body.trucks[i].file.CMRLic[0].filename,
});
Truck.create(truck);
}
})
}
Middleware for files upload:
const multer = require("multer");
var path = require('path');
const storage = multer.diskStorage({
destination: (req, file, cb) => {
cb(null, "backend/truckdocs");
},
filename: (req, file, cb) => {
const name = file.originalname
.toLowerCase()
.split(" ")
.join("-");
cb(null, name + "-" + Date.now() + "." + path.extname(file.originalname));
}
});
module.exports = multer({ storage: storage }).fields([
{
name: "TLic", maxCount: 1
}, {
name: "Lic", maxCount: 1,
}, {
name: "CMRLic", maxCount: 1
}
]);
and route
const express = require("express");
const UserController = require("../controllers/user");
const extractTruckFiles = require("../middleware/truckfiles");
const checkAuth = require("../middleware/check-auth");
const router = express.Router();
/*App*/
...
router.put("/signupStep1", checkAuth, extractTruckFiles, UserController.createUserStep1);
I want to create x number of trucks in form and for each truck upload 3 files(TLic, Lic, CMRLic).What is the best way to achieve this? I know it needs time for you to get into my code and I'm very thankful in advance.

This is how i did for a ecommerce where i upload 3 photo. I have done it with MVC pattern and i called multer in route file.
const express = require("express")
const multer = require("multer");
const router = express.Router()
const productController = require("../../controller/vendor/product")
const app = express();
const fileStorage = multer.diskStorage({
destination: (req, file, cb) => {
cb(null, "images");
},
filename: (req, file, cb) => {
cb(null, new Date().toISOString().replace(/:/g, '-') + '-' +file.originalname)
}
});
const fileFilter = (req, file, cb) => {
if(file.mimetype === 'image/png' || file.mimetype === 'image/jpg' || file.mimetype === 'image/jpeg') {
cb(null, true)
} else {
cb(null, false)
}
}
let filehandler = app.use(multer({storage : fileStorage, fileFilter: fileFilter }).array('image',3))
/* #GET product Page request */
router.get('/products', productController.getProduct)
/* #GET add product page Request */
router.get('/add-product', productController.getAddProduct)
/* #POST Request */
router.post('/add-product', filehandler, productController.postAddProduct)
/* #GET AJAX Request findind subcategory */
router.get("/getSubCategory/:id", productController.getSubCategory);
module.exports = router

Related

How to push data into db.json file when customizing server.post()

my code:
const jsonServer = require('json-server');
const { v4 } = require('uuid');
const server = jsonServer.create();
const router = jsonServer.router('db.json');
const middlewares = jsonServer.defaults();
const db = router.db;
server.use(middlewares);
server.use(jsonServer.bodyParser);
server.post('/api/register', (req, res, next) => {
const userRegister = req.body;
const usersDb = db.get('users').value();
usersDb.push(
JSON.stringify({
...userRegister,
address: '',
birthDay: null,
isCustomer: true,
isActive: true,
avatar: '',
createAt: Date.now(),
updateAt: Date.now(),
id: v4(),
}),
);
});
server.use((req, res, next) => {
if (req.method === 'POST') {
req.body.createdAt = Date.now();
req.body.updateAt = Date.now();
}
next();
});
router.render = (req, res) => {
res.jsonp({
body: res.locals.data,
});
};
server.use('/api', router);
server.listen(3002, () => {
console.log('JSON Server is running');
});
I need to customize the path and I'm having trouble that I can't add data to the db.json file.
You can see usersDb.push is not working. I want to know how can I add new data to db.json file using custom server.post()

How to get info from an object with multer

I need to get the filename info from two files sended with multer, but when I try to send a JSON with the response, it sends a Object: null prototype and the info from the images. But I canĀ“t access to it. What can I do?
Here is my code:
// Multer File
const multer = require("multer");
const path = require("path");
const storage = multer.diskStorage({
destination: (req, file, cb) => {
cb(null, path.join(__dirname, "../../imagesDirectory"));
},
filename: (req, file, cb) => {
cb(
null,
`${req.params.campana}-${req.params.metodo}-${file.fieldname}-${new Date()
.toISOString()
.replace(/:/g, "-")}-${file.originalname}`
);
},
});
const upload = multer({ storage: storage });
const uploads = upload.fields([
{ name: "image1" },
{ name: "image2" },
{ name: "image3" },
{ name: "image4" },
{ name: "image5" },
{ name: "image6" },
{ name: "image7" },
]);
module.exports = uploads;
// Controller
const uploadFile = async (req, res) => {
if (!req.files) {
console.log("You need to add an image");
res.json({ err: "You need to add an image" });
} else {
console.log(req.files);
let name = req.files.filename;
res.json({ msg: "Image Upload", rows: name });
}
};
module.exports = { uploadFile };

uploading two files from two fields with multer as middleware

i'm trying to upload two files with different file extensions with multer from two fields but when i try it with postman the result always for the file is null, what is the solution for my problem? here is my code
middleware/uploadEpub
const multer = require('multer')
exports.uploadEpub = (epubFile, coverFile) => {
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, "uploads")
},
filename: function (req, file, cb) {
cb(null, Date.now() + '-' + file.originalname.replace(/\s/g, ""))
}
})
const upload = multer({
storage
}).fields([{name: "bookFile", maxCount: 1},{name: "coverFile", maxCount: 1}])
}
controller/book
exports.addBook = async (req, res) => {
try {
const { ...data } = req.body
const newBook = await book.create({
...data,
bookFile: req.file,
coverFile: req.file
})
let bookData = await book.findOne({
where: {
id: newBook.id
},
attributes:{
exclude: ['createdAt','updatedAt']
}
})
bookData = JSON.parse(JSON.stringify(bookData))
res.send({
status: "Success",
Book: {
...bookData
}
})
} catch (error) {
console.log(error)
res.status(500).send({
status: "Failed",
message: "Server Error"
})
}
}
Multer set up
const multer = require('multer')
const path = require('path')
const { nanoid } = require('nanoid')
//Set Storage Engine
const storage = multer.diskStorage({
destination: './public/uploads/',
filename: (req, file, callback) => {
const id = nanoid(6)
const newFilename = `${file.fieldname}_${id}-${new Date().toISOString().replace(/:/g, '-')}${path.extname(file.originalname)}`
callback(null, newFilename)
}
})
const upload = multer({
storage: storage,
limits: { fileSize: 5572864 }, // up to 5.5 MB
fileFilter: (req, file, callback) => {
checkFileType(file, callback)
},
})
//Check File Type
const checkFileType = (file, cb) => {
//Allowed extensions
const fileType = /jpeg|jpg|png|gif|svg|pdf|epub/
//Check extension
const extname = fileType.test(path.extname(file.originalname).toLowerCase())
//Check mimetype
const mimetype = fileType.test(file.mimetype)
if (extname && mimetype) {
return cb(null, true)
} else {
return cb('Error: wrong file type!')
}
}
module.exports = upload
/***** middlewares.js *****/
module.exports.imageUploader = (req, res, next)=>{
const files = req.files
const uploadedFiles = []
for (var i = 0; i <images.length; i++){
uploadFiles.push('https://yourserver.com/public/uploads/' + files[i].filename)
}
req.uploadFiles = uploadFiles.toString() //appending files to req
next()
return
}
/**** index.js or app.js ****/ //where your routes are defined
router.post('/books/add', upload.array('images', 10), imageUploader, book.addBook) // allowing up to 10 files to be uploaded, calling imageUploader as a middleware
/*** Controllers/book ***/
exports.addBook = async (req, res) => {
const uploadedFiles = req.uploadFiles; //catching files from imageUploader middleware
// ... rest of your code
}
Try to upload the file as form-data in postman, and put the key with the same name that you have set in multer, the postman will look like this:
Try this:
const cpUpload = upload.fields([{ name: 'avatar', maxCount: 1 }, { name: 'gallery', maxCount: 8 }])
app.post('/cool-profile', cpUpload, function (req, res, next) {
})

Get image path with Multer Express Nodejs

I am using Multer to save images but I need to get the path of the image to save it to MongoDB. I am trying to get the path with req.file but it always tells me on the console that it is undefined.
this is my route:
import { Router } from 'express';
import { check, validationResult } from 'express-validator';
const multer = require('multer');
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'uploads/products')
},
filename: function (req, file, cb) {
cb(null, new Date().toISOString().replace(/:/g, '-') + file.originalname)
}
});
const fileFilter = (req, file, cb) => {
// reject a file
if (file.mimetype === 'image/jpeg' ||file.mimetype === 'image/png') {
cb(null, true);
} else {
cb(null, false);
//cb(new Error('I don\'t have a clue!'))
}
}
const upload = multer(
{ storage: storage,
limits:{
fileSize: 1024 * 1024
},
fileFilter: fileFilter
});
let router = Router();
router.post('/', upload.single('img'),
newProduct
);
And in the new Product controller I am trying to read the req.file but the console tells me that it is undefined:
Controller:
import { Product } from '../models'
let newProduct = async (req, res = response ) => {
console.log('file ' + req.file); //UNDEFINED
try {
let { status, user, ...body } = req.body;
let productDB = await Product.findOne ( { 'name': body.name } );
if (productDB) {
return res.status(400).json({
msg:`El producto ${ productDB.name } ya existe`
})
}
let data = {
...body,
name: body.name,
user: req.user._id
}
let product = new Product( data );
await product.save();
res.status(200).json( product );
} catch (error) {
return res.status(400).json({
error
});
}
}
Console:
Thanks for your help.
you can try to do this in filename instead:
filename: function (req, file, cb) {
req.imageName = new Date().toISOString().replace(/:/g, '-') + file.originalname
cb(null, req.imageName)
}
then there:
console.log('file ' + req.file); //UNDEFINED
//you can get imageName instead
console.log('imageName',req.imageName)
//if you want url to store in database you can do this
//supposing your have images directory in root of your node server
const url = `${req.protocol}://${req.get('host')}/images/${req.body.image}`

How to set field name to upload file single/array Multer NodeJs

I have a code for upload images in nodejs using multer and sharp. But i want to ask how to set dynamic array name at line 19? I want to set that array name from the nodejs routes, because my field name in mongodb collections is different in every collection.
This is my middleware upload code:
const multer = require("multer");
const sharp = require("sharp");
const multerStorage = multer.memoryStorage();
const multerFilter = (req, file, cb) => {
if (file.mimetype.startsWith("image")) {
cb(null, true);
} else {
cb("Please upload only images.", false);
}
};
const upload = multer({
storage: multerStorage,
fileFilter: multerFilter
});
const uploadFiles = upload.array("images", 10); //Change this 'images' name from route
const uploadImages = (req, res, next) => {
uploadFiles(req, res, err => {
if (err instanceof multer.MulterError) {
if (err.code === "LIMIT_UNEXPECTED_FILE") {
return res.send("Too many files to upload.");
}
} else if (err) {
return res.send(err);
}
next();
});
};
const resizeImages = async (req, res, next) => {
if (!req.files) return next();
req.body.images = [];
await Promise.all(
req.files.map(async file => {
const filename = file.originalname.replace(/\..+$/, "");
const newFilename = `cariboss-${filename}-${Date.now()}.jpeg`;
await sharp(file.buffer)
.resize(640, 320)
.toFormat("jpeg")
.jpeg({ quality: 90 })
.toFile(`uploads/${newFilename}`);
req.body.images.push(newFilename);
})
);
next();
};
const getResult = async (req, res) => {
if (req.body.images.length <= 0) {
return res.send(`You must select at least 1 image.`);
}
const images = req.body.images
.map(image => "" + image + "")
.join("");
return res.send(`Images were uploaded:${images}`);
};
module.exports = {
uploadImages: uploadImages,
resizeImages: resizeImages,
getResult: getResult
};
My routes code:
module.exports = app => {
const articles = require("../controllers/articles.controller.js");
const upload = require("../middlewares/upload");
var router = require("express").Router();
router.post("/", upload.uploadImages, upload.resizeImages, upload.getResult, articles.create);
app.use("/api/article", verifyToken, router);
};
I have already search the solution on internet, but there is nothing. Thanks for your help sir.

Categories