How do I resolve sanitizing unsafe URL value with blob value?

Question

I'm having this sanitize URL error in Angular, I've seen many solutions, but I've not been able to use them in my scenario, that's why I'm asking the question.

Here is my function:

@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've tried this.sanitizer.bypassSecurityTrustUrl(url), but in my case, fileInput.target.files[0] is a blob, so I always get an error when wrapping it worth the sanitizer function.

I'm using it in the view like this:

 <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've also tried [src]="{{value}}", but that did not work as well.

I'm getting this error:

WARNING: sanitizing unsafe URL value

Please where am I getting it wrong?

Can you provide some details of your actual error?

Alex
– Alex

2022-07-29 11:18:38 +00:00
Commented Jul 29, 2022 at 11:18 — Alex
– Alex, Commented Jul 29, 2022 at 11:18

Basu Dev Adhikari · Accepted Answer · 2022-07-30 08:20:51Z

1

I hope this fixes your issue.

constructor(private sanitizer:DomSanitizer){...}
    ....
    
          let file = event.target.files[0];
          let blob = new Blob([file], { type: file.type });
          let url = window.URL.createObjectURL(blob);
    
          this.value = this.sanitizer.bypassSecurityTrustUrl(url);

answered Jul 30, 2022 at 8:20

Basu Dev Adhikari

1147 bronze badges

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

Collectives™ on Stack Overflow

How do I resolve sanitizing unsafe URL value with blob value?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related