CODEWITHSUNDEEP
javascriptnode.jsangular
Dmytro Yamborko
Dmytro Yamborko

Reputation: 115

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

Upvotes: 0

Views: 793

Answers (1)

Yushox
Yushox

Reputation: 172

Your app is loaded in memory when doing "ng serve". Adding files in your assets won't get them in memory. You should get your files from you api (something like http://localhost:8080/api/v1/file/FileID)

Upvotes: 1

Related Questions