From 283bdacb934f088a950562c6a31b373879d8e859 Mon Sep 17 00:00:00 2001
From: Dmitry Kuzin <dk981234@gmail.com>
Date: Tue, 3 Oct 2023 11:56:47 +0400
Subject: [PATCH 1/2] Allow to customize file preview component

---
 .../src/angular-ui.module.ts                  |  5 +-
 .../file-actions/file-preview.component.html  | 30 ++++++++
 .../file-actions/file-preview.component.ts    | 15 ++++
 .../src/questions/file.component.html         | 30 +-------
 .../src/questions/file.component.ts           |  6 +-
 .../FileChooseButton.vue                      |  0
 .../src/{ => components/file}/FilePreview.vue |  0
 packages/survey-vue3-ui/src/index.ts          |  4 +-
 src/entries/knockout-ui-model.ts              |  3 +-
 src/entries/react-ui-model.ts                 |  3 +-
 src/entries/vue-ui-model.ts                   |  4 +-
 .../{file-actions => file}/choose-file.html   |  0
 .../{file-actions => file}/choose-file.ts     |  0
 .../components/file/file-preview.html         | 25 ++++++
 src/knockout/components/file/file-preview.ts  | 14 ++++
 src/knockout/templates/question-file.html     | 40 ++--------
 .../file-choose-button.tsx                    |  0
 src/react/components/file/file-preview.tsx    | 76 +++++++++++++++++++
 src/react/reactquestion_file.tsx              | 59 +-------------
 .../file-choose-button.vue                    |  0
 .../{ => components/file}/file-preview.vue    |  0
 21 files changed, 183 insertions(+), 131 deletions(-)
 create mode 100644 packages/survey-angular-ui/src/components/file-actions/file-preview.component.html
 create mode 100644 packages/survey-angular-ui/src/components/file-actions/file-preview.component.ts
 rename packages/survey-vue3-ui/src/components/{file-actions => file}/FileChooseButton.vue (100%)
 rename packages/survey-vue3-ui/src/{ => components/file}/FilePreview.vue (100%)
 rename src/knockout/components/{file-actions => file}/choose-file.html (100%)
 rename src/knockout/components/{file-actions => file}/choose-file.ts (100%)
 create mode 100644 src/knockout/components/file/file-preview.html
 create mode 100644 src/knockout/components/file/file-preview.ts
 rename src/react/components/{file-actions => file}/file-choose-button.tsx (100%)
 create mode 100644 src/react/components/file/file-preview.tsx
 rename src/vue/components/{file-actions => file}/file-choose-button.vue (100%)
 rename src/vue/{ => components/file}/file-preview.vue (100%)

diff --git a/packages/survey-angular-ui/src/angular-ui.module.ts b/packages/survey-angular-ui/src/angular-ui.module.ts
index cb060f1459..cdd8a0a8cd 100644
--- a/packages/survey-angular-ui/src/angular-ui.module.ts
+++ b/packages/survey-angular-ui/src/angular-ui.module.ts
@@ -115,6 +115,7 @@ import { LoadingIndicatorComponent } from "./angular-ui";
 import { CoverComponent } from "./components/cover/cover.component";
 import { CoverCellComponent } from "./components/cover/cover-cell.component";
 import { ChooseFileBtn } from "./components/file-actions/choose-file.component";
