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

surveyjs · Oct 3, 2023 · b0c275d · b0c275d
1 parent b61f99c
commit b0c275d
Show file tree

Hide file tree

Showing 10 changed files with 49 additions and 44 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.allowShowPreview">
+        <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-angular-ui/src/questions/file.component.html b/packages/survey-angular-ui/src/questions/file.component.html
@@ -27,9 +27,7 @@
     <ng-container *ngIf="model.showRemoveButton">
       <ng-container *ngTemplateOutlet="fileCleanButton; context: { css: model.showRemoveButton }"></ng-container>
     </ng-container>
-    <ng-container *ngIf="model.allowShowPreview">
-      <ng-template [component]="{ name: 'sv-file-preview', data: { question: model } }"></ng-template>
-    </ng-container>
+    <ng-template [component]="{ name: 'sv-file-preview', data: { question: model } }"></ng-template>
     <ng-container *ngIf="model.showRemoveButtonBottom">
       <ng-container *ngTemplateOutlet="fileCleanButton; context: { css: model.showRemoveButtonBottom }"></ng-container>
     </ng-container>

diff --git a/packages/survey-vue3-ui/src/File.vue b/packages/survey-vue3-ui/src/File.vue
@@ -71,9 +71,7 @@
         v-if="question.isPlayingVideo"
         :question="question"
       ></sv-file-video>
-      <template v-if="question.allowShowPreview">
-        <sv-file-preview :question="question"></sv-file-preview>
-      </template>
+      <sv-file-preview :question="question"></sv-file-preview>
       <sv-file-clean-btn
         v-if="question.showRemoveButtonBottom"
         :question="question"

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.allowShowPreview"
+    :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,6 @@
 
+<!-- ko if: question.showPreview -->
+<!-- ko if: question.koHasValue && question.allowShowPreview -->
 <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 +24,6 @@
     </div>
     <!-- ko template: { name: 'survey-question-file-sign', data: {question: question, item: $data, fileSignCss: question.cssClasses.fileSignBottom} } --><!-- /ko -->
   </span>
-</div>
+</div>
+<!-- /ko -->
+<!-- /ko -->
diff --git a/src/knockout/templates/question-file.html b/src/knockout/templates/question-file.html
@@ -37,11 +37,7 @@
           <!-- ko template: { name: 'survey-question-file-video', data: { question: question } } --><!-- /ko -->          
           <!-- /ko -->
           <!-- ko template: { name: 'survey-question-file-clean-button', data: {question: question, showRemoveButton: question.showRemoveButton} } --><!-- /ko -->
-          <!-- ko if: question.showPreview -->
-          <!-- ko if: question.koHasValue && question.allowShowPreview -->
           <!-- ko component: { name: 'sv-file-preview', data: { question: question } } --><!-- /ko -->          
-          <!-- /ko -->
-          <!-- /ko -->
           <!-- ko template: { name: 'survey-question-file-clean-button', data: {question: question, showRemoveButton: question.showRemoveButtonBottom} } --><!-- /ko -->
           <!-- ko if: question.fileNavigatorVisible -->
           <!-- ko component: { name: 'sv-action-bar', params: { model: question.fileNavigator } } -->

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.allowShowPreview;
+  }
 }
 ReactElementFactory.Instance.registerElement(
   "sv-file-preview",

diff --git a/src/react/reactquestion_file.tsx b/src/react/reactquestion_file.tsx
@@ -17,7 +17,7 @@ export class SurveyQuestionFile extends SurveyQuestionElementBase {
     return this.questionBase as QuestionFileModel;
   }
   protected renderElement(): JSX.Element {
-    const preview = this.question.allowShowPreview ? this.renderPreview() : null;
+    const preview = this.renderPreview();
     const loadingIndicator = this.question.showLoadingIndicator ? this.renderLoadingIndicator() : null;
     const video = this.question.isPlayingVideo ? this.renderVideo() : null;
     const fileDecorator = this.question.showFileDecorator ? this.renderFileDecorator() : null;

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.allowShowPreview" :class="question.cssClasses.fileList || undefined">
     <span
       v-for="(val, index) in question.previewValue"
       :key="question.inputId + '_' + index"

diff --git a/src/vue/file.vue b/src/vue/file.vue
@@ -71,9 +71,7 @@
         v-if="question.isPlayingVideo"
         :question="question"
       ></sv-file-video>
-      <template v-if="question.allowShowPreview">
-        <sv-file-preview :question="question"></sv-file-preview>
-      </template>
+      <sv-file-preview :question="question"></sv-file-preview>
       <sv-file-clean-btn
         v-if="question.showRemoveButtonBottom"
         :question="question"