Problem with converting response from Http request

From the image you posted, it seems the request is not a CategoryModel, but a list of CategoryModels inside a HttpResponse-object. Since you are using http.request, you will get many responses, and each have a different HttpEventType found here. You need to filter the response for each type, and get the content you want based on the type (e.g. event.type === HttpEventType.Response).

Try this:

storeCategory(file: File, category: CategoryModel): Observable<CategoryModel[]> {
    const formdata: FormData = new FormData();
    console.log("1")
    formdata.append('file', file);
    formdata.append('category', new Blob([JSON.stringify({ "category_name": category.category_name, "category_description": category.category_description })], { type: "application/json" }))
    const url = `api/cateogry/saveCategory`;
    const req = new HttpRequest('POST', url, formdata, {
      reportProgress: true,
      responseType: 'text'
    });
    return this.http.request<any>(req).pipe(map(event => {
     console.log("event",event);
     if(event.type == HttpEventType.Response){ // try different event types based on desired result.
      event.body = event.body.replace(/\\/g,"/"); // replace all double backslashes with slash.
      return <CategoryModel[]>JSON.parse(event.body); // try to parse the data if it is a string
     }
    }));
  }

I changed the return type of the method to be Observable<CategoryModel[]>, and changed the return statement to convert the result to reflect that.

remember to import {map} from 'rxjs/operators' in your component remember to import {HttpEventType} from '@angular/common/http' in your component

And also have a look at the example from the Angular docs

The different HttpEventTypes can be found here