+import { FilePreviewComponent } from "./components/file-actions/file-preview.component";
 
 @NgModule({
   declarations: [
@@ -132,7 +133,7 @@ import { ChooseFileBtn } from "./components/file-actions/choose-file.component";
     MultipleTextComponent, MultipleTextItemComponent, DynamicComponentDirective, RankingQuestionComponent, RankingItemComponent, PanelDynamicQuestionComponent, EmbeddedViewContentComponent, CustomWidgetComponent, MatrixCellComponent, MatrixTableComponent, MatrixDropdownComponent,
     MatrixDynamicComponent, MatrixDetailButtonComponent, MatrixDynamicRemoveButtonComponent, MatrixDynamicDragDropIconComponent, MatrixRequiredHeader, ExpressionComponent, SafeResourceUrlPipe, BrandInfoComponent,
     CustomQuestionComponent, CompositeQuestionComponent, ButtonGroupItemComponent, ButtonGroupQuestionComponent, MatrixRowComponent, ModalComponent, LogoImageComponent, SkeletonComponent, TimerPanelComponent, PaneldynamicRemoveButtonComponent,
-    NotifierComponent, ComponentsContainerComponent, MultipleTextRowComponent, LoadingIndicatorComponent, CoverComponent, CoverCellComponent, ChooseFileBtn
+    NotifierComponent, ComponentsContainerComponent, MultipleTextRowComponent, LoadingIndicatorComponent, CoverComponent, CoverCellComponent, ChooseFileBtn, FilePreviewComponent
   ],
   imports: [
     CommonModule, FormsModule
@@ -153,7 +154,7 @@ import { ChooseFileBtn } from "./components/file-actions/choose-file.component";
     MultipleTextComponent, MultipleTextItemComponent, DynamicComponentDirective, RankingQuestionComponent, RankingItemComponent, PanelDynamicQuestionComponent, EmbeddedViewContentComponent, CustomWidgetComponent, MatrixCellComponent, MatrixTableComponent, MatrixDropdownComponent,
     MatrixDynamicComponent, MatrixDetailButtonComponent, MatrixDynamicRemoveButtonComponent, MatrixDynamicDragDropIconComponent, MatrixRequiredHeader, ExpressionComponent, SafeResourceUrlPipe,
     CustomQuestionComponent, CompositeQuestionComponent, ButtonGroupQuestionComponent, ModalComponent, LogoImageComponent, SkeletonComponent, TimerPanelComponent, PaneldynamicRemoveButtonComponent,
-    NotifierComponent, ComponentsContainerComponent, MultipleTextRowComponent, LoadingIndicatorComponent, CoverComponent, CoverCellComponent
+    NotifierComponent, ComponentsContainerComponent, MultipleTextRowComponent, LoadingIndicatorComponent, CoverComponent, CoverCellComponent, FilePreviewComponent
   ],
   providers: [PopupService],
 })
diff --git a/packages/survey-angular-ui/src/components/file-actions/file-preview.component.html b/packages/survey-angular-ui/src/components/file-actions/file-preview.component.html
new file mode 100644
index 0000000000..e4c4e15017
--- /dev/null
+++ b/packages/survey-angular-ui/src/components/file-actions/file-preview.component.html
@@ -0,0 +1,30 @@
+<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>
+                </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-template>
\ No newline at end of file
diff --git a/packages/survey-angular-ui/src/components/file-actions/file-preview.component.ts b/packages/survey-angular-ui/src/components/file-actions/file-preview.component.ts
new file mode 100644
index 0000000000..b821433fe9
--- /dev/null
+++ b/packages/survey-angular-ui/src/components/file-actions/file-preview.component.ts
@@ -0,0 +1,15 @@
+import { Action, QuestionFileModel } from "survey-core";
+import { AngularComponentFactory } from "../../component-factory";
+import { Component, Input } from "@angular/core";
+import { EmbeddedViewContentComponent } from "../../embedded-view-content.component";
+@Component({
+  selector: "sv-ng-file-preview",
+  templateUrl: "./file-preview.component.html"
+})
+export class FilePreviewComponent extends EmbeddedViewContentComponent {
+    @Input() question!: QuestionFileModel;
+    trackFilesFn: (index: number) => string = (index: number): string => {
+      return this.question.inputId + "_" + index;
+    }
+}
+AngularComponentFactory.Instance.registerComponent("sv-file-preview", FilePreviewComponent);
\ No newline at end of file
diff --git a/packages/survey-angular-ui/src/questions/file.component.html b/packages/survey-angular-ui/src/questions/file.component.html
index b129b57286..422b846206 100644
--- a/packages/survey-angular-ui/src/questions/file.component.html
+++ b/packages/survey-angular-ui/src/questions/file.component.html
@@ -28,7 +28,7 @@
       <ng-container *ngTemplateOutlet="fileCleanButton; context: { css: model.showRemoveButton }"></ng-container>
     </ng-container>
     <ng-container *ngIf="model.allowShowPreview">
-      <ng-container *ngTemplateOutlet="filePreview"></ng-container>
+      <ng-template [component]="{ name: 'sv-file-preview', data: { question: model } }"></ng-template>
     </ng-container>
     <ng-container *ngIf="model.showRemoveButtonBottom">
       <ng-container *ngTemplateOutlet="fileCleanButton; context: { css: model.showRemoveButtonBottom }"></ng-container>
