upload file with angular + express + multer not working

I have followed this guide https://blog.angular-university.io/angular-file-upload/ to upload images from Angular to express with multer. But it does not work as expected.

First I tried a simple html :

<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="img" />
<button type="submit">Upload</button>
</form>


In express I have this code:

// Set up Multer storage // {{{
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'uploads/');
},
filename: function (req, file, cb) {
cb(null, 'img_' + Date.now() + '.' + file.originalname.split('.').pop());
}
});
// Add file filter to only accept images
const fileFilter = function (req, file, cb) {
// Accept only images
if (!file.originalname.match(/\.(jpg|jpeg|png|gif)$/)) {
return cb(new Error('Only image files are allowed!'), false);
}
cb(null, true);
};

const upload = multer({
storage: storage,
fileFilter: fileFilter,
limits: {
fileSize: 1024 * 1024 * 2, // 2MB
files: 1 // Maximum number of files
}
}); // }}}
...
app.post("/upload", upload.single('img'), (req, res) => {
console.log("/upload", req.file); // Contains file info
res.send(`File uploaded successfully: ${req.file.filename}`);
});


==> Image is well stored in /uploads folder

Then I tried with the code in the guide:

<input type="file" class="file-input"
(change)="onFileSelected($event)" #fileUpload>

<div class="file-upload">

{{fileName || "No file uploaded yet."}}

<button color="primary" class="upload-btn"
(click)="fileUpload.click()">
Upload
</button>
</div>


And:

onFileSelected(event: any) {
// const file:File = event.target.files[0];
const file = event.target.files[0];
if (file) {
console.log(file);
this.fileName = file.name;
file.fileName = file.name;
const formData = new FormData();
formData.append("img", file);
const upload$ = this.http.post("/upload", formData);
upload$.subscribe();
}
}


But I have this error in express output :

SyntaxError: Unexpected token '-', "------WebK"... is not valid JSON
...
status: 400,
body: '------WebKitFormBoundarySNPE2MD0drJY3oUC\r\n' +
'Content-Disposition: form-data; name="img"; filename="image2.png"\r\n' +
'Content-Type: image/png\r\n' +
'\r\n' +
'�PNG\r\n' +
'\x1A\n' +
'\x00\x00\x00\rIHDR\x00\x00...


Hum, json error, so I remove this line in my express server.js :

app.use(express.json({ limit: '10mb' } ));


But then I have this error :

TypeError: Cannot read properties of undefined (reading 'filename')


Note : in parallel simple html is still working fine.

I do not understand as all tutorials are giving same way for Angular to upload a file with FormData...

Continue reading...