uploading a file via API, multipart/form-data

Question

I'm using rembg in my app: https://github.com/danielgatis/rembg

What i want to do Upload a image to my API endpoint using http.post;

Running this code:

this.photoService.readFile(this.publicImageUrl.uri).then(res => {

let data = res;
this.oryginalImg = data.data;

this.ApiService.removeBG(this.publicImageUrl.uri).then(res => console.log(res))

})

readFile():

async readFile(path: string) {
  const contents = await Filesystem.readFile({
  path: path
});

return contents;
}

removeBG():

  async removeBG(file: any) {

  let headers = { 'content-type': 'multipart/form-data' };
  let formData = new FormData();
  formData.append('file', file);

  let body = {
    'body': formData
   }


   let promise = new Promise<void>((resolve, reject) => {
      this.http.post(environment.photoServiceURL, body, { headers }).toPromise().then(res => { console.log(res); resolve(); }).catch(err => console.log(err));
});

  }

Response is: Missing boundary in multipart.

Request:

It's look like there's something wrong with attaching a file, am I right? How to attach file from filesystem and upload this file via API?

Try `this.http.post(environment.photoServiceURL,formData, { headers }).toPromise().then(res => { console.log(res); resolve(); }).catch(err => console.log(err));` Add FormData as the body OR a JSON object. A FormData inside a JSON will be throw your error. — Flo, Nov 27 '22 at 10:14
Try it without to set the header `content-type` this will angular do automatically. Read more here: https://stackoverflow.com/questions/39280438/fetch-missing-boundary-in-multipart-form-data-post — Flo, Nov 27 '22 at 10:55
Looks like it helped, but i think i got problem with attaching files: [HTTP/1.1 400 Bad Request 119ms] 1 -----------------------------338325175014467820091313680227 Content-Disposition: form-data; name="file" /DATA/1669547487808.jpeg -----------------------------338325175014467820091313680227-- " There's no file content, only URI to file, and angular didn't recognize filetype — symfonyBeginner, Nov 27 '22 at 11:13

score 1 · Answer 1 · answered Nov 27 '22 at 12:04

1

If you using @capacitor/filesystem you need to to the follow:

const response = await fetch(file.data); // where file comes from Filesystem.readFile
const blob = await response.blob();
const formData = new FormData();
formData.append('file', blob, file.name);

// ...then upload your form as above

You need to fetch the data of your given file, get the blob and then set the FormData. Here is a example from Ionic.

Greetings, Flo

answered Nov 27 '22 at 12:04

Flo

2,232
2
11
18

1

Flo, we are closer! i used const dataToBlob = `data:image/${oryginalFileExt};base64,${oryginalImgData}`; and i get finally that I want to get - attached file :-) – symfonyBeginner Nov 27 '22 at 13:52

uploading a file via API, multipart/form-data

1 Answers1