I've encountered a URL sanitization error in Angular and despite researching various solutions, I have been unable to implement any of them successfully in my specific case. Hence, I am reaching out for assistance.
Below is the function causing the issue:
@Input()
maxFileSize: number = 1000000;
public fileChangeEvent(fileInput: any) {
if (fileInput.target.files && fileInput.target.files[0]) {
const reader = new FileReader();
reader.onload = (e: any) => {
if (e.target.result) {
if (e.target.result.length < this.maxFileSize) {
this.value = e.target.result;
} else {
alert(`Logo size ${e.target.result.length} cannot exceed ${this.maxFileSize} bytes.`);
}
}
};
reader.readAsDataURL(fileInput.target.files[0]);
}
}
I attempted to use this.sanitizer.bypassSecurityTrustUrl(url), however, since fileInput.target.files[0] is a blob in my situation, I consistently encounter an error when trying to wrap it with the sanitizer function.
This is how I'm using it in the view:
<ng-container *ngIf="value">
<div class="input-group-append">
<div class="img-thumbnail">
<img src="{{value}}" alt="Preview" />
</div>
<button class="btn btn-danger btn-lg" type="button" (click)="clearLogo()">
<i class="fa fa-trash" aria-hidden="true"></i>
Delete
</button>
</div>
</ng-container>
enter code here
I also tried [src]="{{value}}", but that approach did not yield positive results either.
The error message displayed is:
WARNING: sanitizing unsafe URL value
I seek guidance on where I might be making a mistake.