api endpoint returns response 404

I have method to save image. Initial this.educationalData gives back data in console.log but after that when i try to get id from endpoint. It gives me undefined.

UPDATED
it is now sending id of 1 but still respond of 404

saveImage() {
  const file = this.imageChangedEvent;
  const reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = () = >{
    this.apiService.postData('educational-award/'   this.educationalData[0].id, {
      "photo": reader.result,
      "id": this.educationalData[0].id
    }).subscribe(data = >{
      console.log('test')
    });
  };
}

UPDATE (latest)
I found out i was using the wrong endpoint. Im sorry for causing trouble to everyone.

Route::post('/upload-picture', [UserController::class, 'uploadPicture']);

Screenshot to give more clarity

UPDATED

CodePudding user response：

When you build your backend route like this

Route::post('/educational-award/{educational_background}',...)

you have to put the {educational_background} parameter directly inside the url string and not as a payload parameter. In your case you are passing the id as a payload parameter.

Why you are getting an undefined for id, that depends on your educationalData object and how the data is constructed in it.
Update, After I have seen your educationalData it seems that you have an array. So to get the id use this.educationalData [0].id .

In your saveImage function use it like this :

reader.onload = () = >{
this.apiService.postData('educational-award/' this.educationalData[0].id, {
  "photo": reader.result,
  "id": this.educationalData.id
}).subscribe(data = >{
  console.log('test')
});

CodePudding user response：

Param {educational_background} is missing

this.apiService.postData('educational-award/this.educationalData.id', {

CodePudding user response：

The post-endpoint expects a path-param {educational_background}. You need to populate it on the client-side:

this.apiService.postData('educational-award/' this.educationalData[0].id, {
  "photo": reader.result,
  "id": this.educationalData[0].id
}).subscribe(data = >{
  console.log('test')
});