Angular 2 post request not send image data

Question

I'm sending an image using a form and when it does the submit send the request without data. Here my code:

component.html

<form [formGroup]="logoImageForm" *ngIf="representativeSelected != null" (ngSubmit)="onSubmit(logoImageForm)">
    <md-grid-list cols="6" rowHeight="50">
        <md-grid-tile>
            <input type="file" id="logo_image" formControlName="logo_image" name="logo_image" ngModel (change)="onChange($event)">
        </md-grid-tile>
    </md-grid-list>
    <md-card-actions>
        <button md-raised-button color="primary" type="submit">Save</button>
    </md-card-actions>
</form>

component.ts

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

onSubmit(logoImage){
this.representativeS.uploadLogoImage(this.file)
  .subscribe(
  data => {
    swal('', 'Image updated!', 'success');
  },
  error => {
    swal('Error', '<p>' + error.message + '</p>', 'success');
  });
}

representativeS (service)

uploadLogoImage(file){
   let url = this.routesS.getApiRoute('logoImage');
   console.log(file);
   return this.http.post(url, JSON.stringify({fileData: file}),{ withCredentials: true, headers: this.headersImage })
     .map((response: Response) => {
       return response.json();
     })
     .catch(this.handleError);
}

NodeJS

var storage = multer.diskStorage({
destination: function (req, file, callback) {
    callback(null, 'path/test');
},
filename: function (req, file, callback) {
    callback(null, 'logo-image')
}
});

var upload = multer({ storage: storage }).single('logo-image');

router.route('/representatives/:id/logoImage')
   .post((req, res, next) => {
       upload(req, res, function (err) {
           if (err) {
               console.log('Error Occured');
               return;
           }
           res.end('Your File Uploaded');
       })
   });

When I do the submit, if I check my request sended it shows something like that {fileData: {}}. Why is it sending a void data?

Does it work with this.file = event.srcElement.files[0]?

Powkachu
– Powkachu

2017-04-25 12:12:55 +00:00
Commented Apr 25, 2017 at 12:12 — Powkachu
– Powkachu, Commented Apr 25, 2017 at 12:12
Yes, it does, but the request still sending a void object

Crisiiii
– Crisiiii

2017-04-26 07:05:31 +00:00
Commented Apr 26, 2017 at 7:05 — Crisiiii
– Crisiiii, Commented Apr 26, 2017 at 7:05

Community · Accepted Answer · 2017-05-23 11:33:13Z

1

I think the problem is how you send your file.

This answer in another question might help you: https://stackoverflow.com/a/35669598/5049472

edited May 23, 2017 at 11:33

CommunityBot

11 silver badge

answered Apr 26, 2017 at 7:46

Powkachu

2,2682 gold badges28 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Crisiiii Over a year ago

Thanks a lot, I didn't know that about the http request!

Collectives™ on Stack Overflow

Angular 2 post request not send image data

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related