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