How to Upload File from angular7 to Node.js server - node.js

Question

My node.js code is working 100% by Postman,
but in angular when I send a FormData and nothing happened in server, no error but the file not uploaded.
how can i upload file by angular?
HTML Compnent:
<form>
<input type="file" (change)="OnFileSelected($event)" name='photo'>
<button type='submit' (click)="OnUpload()">Save Post</button>
</form>
Ts Compnent:
OnFileSelected(event){
this.SelectedFile = event.target.files[0] as File;
}
OnUpload(){
const form: FormData = new FormData();
form.append('photo', this.SelectedFile, this.SelectedFile.name);
//Convert to Json because 'Unexpected token - in JSON at position 0 at JSON.parse' error in server
let responseBody: {} = JSON.stringify(form);
this.http.post(URL, responseBody).subscribe(event => { console.log(event)}, err => {console.log(err)
});
}
Node.js Server:
const path = require('path');
const express = require('express');
const multer = require('multer');
const bodyParser = require('body-parser')
const router = express.Router();
const DIR = './uploads';
let storage = multer.diskStorage({
destination: (req, file, cb) => {
cb(null, DIR);
},
filename: (req, file, cb) => {
cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname));
}
});
let upload = multer({ storage: storage });
router.use(bodyParser.json());
router.use(bodyParser.urlencoded({ extended: true }));
router.use(function (req, res, next) {
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:4200');
res.setHeader('Access-Control-Allow-Methods', 'POST');
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
res.setHeader('Access-Control-Allow-Credentials', true);
next();
});
router.post('/upload-image', upload.single('photo'), async function (req, res) {
console.log(req.body);
if (!req.file) {
console.log("No file received");
return res.send({
success: false
});
} else {
console.log('file: ',req.file);
return res.send({
success: true
})
}
});

Answer 1

You need to specify that your Request is a form-data request:
// Create Form Data
const formData: FormData = new FormData();
formData.append('photo', this.SelectedFile, this.SelectedFile.name);
// Create options for the request
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'multipart/form-data', // <-- IMPORTANT
'Accept': 'application/json'
})
};
this.http.post(URL, formData, httpOptions).subscribe(...)

Answer 2

There are many ways to transfer file to the server, if it's a common scenario, then I will suggest using Dropzone.js angular wrapper.
Better have a custom angular component with all the custom configuration of Dropzone to meet your needs.
Using it is also quite easy, once you have installed the package, file input is as simple as follow:
<dropzone [config]="config" [message]="'Click or drag images here to upload'"
(error)="onUploadError($event)" (success)="onUploadSuccess($event)"></dropzone>
Documentation can be found here:
https://www.npmjs.com/package/ngx-dropzone-wrapper

Answer 3

You need to first instantiate your file in OnInit() before creating an instance in your OnUpload() function which you have done:
ngOnInit() {
this.form = new FormGroup({
photo: new FormControl(null, {
validators: [Validators.required]}) }
You can remove the validators if you like, you can also edit your onFileSelected() function like this:
this.SelectedFile = event.target.files[0] as File;
this.form.patchValue({ photo: file });
this.form.get('photo').updateValueAndValidity();
const reader = new FileReader();
reader.readAsDataURL(file);
console.log(file);
call your function like this:
onUploadFile(event: Event){}