Argument of type ‘Object’ is not assignable to parameter of type ‘string’ - Ionic Angular

Question

Trying to parse with JSON but i get this error: Argument of type 'Object' is not assignable to parameter of type 'string'.

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', '12d3f0b0b65cb448aa6b')

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


}

In the line this.imageURL = JSON.parse(event).file under (event) i get that error. What could be the cause and how to fix it.

The HTML :

<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($event)"/>

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

What is the need of JSON.parse() here? Is event response a string in the format of a JSON? — Barremian
– Barremian, Commented Apr 26, 2020 at 22:04
@MichaelD i need a url of the upload in uploadcare so i can show the photo in my html code — Mahir
– Mahir, Commented Apr 26, 2020 at 22:15

Barremian · Accepted Answer · 2020-04-26 22:18:40Z

1

You are close. It appears the response from the POST request is already in JSON format. You don't need the JSON.parse() here. Try the following

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

It is also good practice to make the actual HTTP request in a service and to handle the error in the subscription.

answered Apr 26, 2020 at 22:18

Barremian

31.2k4 gold badges37 silver badges67 bronze badges

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

3 Comments

Mahir Over a year ago

even tho it works i get the pic and i can show it in my HTML but i get the following: Property 'file' does not exist on type 'Object'

Barremian Over a year ago

That might be a TS Lint error because it doesn't have any reference to the object returned by the API. You could overcome it by using this.imageURL = event['file']; instead.

Mahir Over a year ago

really helpful thank you very much, it solved my problem

Collectives™ on Stack Overflow

Argument of type ‘Object’ is not assignable to parameter of type ‘string’ - Ionic Angular

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related