From 8c55838c94c2f438bebfab4d4af34e553a333de0 Mon Sep 17 00:00:00 2001 From: Nikita Barsukov Date: Mon, 25 Mar 2024 18:28:57 +0300 Subject: [PATCH 1/2] fix(kit): `File` throws SSR error `ReferenceError: File is not defined` --- projects/kit/components/files/file/file.component.ts | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/projects/kit/components/files/file/file.component.ts b/projects/kit/components/files/file/file.component.ts index df67bcce88ed..3fb57bae843a 100644 --- a/projects/kit/components/files/file/file.component.ts +++ b/projects/kit/components/files/file/file.component.ts @@ -146,8 +146,13 @@ export class TuiFileComponent { return file.src; } - // TODO: iframe warning - if (file instanceof File && file.type && file.type.startsWith('image/')) { + if ( + globalThis.File && + // TODO: iframe warning + file instanceof globalThis.File && + file.type && + file.type.startsWith('image/') + ) { return this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(file)); } From 2f1df01bfb1d6c86efb4b2192800ee68ebac5ac3 Mon Sep 17 00:00:00 2001 From: Nikita Barsukov Date: Tue, 26 Mar 2024 10:56:19 +0300 Subject: [PATCH 2/2] chore: replace `globalThis.File` with `inject(WINDOW).File` --- projects/kit/components/files/file/file.component.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/projects/kit/components/files/file/file.component.ts b/projects/kit/components/files/file/file.component.ts index 3fb57bae843a..d2dafe32c386 100644 --- a/projects/kit/components/files/file/file.component.ts +++ b/projects/kit/components/files/file/file.component.ts @@ -10,6 +10,7 @@ import { } from '@angular/core'; import type {SafeValue} from '@angular/platform-browser'; import {DomSanitizer} from '@angular/platform-browser'; +import {WINDOW} from '@ng-web-apis/common'; import type {TuiContext} from '@taiga-ui/cdk'; import {tuiIsObserved, tuiPure} from '@taiga-ui/cdk'; import type {TuiSizeL} from '@taiga-ui/core'; @@ -51,6 +52,7 @@ export class TuiFileComponent { private readonly sanitizer = inject(DomSanitizer); private readonly options = inject(TUI_FILE_OPTIONS); private readonly units$ = inject(TUI_DIGITAL_INFORMATION_UNITS); + private readonly win = inject(WINDOW) as Window & {File: typeof File}; @Input() public file: TuiFileLike = {name: ''}; @@ -147,9 +149,8 @@ export class TuiFileComponent { } if ( - globalThis.File && - // TODO: iframe warning - file instanceof globalThis.File && + this.win.File && + file instanceof this.win.File && file.type && file.type.startsWith('image/') ) {