Angular multipart/formdata

You would like to upload or post something not as an `application/json` but as a `multipart/formdata`.

It’s pretty simple, simpler than you would’ve thought 🙂

1. create the FormData instance

public JSON2FormData() {
const fd = new FormData();
}

then you can use .set or .append methods to add values to the post body of the FormData.


public JSON2FormData() {
const fd = new FormData();
fd.set('greeting', 'hello there');
// upload a file, as in `File()`
// let's assume our component has a `private file: File = new File()`
fd.set('file', this.file, 'filename'); // or file.name instead of 'filename'
// or you have an object that you'd like to send as a JSON object
// let's assume out component has a `private myobject: object = {}`
fd.set('myjson', JSON.stringify(this.myobject));
}

and finally we upload it or send it away, rather.


// some service
public uploadFormData(fd: FormData) {
return this.http.post('/url', fd);
}

if we have a file upload and would like to be notified about upload progress

public uploadFormData(fd: FormData) {
return this.http.post('/url', fd, {
reportProgress: true,
observe: 'events',
});
}

when we subscribe to this, we have several events happening.


this.formdataService.uploadFormData.subscribe(event => {
switch (event.type) {
case HttpEventType.UploadProgress:
case HttpEventType.ResponseHeader:
case HttpEventType.Response:
// etc
}
})

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.