How to angular2 post JSON data and files In same request

Question

I want to implement post file and Json data in the same request .

below is the upload file code :

upload(url:string,file:File):Observable<{compl         


        

Answer 1

//app.component.html


Submit

//app.component.ts

file:File = null;

onChange(event){
 this.file = event.target.files[0]
}

onSubmisson(){
 this._auth.uploadFileAndData(this.file).subscribe(
 res => {
    console.log(res);
 },err => {
    console.log(err);
 });
}

//upload.service.ts

uploadFileAndData(file){
  var test = {test:"test"}
  const formData = new FormData();
  formData.append('data', JSON.stringify(test));
  formData.append('file', file, file.name);
  return this._http.post(this._uploadurl, formData);
}

//node server

var multer = require('multer');
var path = require('path');

var storage = multer.diskStorage({
  // destination
  destination: function (req, file, cb) {
    cb(null, './uploads/')
  },
  filename: function (req, file, cb) {
    cb(null, file.originalname);
  }
});

var upload = multer({ storage: storage }).array("file", 12);

router.post("/upload",  function(req , res){
    upload(req, res, function (err) {
        if(err){
            console.log(err);
        }else{
            console.log(req.body);
            console.log('files', req.files);
        }
    })
    res.status(200).send({});
});

// output

{ data: '{"test":"test"}' }

files [ { fieldname: 'file',
    originalname: 'acfcdea5-28d2-4f2e-a897-1aef3507193d.jpg',
    encoding: '7bit',
    mimetype: 'image/jpeg',
    destination: './uploads/',
    filename: 'acfcdea5-28d2-4f2e-a897-1aef3507193d.jpg',
    path: 'uploads\\acfcdea5-28d2-4f2e-a897-1aef3507193d.jpg',
    size: 49647 } ]