How to Pass formData, image to my HTTP post request for an API I'm using?

Question

I don't know how to pass my file/image to the formData. Can anyone tell me how to do this in the right way?

myImage = '../assets/imgs/testing.jpg';

recognize(){

    let headers = new Headers();

    headers.append('Content-Type', 'application/json');
    headers.append('apikey', 'myAPI');

    console.log(headers);



    let formData = {
       file: {

      }
    }

    console.log(formData);

    this.http.post('https://api.taggun.io/api/receipt/v1/simple/file', formData, {headers: headers})
      .map(res => res.json()).subscribe(data =>{
        console.log(data);
      });
    }
  }

Objects created by the [formData API](https://developer.mozilla.org/en-US/docs/Web/API/FormData) must be passed directily to the XHR. Use [formData.append](https://developer.mozilla.org/en-US/docs/Web/API/FormData/append) to add images to it. — georgeawg, Jan 26 '19 at 20:15

Vadi · Accepted Answer · 2019-01-27T01:06:29.387

0

If you're using angular (as specified in tag), the solution would be the following:

Component HTML template:

<input
style="display: none"
type="file" (change)="onImgChanged($event)"
#fileInput>
<button (click)="fileInput.click()">Select Your Image</button>
<button (click)="onUpload()">Upload!</button>

Component:

// variable for holding your image
selectedImg;

onImgChanged(event) {
  this.selectedImg = event.target.files[0];
}

onUpload() {
  const headers = new Headers({
    'Accept': 'application/json',
    'apikey', 'myAPI'
  });

  console.log(headers);

  // get instance of formData:
  const formData = new FormData();

  // append an image to your formData:
  formData.append('myFile', this.selectedImg, this.selectedImg.name);

  // make post request:
  this.http.post('https://api.taggun.io/api/receipt/v1/simple/file', formData, {headers: headers})
    .map(res => res.json())
    .subscribe(data => {
      // response from api...
      console.log(data);
    });
}

edited Jan 27 '19 at 01:06

answered Jan 26 '19 at 21:45

Vadi

3,279
2
13
30

When posting formData objects, it is important to delete the `Content-Type` header so as to avoid overriding the [XHR API](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) which will insert the proper header with the proper form data boundary. – georgeawg Jan 27 '19 at 00:23
in this.selectedImg and this.selectedImg.name, am i gonna exactly put it like that? – Mark de asis Jan 27 '19 at 00:27
there some problems regarding to the this.selectedImg , it says the "Argument of type of 'TypeofFile' is not assignable to parameter type 'string | blob' – Mark de asis Jan 27 '19 at 00:44
@georgeawg thank you for commenting, I've corrected the answer – Vadi Jan 27 '19 at 00:47
@Markdeasis I've edited, please try – Vadi Jan 27 '19 at 01:02
@georgeawg ahm what about if i want to make use this request for native app? what can i use forgetting image from camera or gallery? – Mark de asis Jan 30 '19 at 13:16
@Markdeasis depends on what native app's written. This solution is for angular. But as you've specified `ionic` tag, some information might be found here https://forum.ionicframework.com/t/how-to-upload-file-using-post-method-in-ionic/101487/13. It's working similarly: creating an instance of FormData and appending file to it, then sending. – Vadi Jan 30 '19 at 14:06

How to Pass formData, image to my HTTP post request for an API I'm using?

1 Answers1