Cannot read property 'target' of undefined - Ionic Angular

Question

What im doing wrong to get this error?

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

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

  imageURL: string
  constructor(public http: HttpClient) { }

  ngOnInit() {
  }

  fileChanged(event) {
    const files = event.target.files
    const data = new FormData()
    data.append('file', files[0])
    data.append('UPLOADCARE_STORE', '1')
    data.append('UPLOADCARE_PUB_KEY', 'my key')

    this.http.post('https://upload.uploadcare.com/base/', data).subscribe(event => {
      console.log(event)
      this.imageURL = event.json().file
    })
  }


}

But when i upload a photo i get this error and also i get error that json does not exist on type 'Object'

ERROR TypeError: Cannot read property 'target' of undefined at UploaderPage.fileChanged (uploader.page.ts:16) at Object.eval [as handleEvent] (UploaderPage.ngfactory.js:26) at Object.handleEvent (core.js:43993) at Object.handleEvent (core.js:44774) at dispatchEvent (core.js:29804) at core.js:42925 at HTMLInputElement. (platform-browser.js:2668) at ZoneDelegate.invokeTask (zone-evergreen.js:391) at Object.onInvokeTask (core.js:39680) at ZoneDelegate.invokeTask (zone-evergreen.js:390)

EDITED: This is the HTML "caller"

<ion-header>
  <ion-toolbar>
    <ion-title>Upload Image</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <div class="camera"> </div>
  <input type="file" (change)="fileChanged()"/>

  <img *ngIf="imageURL" src="https://ucarecdn.com/{{ imageURL}}/"/>
</ion-content>

UPDATE
The first part of the problem i got fixed by alexortizl (the accepted answer below).

The json part i fixed it from this source where i just need to remove json.parse because the url was already in json format.

Perhaps the event is not being passed to the function correctly? can you share the caller? — arif08
– arif08, Commented Apr 26, 2020 at 17:27

alexortizl · Accepted Answer · 2020-04-26 19:12:29Z

1

event is undefined in fileChanged because it's not being passed when the event is raised. You need to pass the event payload in the HTML:

<input type="file" (change)="fileChanged($event)"/>

This is angular syntax, here $event is the variable with the Event object raised by the change event.

answered Apr 26, 2020 at 19:12

alexortizl

2,7173 gold badges18 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mahir Over a year ago

thank you it makes sense but i have problem with the json thing " Property 'json' does not exist on type 'Object'."

alexortizl Over a year ago

In this case event refers to the POST response, it could be a good idea to rename it to something else to avoid confusion with the other event variable. If you need to parse that response to json you could try this.imageURL = JSON.parse(event).file

Mahir Over a year ago

now i get error in the (event) saying Argument of type 'Object' is not assignable to parameter of type 'string'.

alexortizl Over a year ago

@MahirMersimoski what is shown in the console when you do console.log(event)?

Collectives™ on Stack Overflow

Cannot read property 'target' of undefined - Ionic Angular

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related