I want to upload a simple image from my Hard Disk to my Angular page in order to show into a carousel. I have an API in .Net that I pretend to use with Angular, but in that moment only test my frontend page in Angular with fake data, I don't save it in any DB for now.
My problem is that I need the path of the file to use it into img tag element in the component. But every tima that I choose the image and click into submit button, the console shows C:/fakepath/thefile.png, and give me a warning about "Sanitizing unsafe url", and the carousel add a new "image" but that doesn't shows obiously, because the path isn't correct.
I tried a lot of things with DomSanitizer and more, but nothing works, or I don't implement correctly in my code, I dont know.
My frontend repo: https://github.com/diegorus92/Frontend-ImageCollection/tree/develop My backend repo (if its necesary): https://github.com/diegorus92/Backend-ImageCollection/tree/develop
IMAGE-FORM TEMPLATE HTML
<div class="container text-center mt-5">
<form [formGroup]="imageForm" (ngSubmit)="onSubmit($event)">
<div class="row align-items-start">
<div class="col"></div>
<div class="col">
<input type="file"
name="image_chooser"
id="image_chooser"
accept="image/jpeg, image/png"
formControlName="imageFile">
</div>
<div class="col"></div>
</div>
<div class="row align-items-start">
<div class="col-11">
<label for="image_description">Description:</label>
<input type="text"
name="image_description"
id="image_desctription"
formControlName="description">
</div>
<div class="col-1"></div>
</div>
<div class="row align-item-center">
<div class="col">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</div>
</form>
</div>
IMAGE-FORM COMPONENT TS
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ImagesService } from 'src/app/services/images.service';
@Component({
selector: 'app-image-form',
templateUrl: './image-form.component.html',
styleUrls: ['./image-form.component.css']
})
export class ImageFormComponent implements OnInit {
imageForm = this.formBuilder.group({
imageFile: [],
description: ['']
});
fileInput:any;
constructor(private formBuilder:FormBuilder, private imageService:ImagesService) { }
ngOnInit(): void {
}
onSubmit(event:any):void{
event.preventDefault();
console.log(this.imageForm.value['imageFile']);
this.imageService.saveImage(this.imageForm.value);
}
}
IMAGE CAROUSEL TEMPLATE HTML
<div class="container-sm text-center">
<div class="row align-items-center">
<div class="col"></div>
<div class="col">
<ngb-carousel *ngIf="images" >
<ng-template ngbSlide *ngFor="let image of images">
<div class="picsum-img-wrapper">
<img [src]="image.Path" alt={{image.Name}}>
<!--<img src="./assets/img/test.jpg" alt={{image.Name}}/>-->
</div>
<div class="carousel-caption">
<h3>{{image.Name}}</h3>
<p>{{image.Description}}</p>
<i class="bi bi-pencil-fill"></i>
<i class="bi bi-trash3-fill"></i>
</div>
</ng-template>
</ngb-carousel>
</div>
<div class="col"></div>
</div>
</div>
<!--<div class="row">
<div class="col"></div>
<div class="col-6">
<div id="carouselExampleCaptions" class="carousel slide">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner" *ngIf="images">
<div class="carousel-item active" *ngFor="let image of images">
<img [src]="image.Path" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>{{image.Name}}</h5>
<p>{{image.Description}}</p>
<i class="bi bi-pencil-fill"></i>
<i class="bi bi-trash3-fill"></i>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<div class="col"></div>
</div>-->
IMAGE CAROUSEL COMPONENT TS
import { Component, OnInit } from '@angular/core';
import { ImagesService } from 'src/app/services/images.service';
import { Image } from 'src/interfaces/IImage';
import { NgbCarouselModule } from '@ng-bootstrap/ng-bootstrap';
import { DomSanitizer } from '@angular/platform-browser';
@Component({
selector: 'app-images-carousel',
templateUrl: './images-carousel.component.html',
styleUrls: ['./images-carousel.component.css']
})
export class ImagesCarouselComponent implements OnInit {
images:Image[]=[];
constructor(private imageService:ImagesService, private sanitizer:DomSanitizer) { }
ngOnInit(): void {
this.getImages();
console.log(this.images);
}
getImages(){
this.images = this.imageService.getImages();
}
}
IMAGE SERVICE TS
import { Injectable } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { IMAGES } from 'src/fake_data/FakeImages';
import { Image } from 'src/interfaces/IImage';
@Injectable({
providedIn: 'root'
})
export class ImagesService {
private _fakeImages:Image[] = IMAGES;
constructor(private sanitizer:DomSanitizer) { }
getImages(){
return this._fakeImages;
}
saveImage(newImage:any):void{
console.log(newImage);
const image:Image = {
ImageId: 0,
Name: "",
Extension: "jpg",
Description: newImage.description,
Path: newImage.imageFile
}
console.log(image);
this._fakeImages.push(image);
}
}
Thank you :)
I try to upload an image from my Hard Disk to my Simple page in Angular