lundi 30 septembre 2019

Assign Src To Images Dynamically In Angular

I try to upload file in Angular. I added a button that calls the post a method that writes an image to a database and saves it to a folder "assets". This image must show up in . This file is successfully post and stored on assets but it doesn`t shows up and i get error

But after i reload Angular CLI server it already works.

My input

<div class="form-group">
        <label for="inputPhotoGame">Select a game photo</label>
        <input type="file" class="form-control-file" id="inputPhotoGame" (change)="fileProgress($event)">
      </div>

My img

<img alt="photo" [src]=game.img_game>'''

Component class
'''import { Component, OnInit } from '@angular/core';

import {Genre} from '../../models/Genre';
import {MatIconRegistry} from '@angular/material';
import {CustomIconService} from '../../services/CustomIconService';
import {Game} from '../../models/Game';
import {FormComponent} from '../form/form.component';
import {GameService} from '../../services/GameService';

@Component({
  selector: 'app-add-game',
  templateUrl: './add-game.component.html',
  styleUrls: ['./add-game.component.scss']
})
export class AddGameComponent implements OnInit {

  genresList: Genre [];
  searchStringForFiltrSearchArcade: string = '';
  selectedPlatformIcon: string = '';
  fileToUpload: File = null;
  game: Game = new Game();
  previewUrl:any = null;

  constructor(private customIconService: CustomIconService, private gameService: GameService) {
    this.customIconService.init();
    this.genresList = [{name: 'Arcada'}, {name: 'Sport Simulator'}, {name: 'MOBA'}, {name: 'MMO RPG'}, {name: 'RPG'}, {name: 'Shuter'}];
  }

  ngOnInit() {
  }

  changePlatform() {
    switch (this.game.platform_game) {
      case 'Xbox': {
        this.selectedPlatformIcon = 'icon-xbox';
        break;
      }
      case 'PlayStation': {
        this.selectedPlatformIcon = 'icon-ps';
        break;
      }
      case 'PC': {
        this.selectedPlatformIcon = 'icon-pc';
        break;
      }
      default: alert("Error");
    }
  }

  handleFileInput(fileInput: any){
    // this.fileToUpload = files.item(0);
    // console.log(this.fileToUpload);
    // this.gameService.postFile(this.fileToUpload,"16");
    // alert("file upload")
  }

  fileProgress(fileInput: any) {
    this.fileToUpload = <File>fileInput.target.files[0];
    this.preview();
  }

  preview() {
    let mimeType = this.fileToUpload.type;
    if (mimeType.match(/image\/*/) == null) {
      return;
    }
    let reader = new FileReader();
    reader.readAsDataURL(this.fileToUpload);
    reader.onload = (_event) => {
      this.previewUrl = reader.result;
    };
    this.gameService.postFile(this.fileToUpload,"16");
  }
}

Service class

import {Injectable} from "@angular/core";
import {HttpClient} from "@angular/common/http";
import {Observable} from "rxjs";
import {Game} from "../models/Game";

@Injectable()
export class GameService {

  private readonly usersUrl: string;

  constructor(private httpClient: HttpClient) {
    this.usersUrl = 'http://localhost:8080/api/v1/all';
  }

  public find(): Observable<Game[]> {

    return this.httpClient.get<Game[]>(this.usersUrl);
  }

  postFile(fileToUpload: File, idGame: string) {
    const endpoint = 'http://localhost:8080/api/v1/uploadFile/'+idGame;
    const formData: FormData = new FormData();
    formData.append('file', fileToUpload, fileToUpload.name);
    this.httpClient
      .post(endpoint, formData, { headers: {"cache-control": "no-cache"} }).subscribe((val) => {
        console.log(val);
      });
    return false;
  }
}

And html page error

After reload Angular CLI server




Aucun commentaire:

Enregistrer un commentaire