@@ -36,34 +36,6 @@
     <sv-action-bar *ngIf="model.fileNavigatorVisible" [model]="model.fileNavigator"></sv-action-bar>
   </div>
 </div>
-<ng-template #filePreview>
-  <div [class]="model.cssClasses.fileList || undefined">
-    <span *ngFor="let val of model.previewValue; index as index; trackBy: trackFilesFn"
-      [visible]="val && model.isPreviewVisible(index)" [class]="model.cssClasses.preview">
-      <div *ngIf="val.name && model.cssClasses.fileSign" [class]="model.cssClasses.fileSign">
-        <a (click)="model.doDownloadFile($event, val)" [attr.href]="val.content | safeUrl" [attr.title]="val.name"
-          [attr.download]="val.name" [style.width]="model.imageWidth">{{ val.name }}</a>
-      </div>
-      <div [class]="model.cssClasses.imageWrapper">
-        <img *ngIf="model.canPreviewImage(val)" [attr.src]="val.content | safeUrl" [style.height]="model.imageHeight"
-          [style.width]="model.imageWidth" alt="File preview" />
-        <svg *ngIf="model.defaultImage(val)" [iconName]="model.cssClasses.defaultImageIconId"
-          [partCss]="model.cssClasses.defaultImage" [size]="'auto'" sv-ng-svg-icon></svg>
-        <div *ngIf="val.name && !model.isReadOnly" [class]="model.getRemoveButtonCss()"
-          (click)="model.doRemoveFile(val)">
-          <span [class]="model.cssClasses.removeFile">{{ model.removeFileCaption }}</span>
-          <svg *ngIf="model.cssClasses.removeFileSvgIconId" [title]="model.removeFileCaption"
-            [partCss]="model.cssClasses.removeFileSvg" [iconName]="model.cssClasses.removeFileSvgIconId" [size]="'auto'"
-            sv-ng-svg-icon></svg>
-        </div>
-      </div>
-      <div *ngIf="val.name && model.cssClasses.fileSignBottom" [class]="model.cssClasses.fileSignBottom">
-        <a (click)="model.doDownloadFile($event, val)" [attr.href]="val.content | safeUrl" [attr.title]="val.name"
-          [attr.download]="val.name" [style.width]="model.imageWidth">{{ val.name }}</a>
-      </div>
-    </span>
-  </div>
-</ng-template>
 <ng-template #fileCleanButton let-css="css">
   <button type="button" [class]="css" (click)="model.doClean()">
     <span>{{ model.clearButtonCaption }}</span>
diff --git a/packages/survey-angular-ui/src/questions/file.component.ts b/packages/survey-angular-ui/src/questions/file.component.ts
index 5266328f49..f6164d60ac 100644
--- a/packages/survey-angular-ui/src/questions/file.component.ts
+++ b/packages/survey-angular-ui/src/questions/file.component.ts
@@ -7,10 +7,6 @@ import { AngularComponentFactory } from "../component-factory";
   templateUrl: "./file.component.html",
   styleUrls: []
 })
-export class FileQuestionComponent extends QuestionAngular<QuestionFileModel> {
-  trackFilesFn: (index: number) => string = (index: number): string => {
-    return this.model.inputId + "_" + index;
-  }
-}
+export class FileQuestionComponent extends QuestionAngular<QuestionFileModel> {}
 
 AngularComponentFactory.Instance.registerComponent("file-question", FileQuestionComponent);
\ No newline at end of file
diff --git a/packages/survey-vue3-ui/src/components/file-actions/FileChooseButton.vue b/packages/survey-vue3-ui/src/components/file/FileChooseButton.vue
similarity index 100%
rename from packages/survey-vue3-ui/src/components/file-actions/FileChooseButton.vue
rename to packages/survey-vue3-ui/src/components/file/FileChooseButton.vue
diff --git a/packages/survey-vue3-ui/src/FilePreview.vue b/packages/survey-vue3-ui/src/components/file/FilePreview.vue
similarity index 100%
rename from packages/survey-vue3-ui/src/FilePreview.vue
rename to packages/survey-vue3-ui/src/components/file/FilePreview.vue
diff --git a/packages/survey-vue3-ui/src/index.ts b/packages/survey-vue3-ui/src/index.ts
index 52d16600fc..8c670572ef 100644
--- a/packages/survey-vue3-ui/src/index.ts
+++ b/packages/survey-vue3-ui/src/index.ts
@@ -114,9 +114,9 @@ import {
 } from "survey-core";
 import type { App } from "vue";
 import FileCleanButton from "./FileCleanButton.vue";
