Angular how to progamatically send a Form Data

Question

There seems to be no good docs online about sending an api request with a form data.

As soon as you google it google automatically assumes you want to create a client-side reactive forms gui, the actual API part be damned.

and even when you follow their guides to the end you don't get a Form Data section in your browser console.

this is what I want :

however my call looks like this :

here is my current code (component.ts) :

  public picture: FormData;

  addedImage(event) {
    this.picture = event.addedFiles[0];
    console.log(this.picture);
    this.api.uploadFile(this.picture).subscribe();
  }

...and the api part (apis.ts) :

 public uploadFile(file){
    const url = AppGlobal.API_URL + 'provisioning/api/files';
    let httpParams = new HttpHeaders();
    httpParams = httpParams.set('Content-Type', 'multipart/form-data');
    console.log(httpParams);
    return this.http.post<any>(url, file, {headers: httpParams}).pipe(
      map((data: any) => {
        console.log('return ', data);
          if(data) this.s.latestFileId$.next(data);
        }
      ));
  }

here is what is outputted by the console.log in component.ts above :

File {name: "image.jpg", lastModified: 1568824078958, lastModifiedDate: Wed Sep 18 2019 18:27:58 GMT+0200 (Central European Summer Time), webkitRelativePath: "", size: 69192, …}
lastModified: 1568824078958
lastModifiedDate: Wed Sep 18 2019 18:27:58 GMT+0200 (Central European Summer Time) {}
name: "image.jpg"
size: 69192
type: "image/jpeg"
webkitRelativePath: ""
__proto__: File
api.calls.ts:41

...and by the console.log in apis.ts

HttpHeaders {normalizedNames: Map(0), lazyUpdate: Array(1), headers: Map(0), lazyInit: HttpHeaders}
headers: Map(0)
size: (...)
__proto__: Map
[[Entries]]: Array(0)
length: 0
lazyInit: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, headers: Map(0)}
lazyUpdate: [{…}]
normalizedNames: Map(0) {}
__proto__: Object

what am I doing wrong?

here is another faulty syntax that I tried (component.ts) :

  addedImage(event) {
    var oOutput = document.querySelector("div"), oData = new FormData();
    oData.append("myfile", event.addedFiles[0], "filename.txt");
    this.picture = event.addedFiles[0];
    console.log(this.picture);
    this.api.uploadFile(oOutput);
  }

(apis.ts) :

  public uploadFile(file){
    const url = AppGlobal.API_URL + 'provisioning/api/files';
    const oReq = new XMLHttpRequest();
    oReq.open('POST', url, true);
    oReq.onload = function(oEvent) {
      if (oReq.status == 200) {
        console.log('upload success');
      } else {
        console.log('upload fail');
      }
    };

    oReq.send(file);
  }

tatsu · Accepted Answer · 2019-09-19 08:11:31Z

4

Use FormData API

const formData: FormData = new FormData();
formData.append('files[]', event.addedFiles[0]);
let httpParams = new HttpHeaders();
httpParams = httpParams.set('Accept', '*/*');
this.http.post('some/url', formData, {headers: httpParams})

You can also refer this guide. This is not Angular specific though.

edited Sep 19, 2019 at 8:11

tatsu

2,5769 gold badges49 silver badges95 bronze badges

answered Sep 18, 2019 at 17:06

sabithpocker

15.6k1 gold badge44 silver badges77 bronze badges

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

1 Comment

tatsu Over a year ago

I edited your answer to include what worked for me but other than that thank you soooo much that did the trick! :D

Abolfazl Roshanzamir · Accepted Answer · 2019-09-18 17:37:44Z

2

try this:

constructor(private http: Http) {}
private baseUrl = "api/sth";

private sendData():observable<any>{
    const formData: FormData = new FormData();
    formData.append(key, value);

    const headers = new Headers();
    headers.append("Accept", "application/json");
    const options = new RequestOptions({ headers: headers });

    return this.http
        .post(`${this.baseUrl}/url`, formData, options)
        .catch(this.handleError);
}


private handleError(error: Response): Observable <any> {
    console.error("observable error: ", error);
    return Observable.throw(error.statusText);
}

If you would like to send an image to the server by formData visit this

answered Sep 18, 2019 at 17:37

Abolfazl Roshanzamir

15.1k9 gold badges76 silver badges83 bronze badges

Collectives™ on Stack Overflow

Angular how to progamatically send a Form Data

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related