Receive a photo file and save it in an array by Angular 9

Question

I have the address of a photo and I want to put the file of that photo in the array but I have a problem How to do it?

I did the following:

AppComponent.ts:

export class AppComponent  {
  constructor(private http:HttpClient){}
  files:any[]=[];
  url:string="https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg"
  getImage(){
    this.http.get(this.url).subscribe(
      res=>{
        this.files.push(res);
        console.log(this.files)
      },
      err=>{
        console.log("Error");
        console.log(err);
      }
    )
  }
}

AppComponent.html:

<button class="btn" (click)="getImage()">Click Me</button>

console:

    Error
    error: {error: SyntaxError: Unexpected token � in JSON at position 0 at JSON.parse (<anonymous>) at XMLHtt…, text: "����JFIF,,���Photoshop 3.08BIM�…��-�� ���O�0��@Q@Q@Q@Q@Q@Q@Q@��"}
    headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
    message: "Http failure during parsing for https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg"
    name: "HttpErrorResponse"
    ok: false
    status: 200
    statusText: "OK"
    url: "https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg"

I want to send the photos to the server after receiving them and I need to send the photo file, how do I put the photos in the file presentation?

Answer 1

if I understand correctly, you want to download photos from a server and then send to them to another server as files. if yes, then you should download them as blob, please see this answer, then save the blobs in to your array and do what you want.

Your code is trying to reading response as json which is standard in http call, that is what the error tried to say.