-import FilePreview from "./FilePreview.vue";
 import FileVideo from "./FileVideo.vue";
-import FileChooseButton from "./components/file-actions/FileChooseButton.vue";
+import FileChooseButton from "./components/file/FileChooseButton.vue";
+import FilePreview from "./components/file/FilePreview.vue";
 export { useBase, useLocString, useQuestion } from "./base";
 
 SurveyModel.platform = "vue3";
diff --git a/src/entries/knockout-ui-model.ts b/src/entries/knockout-ui-model.ts
index 15b20fc19e..e07adbf4d9 100644
--- a/src/entries/knockout-ui-model.ts
+++ b/src/entries/knockout-ui-model.ts
@@ -69,7 +69,8 @@ export * from "../knockout/components/tagbox/tagbox-item";
 export * from "../knockout/components/tagbox/tagbox";
 export * from "../knockout/components/cover/cover";
 export * from "../knockout/components/cover/cover-cell";
-export * from "../knockout/components/file-actions/choose-file";
+export * from "../knockout/components/file/choose-file";
+export * from "../knockout/components/file/file-preview";
 
 export * from "../knockout/components/list/list";
 export * from "../knockout/components/svg-icon/svg-icon";
diff --git a/src/entries/react-ui-model.ts b/src/entries/react-ui-model.ts
index e9c73e2f1e..c285df426b 100644
--- a/src/entries/react-ui-model.ts
+++ b/src/entries/react-ui-model.ts
@@ -48,7 +48,8 @@ export {
 } from "../react/reactquestion_matrix";
 export { SurveyQuestionHtml } from "../react/reactquestion_html";
 export { SurveyQuestionFile } from "../react/reactquestion_file";
-export { SurveyFileChooseButton } from "../react/components/file-actions/file-choose-button";
+export { SurveyFileChooseButton } from "../react/components/file/file-choose-button";
+export { SurveyFilePreview } from "../react/components/file/file-preview";
 export { SurveyQuestionMultipleText } from "../react/reactquestion_multipletext";
 export { SurveyQuestionRadiogroup, SurveyQuestionRadioItem } from "../react/reactquestion_radiogroup";
 export { SurveyQuestionText } from "../react/reactquestion_text";
diff --git a/src/entries/vue-ui-model.ts b/src/entries/vue-ui-model.ts
index d98f62ff14..ecf5d7aa1f 100644
--- a/src/entries/vue-ui-model.ts
+++ b/src/entries/vue-ui-model.ts
@@ -35,10 +35,10 @@ export { Dropdown } from "../vue/dropdown.vue";
 export { DropdownSelect } from "../vue/dropdown-select.vue";
 export { Tagbox } from "../vue/tagbox.vue";
 export { File } from "../vue/file.vue";
-export { FilePreview } from "../vue/file-preview.vue";
+export { FilePreview } from "../vue/components/file/file-preview.vue";
 export { FileCleanButton } from "../vue/file-clean-button.vue";
 export { FileVideo } from "../vue/file-video.vue";
-export { FileChooseButton } from "../vue/components/file-actions/file-choose-button.vue";
+export { FileChooseButton } from "../vue/components/file/file-choose-button.vue";
 
 export { MatrixCell } from "../vue/matrixcell.vue";
 export { MatrixHeaderRequired } from "../vue/matrixheaderrequired.vue";
