req not defined after muti-image form submission from angular - node.js

Question

I'm trying to submit a form from Angular 7 that has text and images to a Node backend using Multer as my middleware and Express.json() as my bodyParser. The form data is there on the frontend submission and the text data is there in the backend but the image fields are empty {}. I've tried using bodyParse.json() and thre results are the same.
Here is my app.js file
const express = require('express');
// const bodyParser = require('body-parser');
const adminController = require('./controllers/admin');
const path = require('path');
const cors = require('cors')
const app = express()
const FORM_URLENCODED = 'multipart/form-data';
app.use(cors())
... my mongodb connection string ...
app.use((req, res, next) => {
res.setHeader('Access-Control-Allow-Origin', '*')
res.setHeader('Access-Control-Allow-Headers', 'Origin, Content-Type, X- Auth-Token')
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PATCH, PUT, DELETE, OPTIONS')
next();
});
// const bp = bodyParser.json()
// console.log('TCL: bp', bp);
app.use(express.json());
app.use(express.urlencoded({extended: true}));
app.use(express.static(path.join(__dirname, 'images')));
// req is not defined?!?!?!?!?
app.use(() => {
if (req.headers['content-type'] === FORM_URLENCODED) {
let body = '';
req.on('data', chunk => {
body += chunk.toString(); // convert Buffer to string
});
req.on('end', () => {
console.log(body);
res.end('ok');
});
}
})
// -- multer
const multer = require('multer');
const crypto = require("crypto");
const imgDir = 'images';
const imgStorage = multer.diskStorage({
destination: (req, file, cb) => {
cb(null, 'images')
},
filename: function(req, file, callback) {
crypto.pseudoRandomBytes(16, function(err, raw) {
if (err) return callback(err);
callback(null, raw.toString('hex') +
path.extname(file.originalname));
});
}
});
const fileFilter = ((req, file, cb) => {
// accept image only
if (!file.originalname.match(/\.(jpg|jpeg|png|gif)$/)) {
return cb(new Error('Only image files are allowed!'), false);
}
cb(null, true);
});
const upload = multer({dest: imgDir, storage: imgStorage, fileFilter:
fileFilter, limits: {fileSize: 16000} }).array('image',20);
// app.use(
// upload.fields([
// { name: 'mainImg', maxCount: 1 },
// { name: 'image', maxCount: 5 },
// ])
// );
// -- end multer
app.post('/admin/add-product', function (req, res, next) {
var path = '';
upload({dest: imgDir, storage: imgStorage, fileFilter: fileFilter,
limits: {fileSize: 16000} });
path = req.file.path;
/// path is not defined!?!?!?!?
return res.send("Upload Completed for "+path);
}, adminController.postAddProduct);
const userRoutes = require('./routes/user');
app.use('/user', userRoutes);
module.exports = multer;
module.exports.imgStorage = imgStorage;
module.exports = app;
Angular form
<form [formGroup]="prodForm" (ngSubmit)="onSubmit()" enctype="multipart/form-data">
<div class="col-md-4">
<label for="title"> <span class="required">*</span>Title: </label>
<mat-form-field>
<input class="form-control" matInput type="text" formControlName="title" #prodTitle />
<mat-error *ngIf="prodForm.get('title').invalid">Please enter a title</mat-error>
</mat-form-field>
</div>
<div class="col-md-4">
<div class="col-md-5">
<button class="btn btn-success" mat-stroked-button type="button" (click)="filePicker.click()">
Pick Image
</button>
<input type="file" #filePicker name="image" (change)="onImagePicked($event)" />
</div>
<div class="image-preview col-md-7" *ngIf="imgSrc !== '' && imgSrc">
<img [src]="imgSrc" alt="{{ prodTitle.value }}" />
</div>
</div>
<div class="col-md-12 sectButtons">
<button class="btn btn-success" (click)="onShowStep2()">Next Step</button>
<div class="clear"></div>
</div>
Angular form output
image: File {name: "some-image.jpg", lastModified: 1552012800142,
lastModifiedDate: Thu Mar 07 2019 21:40:00 GMT-0500 (Eastern Standard Time), webkitRelativePath: "", size: 42381, …}
title: "some title"
Node controller output
TCL: exports.postAddProduct -> req.body { _id: '',
title: 'some title',
image: {}, }
TCL: exports.postAddProduct -> files undefined
What am I missing? I've spent way too much time trying to figure this out.

Answer 1

req is not defined becuase you've not defined the req object. It is not a valid express middleware. change to
// next is optional
app.use((req, res, next) => {
if (req.headers['content-type'] === FORM_URLENCODED) {
let body = '';
req.on('data', chunk => {
body += chunk.toString(); // convert Buffer to string
});
req.on('end', () => {
console.log(body);
res.end('ok');
});
}
})