0

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

1 Answer 1

1

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)

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.