diff --git a/src/knockout/components/file-actions/choose-file.html b/src/knockout/components/file/choose-file.html
similarity index 100%
rename from src/knockout/components/file-actions/choose-file.html
rename to src/knockout/components/file/choose-file.html
diff --git a/src/knockout/components/file-actions/choose-file.ts b/src/knockout/components/file/choose-file.ts
similarity index 100%
rename from src/knockout/components/file-actions/choose-file.ts
rename to src/knockout/components/file/choose-file.ts
diff --git a/src/knockout/components/file/file-preview.html b/src/knockout/components/file/file-preview.html
new file mode 100644
index 0000000000..0a127a7c72
--- /dev/null
+++ b/src/knockout/components/file/file-preview.html
@@ -0,0 +1,25 @@
+
+<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 -->
+    <div data-bind="css: question.cssClasses.imageWrapper">
+      <!-- ko if: question.canPreviewImage($data) -->
+      <img data-bind="attr: { src: $data.content }, style : { height: question.imageHeight, width: question.imageWidth }" alt="File preview">
+      <!-- /ko -->
+      <!-- ko if: question.defaultImage($data) -->
+      <!-- ko component: { name: 'sv-svg-icon', params: { css: question.cssClasses.defaultImage, iconName: question.cssClasses.defaultImageIconId, size: 'auto' } } --><!-- /ko -->
+      <!-- /ko -->
+      <!-- ko if: $data.name -->
+      <!-- ko ifnot: question.isReadOnly -->
+      <div data-bind="click: question.doremovefile, css: question.getRemoveButtonCss()">
+          <span data-bind="css: question.cssClasses.removeFile, text: question.removeFileCaption"></span>
+          <!-- ko if: question.cssClasses.removeFileSvgIconId -->
+            <!-- ko component: { name: 'sv-svg-icon', params: { css: question.cssClasses.removeFileSvg, title: question.removeFileCaption, iconName: question.cssClasses.removeFileSvgIconId, size: 'auto' } } --><!-- /ko -->
+          <!-- /ko -->
+      </div>
+      <!-- /ko -->
+      <!-- /ko -->
+    </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
diff --git a/src/knockout/components/file/file-preview.ts b/src/knockout/components/file/file-preview.ts
new file mode 100644
index 0000000000..4fa1a8877e
--- /dev/null
+++ b/src/knockout/components/file/file-preview.ts
@@ -0,0 +1,14 @@
+import * as ko from "knockout";
+
+const template = require("./file-preview.html");
+
+export var SurveyFilePreview: any;
+
+ko.components.register("sv-file-preview", {
+  viewModel: {
+    createViewModel: (params: any, componentInfo: any) => {
+      return params;
+    },
+  },
+  template: template,
+});
diff --git a/src/knockout/templates/question-file.html b/src/knockout/templates/question-file.html
index bfb0054dc4..70a9542db7 100644
--- a/src/knockout/templates/question-file.html
+++ b/src/knockout/templates/question-file.html
@@ -39,7 +39,7 @@
           <!-- 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 template: { name: 'survey-question-file-preview', data: { question: question } } --><!-- /ko -->          
+          <!-- 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 -->
@@ -57,13 +57,6 @@
   </button>
   <!-- /ko -->
 </script>
-<script type="text/html" id="survey-question-file-sign">
-  <!-- ko if: item.name && fileSignCss -->
-  <div data-bind="css: fileSignCss">
-    <a data-bind="style: { width: question.imageWidth }, click: question.dodownload, text: item.name, attr: { href: item.content, title: item.name, download: item.name }"></a>
-  </div>
-  <!-- /ko -->
-</script>
 <script type="text/html" id="survey-question-file-video">
   <div data-bind="css: question.cssClasses.videoContainer">
     <!-- ko component: { name: 'sv-action', params: { item: question.changeCameraAction } } --><!-- /ko -->
@@ -72,29 +65,10 @@
     <!-- ko component: { name: 'sv-action', params: { item: question.takePictureAction } } --><!-- /ko -->
   </div>
 </script>
-<script type="text/html" id="survey-question-file-preview">
-  <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 -->
-      <div data-bind="css: question.cssClasses.imageWrapper">
-        <!-- ko if: question.canPreviewImage($data) -->
-        <img data-bind="attr: { src: $data.content }, style : { height: question.imageHeight, width: question.imageWidth }" alt="File preview">
-        <!-- /ko -->
-        <!-- ko if: question.defaultImage($data) -->
-        <!-- ko component: { name: 'sv-svg-icon', params: { css: question.cssClasses.defaultImage, iconName: question.cssClasses.defaultImageIconId, size: 'auto' } } --><!-- /ko -->
-        <!-- /ko -->
-        <!-- ko if: $data.name -->
-        <!-- ko ifnot: question.isReadOnly -->
-        <div data-bind="click: question.doremovefile, css: question.getRemoveButtonCss()">
-            <span data-bind="css: question.cssClasses.removeFile, text: question.removeFileCaption"></span>
-            <!-- ko if: question.cssClasses.removeFileSvgIconId -->
-              <!-- ko component: { name: 'sv-svg-icon', params: { css: question.cssClasses.removeFileSvg, title: question.removeFileCaption, iconName: question.cssClasses.removeFileSvgIconId, size: 'auto' } } --><!-- /ko -->
-            <!-- /ko -->
-        </div>
-        <!-- /ko -->
-        <!-- /ko -->
-      </div>
-      <!-- ko template: { name: 'survey-question-file-sign', data: {question: question, item: $data, fileSignCss: question.cssClasses.fileSignBottom} } --><!-- /ko -->
-    </span>
-</div>
+<script type="text/html" id="survey-question-file-sign">
+  <!-- ko if: item.name && fileSignCss -->
+  <div data-bind="css: fileSignCss">
+    <a data-bind="style: { width: question.imageWidth }, click: question.dodownload, text: item.name, attr: { href: item.content, title: item.name, download: item.name }"></a>
+  </div>
+  <!-- /ko -->
 </script>
