From 640908182d18565e60e273db7c94bbad0a302165 Mon Sep 17 00:00:00 2001
From: Dmitry <dk981234@gmail.com>
Date: Wed, 4 Oct 2023 09:58:37 +0400
Subject: [PATCH] Fix 'sv-file-preview' component is not available when
 showPreview: false (#7066)

---
 .../file/file-preview.component.html          | 59 ++++++++++---------
 .../src/components/file/FilePreview.vue       |  5 +-
 .../components/file/file-preview.html         |  5 +-
 src/question_file.ts                          |  5 +-
 src/react/components/file/file-preview.tsx    |  3 +
 src/vue/components/file/file-preview.vue      |  2 +-
 6 files changed, 47 insertions(+), 32 deletions(-)

diff --git a/packages/survey-angular-ui/src/components/file/file-preview.component.html b/packages/survey-angular-ui/src/components/file/file-preview.component.html
index e4c4e15017..5b00c0675e 100644
--- a/packages/survey-angular-ui/src/components/file/file-preview.component.html
+++ b/packages/survey-angular-ui/src/components/file/file-preview.component.html
@@ -1,30 +1,35 @@
 <ng-template #template>
-    <div [class]="question.cssClasses.fileList || undefined">
-        <span *ngFor="let val of question.previewValue; index as index; trackBy: trackFilesFn"
-            [visible]="val && question.isPreviewVisible(index)" [class]="question.cssClasses.preview">
-            <div *ngIf="val.name && question.cssClasses.fileSign" [class]="question.cssClasses.fileSign">
-                <a (click)="question.doDownloadFile($event, val)" [attr.href]="val.content | safeUrl"
-                    [attr.title]="val.name" [attr.download]="val.name" [style.width]="question.imageWidth">{{ val.name
-                    }}</a>
-            </div>
-            <div [class]="question.cssClasses.imageWrapper">
-                <img *ngIf="question.canPreviewImage(val)" [attr.src]="val.content | safeUrl"
-                    [style.height]="question.imageHeight" [style.width]="question.imageWidth" alt="File preview" />
-                <svg *ngIf="question.defaultImage(val)" [iconName]="question.cssClasses.defaultImageIconId"
-                    [partCss]="question.cssClasses.defaultImage" [size]="'auto'" sv-ng-svg-icon></svg>
-                <div *ngIf="val.name && !question.isReadOnly" [class]="question.getRemoveButtonCss()"
-                    (click)="question.doRemoveFile(val)">
-                    <span [class]="question.cssClasses.removeFile">{{ question.removeFileCaption }}</span>
-                    <svg *ngIf="question.cssClasses.removeFileSvgIconId" [title]="question.removeFileCaption"
-                        [partCss]="question.cssClasses.removeFileSvg"
-                        [iconName]="question.cssClasses.removeFileSvgIconId" [size]="'auto'" sv-ng-svg-icon></svg>
+    <ng-container *ngIf="question.showPreviewContainer">
+        <div [class]="question.cssClasses.fileList || undefined">
+            <span *ngFor="let val of question.previewValue; index as index; trackBy: trackFilesFn"
+                [visible]="val && question.isPreviewVisible(index)" [class]="question.cssClasses.preview">
+                <div *ngIf="val.name && question.cssClasses.fileSign" [class]="question.cssClasses.fileSign">
+                    <a (click)="question.doDownloadFile($event, val)" [attr.href]="val.content | safeUrl"
+                        [attr.title]="val.name" [attr.download]="val.name" [style.width]="question.imageWidth">{{
+                        val.name
+                        }}</a>
                 </div>
-            </div>
-            <div *ngIf="val.name && question.cssClasses.fileSignBottom" [class]="question.cssClasses.fileSignBottom">
-                <a (click)="question.doDownloadFile($event, val)" [attr.href]="val.content | safeUrl"
-                    [attr.title]="val.name" [attr.download]="val.name" [style.width]="question.imageWidth">{{ val.name
-                    }}</a>
-            </div>
-        </span>
-    </div>
+                <div [class]="question.cssClasses.imageWrapper">
+                    <img *ngIf="question.canPreviewImage(val)" [attr.src]="val.content | safeUrl"
+                        [style.height]="question.imageHeight" [style.width]="question.imageWidth" alt="File preview" />
+                    <svg *ngIf="question.defaultImage(val)" [iconName]="question.cssClasses.defaultImageIconId"
+                        [partCss]="question.cssClasses.defaultImage" [size]="'auto'" sv-ng-svg-icon></svg>
+                    <div *ngIf="val.name && !question.isReadOnly" [class]="question.getRemoveButtonCss()"
+                        (click)="question.doRemoveFile(val)">
+                        <span [class]="question.cssClasses.removeFile">{{ question.removeFileCaption }}</span>
+                        <svg *ngIf="question.cssClasses.removeFileSvgIconId" [title]="question.removeFileCaption"
+                            [partCss]="question.cssClasses.removeFileSvg"
+                            [iconName]="question.cssClasses.removeFileSvgIconId" [size]="'auto'" sv-ng-svg-icon></svg>
+                    </div>
+                </div>
+                <div *ngIf="val.name && question.cssClasses.fileSignBottom"
+                    [class]="question.cssClasses.fileSignBottom">
+                    <a (click)="question.doDownloadFile($event, val)" [attr.href]="val.content | safeUrl"
+                        [attr.title]="val.name" [attr.download]="val.name" [style.width]="question.imageWidth">{{
+                        val.name
+                        }}</a>
+                </div>
+            </span>
+        </div>
+    </ng-container>
 </ng-template>
\ No newline at end of file
diff --git a/packages/survey-vue3-ui/src/components/file/FilePreview.vue b/packages/survey-vue3-ui/src/components/file/FilePreview.vue
index ef03f54345..666d503aa3 100644
--- a/packages/survey-vue3-ui/src/components/file/FilePreview.vue
+++ b/packages/survey-vue3-ui/src/components/file/FilePreview.vue
@@ -1,5 +1,8 @@
 <template>
-  <div :class="question.cssClasses.fileList || undefined">
+  <div
+    v-if="question.showPreviewContainer"
+    :class="question.cssClasses.fileList || undefined"
+  >
     <span
       v-for="(val, index) in question.previewValue"
       :key="question.inputId + '_' + index"
diff --git a/src/knockout/components/file/file-preview.html b/src/knockout/components/file/file-preview.html
index 0a127a7c72..58ca991c27 100644
--- a/src/knockout/components/file/file-preview.html
+++ b/src/knockout/components/file/file-preview.html
@@ -1,4 +1,4 @@
-
+<!-- ko if: question.koHasValue && question.showPreviewContainer -->
 <div data-bind="css: question.cssClasses.fileList, foreach: question.koData, visible: question.koHasValue">
   <span data-bind="visible: question.isPreviewVisible($index()), css: question.cssClasses.preview">
     <!-- ko template: { name: 'survey-question-file-sign', data: {question: question, item: $data, fileSignCss: question.cssClasses.fileSign} } --><!-- /ko -->
@@ -22,4 +22,5 @@
     </div>
     <!-- ko template: { name: 'survey-question-file-sign', data: {question: question, item: $data, fileSignCss: question.cssClasses.fileSignBottom} } --><!-- /ko -->
   </span>
-</div>
\ No newline at end of file
+</div>
+<!-- /ko -->
\ No newline at end of file
diff --git a/src/question_file.ts b/src/question_file.ts
index b2c832a980..49fe86b82a 100644
--- a/src/question_file.ts
+++ b/src/question_file.ts
@@ -522,7 +522,10 @@ export class QuestionFileModel extends Question {
   public get allowShowPreview(): boolean {
     const isShowLoadingIndicator = this.showLoadingIndicator;
     const isPlayingVideo = this.isPlayingVideo;
-    return this.previewValue && this.previewValue.length > 0 && !isShowLoadingIndicator && !isPlayingVideo;
+    return !isShowLoadingIndicator && !isPlayingVideo;
+  }
+  public get showPreviewContainer(): boolean {
+    return this.previewValue && this.previewValue.length > 0;
   }
   //todo: remove in V2
   get showRemoveButtonCore(): boolean {
diff --git a/src/react/components/file/file-preview.tsx b/src/react/components/file/file-preview.tsx
index a80281961d..76c4fa2471 100644
--- a/src/react/components/file/file-preview.tsx
+++ b/src/react/components/file/file-preview.tsx
@@ -67,6 +67,9 @@ export class SurveyFilePreview extends SurveyElementBase<{ question: QuestionFil
     });
     return <div className={this.question.cssClasses.fileList || undefined}>{previews}</div>;
   }
+  protected canRender(): boolean {
+    return this.question.showPreviewContainer;
+  }
 }
 ReactElementFactory.Instance.registerElement(
   "sv-file-preview",
diff --git a/src/vue/components/file/file-preview.vue b/src/vue/components/file/file-preview.vue
index 7d4dfe5821..d2999a3b41 100644
--- a/src/vue/components/file/file-preview.vue
+++ b/src/vue/components/file/file-preview.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="question.cssClasses.fileList || undefined">
+  <div v-if="question.showPreviewContainer" :class="question.cssClasses.fileList || undefined">
     <span
       v-for="(val, index) in question.previewValue"
       :key="question.inputId + '_' + index"