Fix 'sv-file-preview' component is not available when showPreview: fa…

…lse (#7066)
surveyjs · Oct 4, 2023 · 6409081 · 6409081
1 parent 950f06a
commit 6409081
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 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
@@ -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>
diff --git 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
@@ -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>
+</div>
+<!-- /ko -->
diff --git 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
@@ -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
@@ -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"