\ No newline at end of file
diff --git a/src/react/components/file-actions/file-choose-button.tsx b/src/react/components/file/file-choose-button.tsx
similarity index 100%
rename from src/react/components/file-actions/file-choose-button.tsx
rename to src/react/components/file/file-choose-button.tsx
diff --git a/src/react/components/file/file-preview.tsx b/src/react/components/file/file-preview.tsx
new file mode 100644
index 0000000000..a80281961d
--- /dev/null
+++ b/src/react/components/file/file-preview.tsx
@@ -0,0 +1,76 @@
+import React from "react";
+import { SurveyElementBase } from "../../reactquestion_element";
+import { QuestionFileModel } from "survey-core";
+import { SvgIcon } from "../svg-icon/svg-icon";
+import { ReactElementFactory } from "../../element-factory";
+
+export class SurveyFilePreview extends SurveyElementBase<{ question: QuestionFileModel }, {}> {
+
+  protected get question(): QuestionFileModel {
+    return this.props.question;
+  }
+
+  protected renderFileSign(className: string, val: any): JSX.Element | null {
+    if(!className || !val.name) return null;
+    return (
+      <div className={className}>
+        <a
+          href={val.content}
+          onClick={event => {
+            this.question.doDownloadFile(event, val);
+          }}
+          title={val.name}
+          download={val.name}
+          style={{ width: this.question.imageWidth }}
+        >
+          {val.name}
+        </a>
+      </div>
+    );
+  }
+
+  protected renderElement(): JSX.Element | null {
+    var previews = this.question.previewValue.map((val, index) => {
+      if (!val) return null;
+      return (
+        <span
+          key={this.question.inputId + "_" + index}
+          className={this.question.cssClasses.preview}
+          style={{ display: this.question.isPreviewVisible(index) ? undefined : "none" }}
+        >
+          {this.renderFileSign(this.question.cssClasses.fileSign, val)}
+          <div className={this.question.cssClasses.imageWrapper}>
+            {this.question.canPreviewImage(val) ? (
+              <img
+                src={val.content}
+                style={{ height: this.question.imageHeight, width: this.question.imageWidth }}
+                alt="File preview"
+              />
+            ) : (this.question.cssClasses.defaultImage?(
+              <SvgIcon iconName={this.question.cssClasses.defaultImageIconId} size={"auto"} className={this.question.cssClasses.defaultImage}></SvgIcon>
+            ):null)}
+            {val.name && !this.question.isReadOnly ? (
+              <div className={this.question.getRemoveButtonCss()} onClick={() => this.question.doRemoveFile(val)}>
+                <span
+                  className={this.question.cssClasses.removeFile}
+                >
+                  {this.question.removeFileCaption}
+                </span>
+                {(this.question.cssClasses.removeFileSvgIconId) ?
+                  (<SvgIcon title={this.question.removeFileCaption} iconName={this.question.cssClasses.removeFileSvgIconId} size={"auto"} className={this.question.cssClasses.removeFileSvg}></SvgIcon>): null }
+              </div>
+            ) : null}
+          </div>
+          {this.renderFileSign(this.question.cssClasses.fileSignBottom, val)}
+        </span>
+      );
+    });
+    return <div className={this.question.cssClasses.fileList || undefined}>{previews}</div>;
+  }
+}
+ReactElementFactory.Instance.registerElement(
+  "sv-file-preview",
+  (props) => {
+    return React.createElement(SurveyFilePreview, props);
+  }
+);
\ No newline at end of file
diff --git a/src/react/reactquestion_file.tsx b/src/react/reactquestion_file.tsx
index 7a4c63b4d7..4d6ae021c1 100644
--- a/src/react/reactquestion_file.tsx
+++ b/src/react/reactquestion_file.tsx
@@ -7,7 +7,7 @@ import { ReactQuestionFactory } from "./reactquestion_factory";
 import { attachKey2click } from "./reactSurvey";
 import { LoadingIndicatorComponent } from "./components/loading-indicator";
 import { SurveyAction } from "./components/action-bar/action-bar-item";
