node.js - Angular2 ExpressJs - File upload to the server -

angular-2 trying upload files server. following code uploads file server,

how can link mongodb documents ? when file uploaded want link specific document.

also how can provide link in ui download uploaded file server ?

component.ts

@component({     selector: 'aptcontent',     template: `          <div> <input type="file" (change)="filechangeevent($event)" placeholder="upload file..."></div>             <div >                 <a (click)="upload()">upload docs</a>           </div>      `,      directives: [router_directives] })  export class aptcontentcomponent implements oninit {      data: any;     filestoupload: array<file>;      constructor(private apartmentservice: apartmentservice, private sharedservice: sharedservice, params: routeparams) {         this.filestoupload = [];     }       ngoninit() {}      upload(){       console.log('upload button clicked');        this.makefilerequest("http://localhost:3000/upload", [], this.filestoupload).then((result) => {             console.log(result);         }, (error) => {             console.error(error);         });     }      filechangeevent(fileinput: any){         this.filestoupload = <array<file>> fileinput.target.files;     }      makefilerequest(url: string, params: array<string>, files: array<file>) {         return new promise((resolve, reject) => {             var formdata: = new formdata();             var xhr = new xmlhttprequest();             for(var = 0; < files.length; i++) {                 formdata.append("uploads[]", files[i], files[i].name);             }             xhr.onreadystatechange = function () {                 if (xhr.readystate == 4) {                     if (xhr.status == 200) {                         resolve(json.parse(xhr.response));                     } else {                         reject(xhr.response);                     }                 }             }             xhr.open("post", url, true);             xhr.send(formdata);         });     } }     

server.ts

app.use(function(req, res, next) {     res.header("access-control-allow-origin", "*");     res.header("access-control-allow-headers", "origin, x-requested-with, content-type, accept");     next(); });   app.post("/upload", multer({dest: "./uploads/"}).array("uploads[]", 12), function(req, res) {});     

the code creates uploads folder on server , dumps file file type .file not actual .jpg file uploaded.

i trying same thing , here solution (not sure if best way it),

server js:

var formidable = require('formidable'); var fs = require('fs');  app.post('/upload', function(req, res){    var form = new formidable.incomingform();    form.multiples = false;    form.uploaddir = path.join(__dirname, '/public/uploads');     form.on('file', function(field, file) {     fs.rename(file.path, path.join(form.uploaddir, file.name));   });    form.on('error', function(err) {     console.log('an error has occured: \n' + err);   });    form.on('end', function() {     res.end('success');   });    form.parse(req);  }); 

app.component:

import { component, oninit, ngzone } '@angular/core'; @component({   selector: 'my-app',   templateurl: 'js/app/app.component.html' }) export class appcomponent {    filestoupload: array<file>;      constructor() {         this.filestoupload = [];     }      upload() {         this.makefilerequest("http://localhost:3000/upload", [], this.filestoupload).then((result) => {             console.log(result);         }, (error) => {             console.error(error);         });     }      filechangeevent(fileinput: any){         this.filestoupload = <array<file>> fileinput.target.files;     }      makefilerequest(url: string, params: array<string>, files: array<file>) {         return new promise((resolve, reject) => {            var formdata: = new formdata();             var xhr = new xmlhttprequest();              for(var = 0; < files.length; i++) {                 formdata.append("uploads[]", files[i], files[i].name);             }              xhr.open("post", url, true);             xhr.send(formdata);         });     }  }  } 

note: using formidable , not multer