Ionic 4 - Error while accessing JSON object

Ionic Framework Ionic Angular
1

Hello.
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';

@Component({
  selector: 'app-uploader',
  templateUrl: './uploader.page.html',
  styleUrls: ['./uploader.page.scss'],
})
export class UploaderPage implements OnInit {

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

  ngOnInit() {
  }

  fileChanged(event){
    const  files = event.target.files;
    
    // console.log(files)
    var cdn = 'https://upload.uploadcare.com/base/'


    const data = new FormData()
    data.append('file',files[0])
    data.append('UPLOADCARE_STORE','1')
    data.append('UPLOADCARE_PUB_KEY','44461d3206752c093277')
    

    this.http.post(cdn,data).subscribe(event=>{
      // this.alertShow("Succesful","Your photo uploaded.")
      **this.imageURL= event.json().file //PROBLEM IS HERE**
      console.log(event)
    })

  }

}
2

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

3

Adsız
This is object and I need “file” attribute.

4

why do you call .json() in between?

5

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

6

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:

this.http.post(cdn,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!

7

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

8

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 this.http.post<MyEvent>(cdn, data);
1 Like
9

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

10

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.