-import { SurveyFileChooseButton } from "../entries/react-ui-model";
+import { ReactElementFactory, SurveyFileChooseButton } from "../entries/react-ui-model";
 
 export class SurveyQuestionFile extends SurveyQuestionElementBase {
   constructor(props: any) {
@@ -112,23 +112,8 @@ export class SurveyQuestionFile extends SurveyQuestionElementBase {
       </button>
     ) : null;
   }
-  protected renderFileSign(className: string, val: any): JSX.Element | null {
-    if(!className || !val.name) return null;
-    return (
-      <div className={className}>
-        <a
-          href={val.content}
-          onClick={event => {
-            this.question.doDownloadFile(event, val);
-          }}
-          title={val.name}
-          download={val.name}
-          style={{ width: this.question.imageWidth }}
-        >
-          {val.name}
-        </a>
-      </div>
-    );
+  protected renderPreview(): JSX.Element {
+    return ReactElementFactory.Instance.createElement("sv-file-preview", { question: this.question });
   }
   protected renderLoadingIndicator(): JSX.Element {
     return <div className={this.question.cssClasses.loadingIndicator}><LoadingIndicatorComponent></LoadingIndicatorComponent></div>;
@@ -141,44 +126,6 @@ export class SurveyQuestionFile extends SurveyQuestionElementBase {
       <SurveyAction item={this.question.takePictureAction}></SurveyAction>
     </div>);
   }
-  protected renderPreview(): JSX.Element {
-    var previews = this.question.previewValue.map((val, index) => {
-      if (!val) return null;
-      return (
-        <span
-          key={this.question.inputId + "_" + index}
-          className={this.question.cssClasses.preview}
-          style={{ display: this.question.isPreviewVisible(index) ? undefined : "none" }}
-        >
-          {this.renderFileSign(this.question.cssClasses.fileSign, val)}
-          <div className={this.question.cssClasses.imageWrapper}>
-            {this.question.canPreviewImage(val) ? (
-              <img
-                src={val.content}
-                style={{ height: this.question.imageHeight, width: this.question.imageWidth }}
-                alt="File preview"
-              />
-            ) : (this.question.cssClasses.defaultImage?(
-              <SvgIcon iconName={this.question.cssClasses.defaultImageIconId} size={"auto"} className={this.question.cssClasses.defaultImage}></SvgIcon>
-            ):null)}
-            {val.name && !this.question.isReadOnly ? (
-              <div className={this.question.getRemoveButtonCss()} onClick={() => this.question.doRemoveFile(val)}>
-                <span
-                  className={this.question.cssClasses.removeFile}
-                >
-                  {this.question.removeFileCaption}
-                </span>
-                {(this.question.cssClasses.removeFileSvgIconId) ?
-                  (<SvgIcon title={this.question.removeFileCaption} iconName={this.question.cssClasses.removeFileSvgIconId} size={"auto"} className={this.question.cssClasses.removeFileSvg}></SvgIcon>): null }
-              </div>
-            ) : null}
-          </div>
-          {this.renderFileSign(this.question.cssClasses.fileSignBottom, val)}
-        </span>
-      );
-    });
-    return <div className={this.question.cssClasses.fileList || undefined}>{previews}</div>;
-  }
 }
 
 ReactQuestionFactory.Instance.registerQuestion("file", props => {
diff --git a/src/vue/components/file-actions/file-choose-button.vue b/src/vue/components/file/file-choose-button.vue
similarity index 100%
rename from src/vue/components/file-actions/file-choose-button.vue
rename to src/vue/components/file/file-choose-button.vue
diff --git a/src/vue/file-preview.vue b/src/vue/components/file/file-preview.vue
similarity index 100%
rename from src/vue/file-preview.vue
rename to src/vue/components/file/file-preview.vue

From 7c46a3c65e2f433bb8055a86d61eb09c35cafef7 Mon Sep 17 00:00:00 2001
From: Dmitry Kuzin <dk981234@gmail.com>
Date: Tue, 3 Oct 2023 12:09:13 +0400
Subject: [PATCH 2/2] Fix angular build

---
 packages/survey-angular-ui/src/angular-ui.module.ts           | 4 ++--
 packages/survey-angular-ui/src/angular-ui.ts                  | 1 +
 .../{file-actions => file}/choose-file.component.html         | 0
 .../{file-actions => file}/choose-file.component.ts           | 0
 .../{file-actions => file}/file-preview.component.html        | 0
 .../{file-actions => file}/file-preview.component.ts          | 0
 6 files changed, 3 insertions(+), 2 deletions(-)
 rename packages/survey-angular-ui/src/components/{file-actions => file}/choose-file.component.html (100%)
 rename packages/survey-angular-ui/src/components/{file-actions => file}/choose-file.component.ts (100%)
 rename packages/survey-angular-ui/src/components/{file-actions => file}/file-preview.component.html (100%)
 rename packages/survey-angular-ui/src/components/{file-actions => file}/file-preview.component.ts (100%)

diff --git a/packages/survey-angular-ui/src/angular-ui.module.ts b/packages/survey-angular-ui/src/angular-ui.module.ts
index cdd8a0a8cd..3b0caae86d 100644
--- a/packages/survey-angular-ui/src/angular-ui.module.ts
+++ b/packages/survey-angular-ui/src/angular-ui.module.ts
@@ -114,8 +114,8 @@ import { MultipleTextRowComponent } from "./questions/multipletextrow.component"
 import { LoadingIndicatorComponent } from "./angular-ui";
 import { CoverComponent } from "./components/cover/cover.component";
 import { CoverCellComponent } from "./components/cover/cover-cell.component";
-import { ChooseFileBtn } from "./components/file-actions/choose-file.component";
-import { FilePreviewComponent } from "./components/file-actions/file-preview.component";
+import { ChooseFileBtn } from "./components/file/choose-file.component";
+import { FilePreviewComponent } from "./components/file/file-preview.component";
 
 @NgModule({
   declarations: [
diff --git a/packages/survey-angular-ui/src/angular-ui.ts b/packages/survey-angular-ui/src/angular-ui.ts
index ab1b024fd4..0ca0df7479 100644
--- a/packages/survey-angular-ui/src/angular-ui.ts
+++ b/packages/survey-angular-ui/src/angular-ui.ts
@@ -65,6 +65,7 @@ export * from "./panel.component";
 export * from "./components/popup/modal-container.component";
 export * from "./components/popup/popup.service";
 export * from "./components/survey-actions/survey-nav-btn.component";
+export * from "./components/file/file-preview.component";
 export * from "./questions/matrix.component";
 export * from "./components/svg-icon/svg-icon.component";
 export * from "./questions/file.component";
diff --git a/packages/survey-angular-ui/src/components/file-actions/choose-file.component.html b/packages/survey-angular-ui/src/components/file/choose-file.component.html
similarity index 100%
rename from packages/survey-angular-ui/src/components/file-actions/choose-file.component.html
rename to packages/survey-angular-ui/src/components/file/choose-file.component.html
diff --git a/packages/survey-angular-ui/src/components/file-actions/choose-file.component.ts b/packages/survey-angular-ui/src/components/file/choose-file.component.ts
similarity index 100%
rename from packages/survey-angular-ui/src/components/file-actions/choose-file.component.ts
rename to packages/survey-angular-ui/src/components/file/choose-file.component.ts
diff --git a/packages/survey-angular-ui/src/components/file-actions/file-preview.component.html b/packages/survey-angular-ui/src/components/file/file-preview.component.html
similarity index 100%
rename from packages/survey-angular-ui/src/components/file-actions/file-preview.component.html
rename to packages/survey-angular-ui/src/components/file/file-preview.component.html
diff --git a/packages/survey-angular-ui/src/components/file-actions/file-preview.component.ts b/packages/survey-angular-ui/src/components/file/file-preview.component.ts
similarity index 100%
rename from packages/survey-angular-ui/src/components/file-actions/file-preview.component.ts
rename to packages/survey-angular-ui/src/components/file/file-preview.component.ts