Ionic 4 - Error while accessing JSON object

I’m using uploadcare to store images. In my application, I upload an image and it returns JSON object, but after that, I can’t use event object. I want to show image in the same page, but event object doesn’t give me “file” value. How can I solve it? I am also beginner :slight_smile: Thanks.

import { Component, OnInit } from '@angular/core';
import {HttpClientModule, HttpClient} from '@angular/common/http';
import { AlertController } from '@ionic/angular';
import {Router}from '@angular/router';

  selector: 'app-uploader',
  templateUrl: './',
  styleUrls: ['./'],
export class UploaderPage implements OnInit {

  constructor(public http:HttpClient,public router:Router,public alert:AlertController) { }

  ngOnInit() {

    const  files =;
    // console.log(files)
    var cdn = ''

    const data = new FormData()
      // this.alertShow("Succesful","Your photo uploaded.")
      **this.imageURL= event.json().file //PROBLEM IS HERE**



So you are uploading the Image somewhere and what is the Result event of that? What does the JSON looks like?

This is object and I need “file” attribute.

why do you call .json() in between?

What should I use? How can I define “event” object?

Normally the Type is any i guess so it could be everything, in your case it is an object. Something i always do to not work with any is map the json response into a own Class like:,data).subscribe(event=> {
      const myEvent = new MyEvent(event);

// Define a Class in a separate File
export class MyEvent {
  file: string;

  constructor(source: any) {
    // So here the Source is the Response from the Server. As we know this we can handle it as a object:
    this.file = source.file:

This Mapping is optional. It should work for you if you just access the File Attribute via event.file, but i really suggest you to not work with any types!

Now it works. Thank you so much, it is really helpful :slight_smile:

For an alternative POV, I don’t like having to do what @EinfachHans is suggesting, so I would make MyEvent an interface:

export interface MyEvent {
  file: string;

return<MyEvent>(cdn, data);
1 Like

Yeah that is easier for this. I do it like i do, because i often have to transform things in the constructor.

It’s interesting that this topic came up twice today. See this post for a more detailed explication, but in short: one problem I kept running into when I was “transforming things in the constructor” was the fact that I couldn’t tap into the rich collection of resources that would ordinarily be available via DI. When I switched instead to moving all intelligence into providers and making all data-bearing objects be dumb interfaces, this limitation melts away, and the responsibility for doing the transformation moves to the service.