Uploading multiple files with Angular and Multer - node.js

Question

I'd need help to understand how to handle multer (nodeJS) with Angular 7.
I tried a bunch of different situation but can't seem to upload any file...
My files come from a ReactiveForm:
<mat-tab
label="Documents"
formGroupName="docs">
<mat-list>
<mat-nav-list>
<a mat-list-item
(click)="fsPicker.click()">
Upload financial statements
</a><input type="file" #fsPicker (change)="onDocPicked($event, 'fs')">
<a mat-list-item
(click)="cdPicker.click()">
Upload the constitutional documents
</a><input type="file" #cdPicker (change)="onDocPicked($event, 'cd')">
<a mat-list-item
(click)="idPicker.click()">
Upload the ID
</a><input type="file" #idPicker (change)="onDocPicked($event, 'id')">
<a mat-list-item
(click)="adPicker.click()">
Upload the bank account details
</a><input type="file" #adPicker (change)="onDocPicked($event, 'ad')">
</mat-nav-list>
</mat-list>
</mat-tab>
Which is controlled by a MimeValidator:
// INSIDE NGONINIT:
this.customerForm = new FormGroup({
info: new FormGroup({
name: new FormControl(null, {validators: Validators.required}),
vat: new FormControl(null, {validators: Validators.required}),
}),
docs: new FormGroup({
fs: new FormControl(null, {asyncValidators: mimeType}),
cd: new FormControl(null, {asyncValidators: mimeType}),
id: new FormControl(null, {asyncValidators: mimeType}),
ad: new FormControl(null, {asyncValidators: mimeType})
})
});
// IN THE REST OF THE CLASS
onDocPicked(event: Event, type: string) {
const file = (event.target as HTMLInputElement).files[0];
this.customerForm.get('docs').patchValue({
[type]: file
});
this.customerForm.get('docs').get(type).updateValueAndValidity();
this.customerForm.get('docs').get(type).markAsDirty();
setTimeout(() => {
if (!this.customerForm.get('docs').get(type).valid) {
this.openAlert();
this.customerForm.get('docs').patchValue({
[type]: null
});
}
}, 100);
}
Then submited and sent to a dedicated service:
onSubmit() {
if (!this.customerForm.valid) {
return;
}
this.isLoading = true;
if (!this.editMode) {
this.customerService.addCustomer(this.customerForm.get('info').value, this.customerForm.get('docs').value);
this.customerForm.reset();
} else {
const updatedCustomer: Customer = {
id: this.id,
name: this.customerForm.get('info').value.name,
vat: this.customerForm.get('info').value.vat
};
this.customerService.updateCustomer(this.id, updatedCustomer);
}
this.router.navigate(['/customers']);
}
Inside the service, handled and sent to the backend:
addCustomer(info, docsData) {
const customerData = new FormData();
customerData.append('name', info.name);
customerData.append('vat', info.vat);
customerData.append('docs', docsData);
console.log(docsData);
this.http.post<{message: string, customerId: string}>(
'http://localhost:3000/api/customers',
customerData
)
.subscribe((res) => {
const customer: Customer = {
id: res.customerId,
name: info.name,
vat: info.vat
};
this.customers.push(customer);
this.customersUpdated.next([...this.customers]);
});
}
And last but not least received and handled by the express and multer:
const storage = multer.diskStorage({
destination: (req, file, cb) => {
const isValid = MIME_TYPE_MAP[file.mimetype];
let err = new Error('invalid mime type!');
if (isValid) {
err = null;
}
cb(err, 'backend/docs');
},
filename: (req, file, cb) => {
const name = file.originalname.toLowerCase().split('').join('-');
const ext = MIME_TYPE_MAP[file.mimetype];
cb(null, name + '-' + Date.now() + '.' + ext);
}
});
const upload = multer({storage: storage});
router.post('', upload.any(),
// .fields([
// {name: 'fs'},
// {name: 'cd'},
// {name: 'id'},
// {name: 'ad'},
// ]),
(req, res, next) => {
const customer = new Customer({
name: req.body.name,
vat: req.body.vat,
});
customer.save().then(result => {
res.status(201).json({
message: 'Customer added successfully!',
customerId: result.id
});
});
});
I believe that the problems comes from the object I'm trying to send to the server... But I'm not sure how to handle this properly.
Even by calling multer's any command, nothing get saved.
Here's a link to the full project on stackblitz:
https://stackblitz.com/github/ardzii/test

Answer 1

I was sending the wrong type of data. To correct (and it seems to work now) I had to precise in the FormData that I was appending Files:
const customerData = new FormData();
customerData.append('name', info.name);
customerData.append('vat', info.vat);
customerData.append('fs', docsData.fs as File, info.vat + 'fs');
customerData.append('cd', docsData.cd as File, info.vat + 'cd');
customerData.append('id', docsData.id as File, info.vat + 'id');
customerData.append('ad', docsData.ad as File, info.vat + 'ad');
Once done, I could easily handle the files with multer by calling:
upload.
fields([
{name: 'fs', maxCount: 1},
{name: 'cd', maxCount: 1},
{name: 'id', maxCount: 1},
{name: 'ad', maxCount: 1},
]),
upload variable being a multer's instance with parameters (see in the question).