How to post uploaded files and json data to API in Angular2?

Question

So, I have to send a file (or files) together with other json data.

From what I've searched, I can only send files alone or convert them to base64 and then send the json with the base64 code to the API (not confirmed).

Is there another way to send files that is not converting them to base64?

We already had a problem with base64 and images where our GET was taking a lifetime to load because of the length of the base64 strings.

EDIT: So, I just tried to send it as base64 and it worked, so, it works, I just want to avoid send it that way.

I finally found a proper way to upload a file and send some JSON within the same request and made a proper answer here: https://stackoverflow.com/questions/39693966/how-to-angular2-post-json-data-and-files-in-same-request/47408232#47408232 — maxime1992, Nov 21 '17 at 08:18

score 0 · Answer 1 · answered Jun 18 '17 at 18:55

you need add image data in the form like this.

<form (submit)="submit(formData)" #formData="ngForm">
  <div class="form-group">
    <label for="name">Product Name:</label><input type='text' name='name' class="form-control" id="name" ngModel>
  </div>
<div class="form-group">
    <label for="image">Image:</label><input type="file" name='image' class="form-control" id="image" ngModel>
  </div>

<button type="submit" class="btn btn-default">Add</button>
</form>

component

submit(formData){
    let inputEl: HTMLInputElement = this.el.nativeElement.querySelector('#image');   
           let fileCount: number = inputEl.files.length;   
            let formData = new FormData();  
            if (fileCount > 0) {
                    formData.append('image', inputEl.files.item(0));
             }

// Now call your service.

    }

this is pseudo code but you can add image in the form data and send to backend. otherwise you can make two post request one for form data and another for the image.

I'm using formGroup to build the form, is there any difference? — user64324, Jun 18 '17 at 19:11
i think their will be no difference. did u tried with formGroup? — CharanRoot, Jun 18 '17 at 19:32
just tried, it appears to be sending the right body on the request, but does the backend have to change anything to accept the formData data? I tried to send it but got validation errors back, as if i sent nothing. — user64324, Jun 18 '17 at 19:40

How to post uploaded files and json data to API in Angular2?

1 Answers1