Uploading files with Angular to Multer

Question

I have a problem with uploading to my backend with Angular.

this is my component.html

<input type="file" (change)="fileChange($event)" placeholder="Upload file">

This is my component.ts

fileChange(event) {
  let fileList: FileList = event.target.files;
  if(fileList.length > 0) {
    let file: File = fileList[0];
    let formData: FormData = new FormData();
    formData.append('file', file, file.name);
    console.log(formData);
    let headers = new Headers();
    headers.append('Accept', 'application/json');
    const token = localStorage.getItem('token') ? '?token=' + localStorage.getItem('token') : '';
    this.http.post('http://localhost:3000/stretch/1' + token, formData, { headers: headers })
      .map(res => res.json())
      .catch(error => Observable.throw(error))
      .subscribe(
        data => console.log(data),
        error => console.log(error)
      );
  }
}

This is my backend with NodeJS/express + Multer

var upload = multer({ dest: 'uploads/' }).single('file');


router.post('/1', upload, function (req, res, next) {
    var decoded = jwt.decode(req.query.token);

    User.findById(decoded.user._id, function (err, user) {
        if (err) {
            return res.status(500).json({
                title: 'An error occurred',
                error: err,
            });
        }

        if (!req.file){
            return res.status(500).json({
                title: 'An error occurred',
                error: "No invoice document recieved"
            });
        }
    });
});

And this is what I get on my console:

Screenshot of console

I am not sure what the problem is or what I am missing I feel like I tried almost anything.

What confuses me though is that when I console.log the formData, it look empty even though I just selected a file. Is that normal?

Your help is much appreciated.

what is node error?

Lucas
– Lucas

2018-02-22 03:29:52 +00:00
Commented Feb 22, 2018 at 3:29 — Lucas
– Lucas, Commented Feb 22, 2018 at 3:29
Error: Unexpected field

David Storm
– David Storm

2018-02-22 04:42:27 +00:00
Commented Feb 22, 2018 at 4:42 — David Storm
– David Storm, Commented Feb 22, 2018 at 4:42

HEMANT PATEL · Accepted Answer · 2018-02-22 04:56:27Z

import { Component,ElementRef, OnInit } from '@angular/core';
import { Http, Headers, RequestOptions } from '@angular/http';
import 'rxjs/add/operator/map';
import "rxjs/add/operator/do";

export class HomeComponent implements OnInit {
 constructor(private http: Http,private el: ElementRef) {

 }

 upload() {
    let inputEl: HTMLInputElement =  this.el.nativeElement.querySelector('#photo');
    let fileCount: number = inputEl.files.length;
    let formData = new FormData();
    if (fileCount > 0) { // a file was selected
        for (let i = 0; i < fileCount; i++) {
            formData.append('file', inputEl.files.item(i));
        }
        let headers = new Headers();
        headers.append('Accept', 'application/json');
        const token = localStorage.getItem('token') ? '?token=' + localStorage.getItem('token') : '';
            this.http.post('http://localhost:3000/stretch/1' + token, formData, { headers: headers }).map(res => res.json())
            .catch(error => Observable.throw(error))
            .subscribe(
                data => console.log(data),
                error => console.log(error)
        );
    }
  }
}


// html code 

  <input id="photo" type="file" />
  <button type="button" class="btn btn-success btn-s" (click)="upload()">Upload</button>


my node code 

 var multer      = require('multer');   //FOR FILE UPLOAD
 var storage = multer.diskStorage({ //multers disk storage settings
   destination: function (req, file, cb) {
    cb(null, './public/uploads'); //image storage path
   },
   filename: function (req, file, cb) {
    var datetimestamp = Date.now();
    cb(null, file.originalname);
   }
 });

 var upload = multer({ //multer settings
  storage: storage
 }).single('file');


 router.post('/1', upload, function (req, res, next) {
   var decoded = jwt.decode(req.query.token);
   var path = '';

   User.findById(decoded.user._id, function (err, user) {
    if (err) {
     return res.status(500).json({
      title: 'An error occurred',
      error: err,
     });
    }

    if (req.file){
     upload(req, res, function (err) {
      if (err) {
       // An error occurred when uploading
       return res.status(422).send("an Error occured");
      }  
      // No error occured.
      path = req.file.path;
      return res.status(200).send(path); 
    }); 
   }
 });
});

Collectives™ on Stack Overflow

Uploading files with Angular to Multer

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related