1)i am uploading image from angular js 5 app and sending it to node js server, that file will be store at node js server in uploads folder.
2) i have used multer at backend (node js) to store uploaded file at server.
3) i have used both http and httpclient of angular js 5 respectively ,but still i am not getting uploaded file at server side.
4) when i send request to upload file through postman software , it works fine , but it can not work when i send request through angular js 5.
import { Component, OnInit } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import { HttpHeaders,HttpRequest } from '@angular/common/http';
import {RequestOptions} from '@angular/http';
@Component({
selector: 'app-file-upload',
templateUrl: './file-upload.component.html',
styleUrls: ['./file-upload.component.css']
})
export class FileUploadComponent implements OnInit {
public url: string = "http://localhost:3000/Tasks"; // end point (node js)
fileToUpload : File = null;
constructor(private http: HttpClient) { }
ngOnInit() {
}
fileChange(files : FileList)
{
if(files.length > 0)
{
this.fileToUpload = files.item(0);
console.log(this.fileToUpload.name);
let formData : FormData = new FormData();
formData.append('upload file',this.fileToUpload,this.fileToUpload.name);
// let headers = new Headers();
// headers.append('Content-Type',undefined);
// let options = new RequestOptions({ headers: headers });
let headers = new HttpHeaders();
headers.set('Content-Type','multipart/form-data');
//let options = {headers : headers};
this.http.post(`${this.url}/upload`,{formData},{headers})
.subscribe(
res => {
console.log(res);
},
err => {
console.log("Error occured");
}
);
}
}
}<div>
<form method="post" enctype="multipart/form-data">
<input type="file" name="file" (change)="fileChange($event.target.files)" placeholder="Upload file"/>
</form>
</div>import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FileUploadComponent } from './file-upload/file-upload.component';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [
AppComponent,
FileUploadComponent
],
imports: [
BrowserModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }var express = require('express');
var router = express.Router();
var multer = require("multer");
var Task = require('../models/Task');
//var upload = multer({ dest: '../uploads/' })
var storage = multer.diskStorage({ //multers disk storage settings
destination: function (req, file, callback) {
callback(null, './uploads');
},
filename: function (req, file, callback) {
var datetimestamp = Date.now();
callback(null, file.fieldname + '-' + datetimestamp + '.jpg');
}
});
var upload = multer({storage: storage}).single('file');
/** API path that will upload the files */
router.post('/upload',function(req, res) {
res.json({success: 'file uploaded successfuly ...'});
upload(req,res,function(err){
console.log('post() ..../////');
console.log(req.file)
if(err){
res.json({error_code:1,nperr_desc:err});
return;
}
res.json({
error_code:0,err_desc:null,
success: 'file uploaded successfuly ...'
});
});
});
module.exports = router;
